近期組內接了小程式專案，也是有幸能夠加入到專案中，做一些簡單的開發。之前對小程式有所接觸，但是僅限於自己瞭解和書寫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，然後通過下面方法即可獲取：
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(使用方法見文件)。
以上就是在初次開發中遇到的問題及總結的使用方法，後面隨著使用的增多，肯定還會有更多的問題出現，隨時進行新增吧，算是對小程式使用自己的一個總結，有不足和錯誤之處，還希望各位大大提出寶貴意見。
2020年1月3日補充：
1、禁用小程式自帶分享功能：wx.hideShareMenu()，可以新增成功或者失敗的回撥函式；
2、scroll-view橫向滾動條相容問題：
在android系統下，scroll-view會出現橫向滾動條，可以通過兩種方式進行隱藏：
（1）設定外層盒子固定高度，並設定overflow:hidden，然後對scroll-view設定比外層盒子更高的高度，使其滾動條被隱藏；
（2）設定css樣式
::-webkit-scrollbar{
width:0;
height:0;
color: transparent;
}複製程式碼ps：前期初次接觸小程式書寫demo時，也遇到了一些小問題，付個傳送門：