用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 新手教程 查看內容

小程序初實踐總結

Rolan 2019-12-31 00:05

近期組內接了小程序項目,也是有幸能夠加入到項目中,做一些簡單的開發。之前對小程序有所接觸,但是僅限于自己了解和書寫demo,真正項目開發還是第一次~開發過程中也是遇到了一些不熟悉和自己覺得是小坑的地方,做 ...

近期組內接了小程序項目,也是有幸能夠加入到項目中,做一些簡單的開發。之前對小程序有所接觸,但是僅限于自己了解和書寫demo,真正項目開發還是第一次~開發過程中也是遇到了一些不熟悉和自己覺得是小坑的地方,做個簡單總結,給自己做個記錄,同時給需要的小伙伴一些小小參考。

一、添加一個新組建,控制臺報錯“Component is not found in path '../../components/xx/xx'”。

答:這個問題開始是很迷茫的,仔細檢查了文件名稱、引用路徑以及父組件usingComponents,都沒有發現有問題,但是控制臺依舊提示找不到對應組件。后面經過大老提示: 對于一個新的組件,必須在對應的js里添加Component({}),json文件里也要寫上component:true。加上相關配置后,控制臺就不會飄紅了。

二、text組件,默認會出現上內邊距。

答:使用text組件展示文字內容,看上去并沒有什么技術而言,直接引用就好了(心里默默開森)

<text>
  this is component
</text>復制代碼

但是,看到效果之后,顯然有點蒙圈,為什么上邊會出現那么大的距離???!

第一個想法是去看css,是否有默認內邊距樣式,然而并沒有;通過padding、margin去設置值,也沒什么用;然后。。然后。。。我就不知道怎么辦了,只好請教度娘。

網上有小伙伴給出了答案,其實并不是樣式問題,而是text組件本身問題,要修改這個問題,只需要把text標簽和內容寫在一行就可以了。

<text>this is component</text>
復制代碼

三、小程序分享功能,頁面分享和按鈕分享功能。

答:眾所周知,小程序是可以進行分享的,有兩種方式,一個是自帶的分享功能,另一個是頁面上按鈕點擊分享。本質上他們調用的是同一個方法,即onShareAppMessage,可以通過options參數的options.from區分是來自按鈕還是原生分享,可以通過設置對應字段修改分享展示的內容,不設置則默認分享當前頁。

onShareAppMessage (res) {
  // 來自頁面內轉發按鈕    
  if (res.from === 'button') {
     return {
        title: `標題`,      //分享標題        
        path: shareUrl,    //分享的鏈接        
        imageUrl:‘’        //分享展示的圖片           
     };    
   } else {      
     return {        
       title: `分享標題`,        
       imageUrl:''    
     };
   }
}復制代碼

按鈕分享,只需要給button添加一個open-type即可,<button open-type="share"></button>。但是此時按鈕會有默認樣式,可以通過控制臺查看,進行css修復樣式,分享回調同樣調用上邊方法。

四、小程序內獲取某個元素或者組件距離頂部初始高度

答:實際開發中,我們基本會遇到需要獲取某個元素位置信息的需求,早在jq一把梭的時代,獲取這些屬性值是很容易的,直接一個api就可以了。同樣的小程序里也有比較實用的方法,我們可以給需要獲取位置的元素/組件一個id,然后通過下面方法即可獲?。?/p>

let query = wx.createSelectorQuery().in(this);
query.select('#testId').boundingClientRect(function(rect){
    //rect即包含了所需要的各種位置信息,如top、left、right、bottom等
})復制代碼

如果在頁面初始化時需要獲取到位置,可以在onLoad方法里使用(最好使用setTimeout,否則可能會取不到),獲取對應值之后就可以進行后續的處理了。

五、scroll-view組件使用

答:滾動組件的使用,在開發中可以說很普遍了。小程序也封裝了scroll-view組件,并提供了一些封裝好的方法,使用起來可以說很方便了,但是也不可避免的有一些需要注意的地方。

1、scroll-view的綁定scroll事件不觸發

當頁面組件按照文檔方法書寫完成后,去滾動頁面發現頁面滾動事件并沒有觸發,后面經過仔細查看,確定問題原因是scroll-view沒有設置高度,而且必須是精準高度,不能用百分比。

2、scroll-view滾動到某一位置

我們開發時可能需要用到點擊后滾動到某一位置或者初始化時滾動到對應位置,過去通常是通過錨點方式進行觸發,同樣的scroll-view為我們封裝了一個很好用的方法scroll-into-view,對應的值也是一個id值,具體使用方法及注意事項可以參考文檔( scroll-view )。

3、scroll-view中包含fixed定位元素,滾動時fixed定位元素閃動

這個問題算是比較坑了,在scroll-view里面,我們設置某個元素或者組件為fixed定位,在滾動頁面時,會發現定位的元素會消失一下然后再出現,雖然不是什么嚴重問題,但是很影響用戶體驗。這個問題我看到社區里也有很多人在問,但是目前官方還沒有給出合理方法。目前簡單的應對方法我總結了兩點:

一是把定位元素放到scroll-view外部,此類方法可以完美避開上述問題,但是某些場景下可能不太適用;

二是,在使用scroll-view時我們通常會設置scroll-with-animation=true即開啟滾動過度動畫效果,當我們把這個值設置為false時,上述問題也能很好的解決,即使定位元素在scroll-view內部也不會有閃現問題。但是此方法犧牲的也是用戶體驗,如果有短距離的頁面滾動可以使用此類方法。

歡迎遇到此類問題的小伙伴進行補充,在官方給出完美方案之前,我們也能有自己的應對方案。

六、小程序checkbox樣式

這個就不得不吐槽一下UI了,其他的都還好,但是對于表單相對應的樣式,真的是丑爆了!而且,當你想通過css樣式覆蓋方法修改的時候,會發現,你的修改根本就是不起作用的??!根本原因就是你所看見的wxml結構與內容和樣式所定義的根本不是一個樣子?。?!

當然也有機智的小伙伴探究出了方案(以checkbox為例):

//wxml
<label>
    <checkbox>aaa</checkbox>
</label>

//wxss
//修改checkbox大小
checkbox .wx-checkbox-input{}
//修改checkbox選中后的樣式
checkbox .wx-checkbox-input.wx-checkbox-input-checked{}
//修改checkbox選中圖標樣式
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{}復制代碼

當然,如果你不喜歡原組件,不想去修改css,完全可以自己仿寫一個checkbox,樣式自己寫,切換效果通過點擊事件(參數e,獲取data)自己控制就好。

關于表單內容,后面會再總結一個自定義表單及自定義校驗方法及自己進行的優化。

七、小程序頁面跳轉,跳轉到其他域名頁面

小程序頁面跳轉,我們可以通過wx.navigateTo()方法進行,但是當需要跳轉到不同域頁面時,直接跳轉鏈接的方式就不好用了。小程序也為我們提供了方法,即webb-view( 使用方法見文檔)。

以上就是在初次開發中遇到的問題及總結的使用方法,后面隨著使用的增多,肯定還會有更多的問題出現,隨時進行添加吧,算是對小程序使用自己的一個總結,有不足和錯誤之處,還希望各位大大提出寶貴意見。

ps:前期初次接觸小程序書寫demo時,也遇到了一些小問題,付個傳送門:

初試微信小程序遇到的問題總結

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 木風622 來自: 掘金
梦幻单人赚钱方法