1. 樣式問題
主要說一下微信小程式和之前的web開發中表現不一致的元素。
1.1 button 按鈕
有時候，我們需要實現自定義轉發的功能，但是重新設定button元素的樣式，這個時候你可能會發現不管怎麼設定button的樣式，它的邊框都去不掉。後來才知道原來是after偽元素的原因（如果是瀏覽器的話，如果有偽元素在開發者工具能直接看到，小程式就不行，這點我覺得還是有點坑的）。
解決方案:
.btn::after{
border:none;
}複製程式碼順便列一下微信小程式button的預設樣式：
button {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
padding-left: 14px;
padding-right: 14px;
box-sizing: border-box;
font-size: 18px;
text-align: center;
text-decoration: none;
line-height: 2.55555556;
border-radius: 5px;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
color: #000000;
background-color: #F8F8F8;
}複製程式碼預設行高，padding，margin這幾個屬性還是要注意一下的。
1.2 image 圖片
小程式的image元素有一個mode屬性來設定圖片裁剪、縮放的模式，而且image元件預設寬度300px、高度225px。也就是說，如果不設定mode屬性，只設定width的值，圖片肯定是會變形的，因為該圖片的高度現在是225px而不是自適應的。
提供兩種解決方案:
- 設定mode屬性
// mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。// 我常用的模式是：// widthFix 寬度不變，高度自動變化，保持原圖寬高比不變// 也就是說設定mode="widthFix"後只設定width屬性，圖片也可以自適應// wxml<
image mode="widthFix" class="info--head" src="{{src
}
}">
<
/image>
// wxss.info--head {
width: 750rpx;
}複製程式碼- 不設定mode屬性，設定width和height將圖片的寬高固定，也不至於變形的太厲害，我覺得主要適用於輪播圖還有列表頁的縮圖之類的。
1.3 fixed定位
設定position: fixed; 的元素不能存在於 scroll-view 元素內，最好是在最外層，否則在ios系統上就會出現各種問題的。
2. 生命週期
2.1 進入主頁面 ->
進入子頁面 ->
返回主頁面
生命週期依次為: 主頁面onLoad ->
主頁面onShow ->
主頁面onReady ->
子頁面onLoad ->
子頁面onShow ->
子頁面onReady ->
子頁面onUnload ->
主頁面onShow。
可以看到在這個過程中子頁面的onHide並不會觸發。
2.2 tab頁之間進行切換
上一個tab頁onHide ->
當前tab頁onShow。
可以看到在 1 和 2 的過程中，tab頁都不會觸發 onUnload 事件。
2.3 onHide觸發時機
頁面隱藏/切入後臺時觸發。 如 navigateTo 或 底部 tab 切換到其他頁面，小程式切入後臺等。
2.4 onUnload觸發時機
頁面解除安裝時觸發。如 redirectTo 或 navigateBack 到其他頁面時。
2.5 chooseImage
這個可是個我遇到的一個大坑，當呼叫 wx.chooseImage 這個API的時候，居然會觸發 該頁面的onHide 和 onShow 事件，可能是因為我對 切入後臺時觸發onHide理解的不夠深刻？？？之前做的那個專案和 即時通訊IM 有關，我說為什麼選擇圖片之後聊天記錄怎麼就亂了呢，當時真的坑了我不少時間，真的是一個蘿蔔一個坑。
2.6 遇到的問題
主要是想在退出頁面的時候清除定時器，但是由於對 onHide 和 onUnload 觸發時機理解的不夠深刻，還專門開了 debug 具體除錯了一下生命週期，這下算是大致上明白了。
還有一點，很重要，如果是在 webview 內有定時器，在退出小程式頁面的時候一定要將 webview 的 src 屬性設定為 空， 不然webview好像並不會銷燬？反正我的定時器還在，設定src為空即可解決。
3. npm支援
官方的介紹只有4步：
- 在小程式中執行命令安裝 npm 包：
npm install； - 點選開發者工具中的選單欄：工具 –>
構建 npm； - 勾選“使用 npm 模組”選項；
- 構建完成後即可使用 npm 包。
照做一遍之後，嗯，很好。
what???我的操作有誤嗎？總共也才4步，難道這我都能出錯？後來查了一下，發現還少了很重要的一步:package.json檔案。對呀，平時做專案的時候這個檔案都是最不可或缺的，怎麼到了微信小程式就給忘了呢，看來還是讀書太少了。
解決辦法:
- 先使用
npm init在專案根目錄下新建package.json檔案。 - 之後跟著官方文件照做吧，我就不寫了。
4. 新增的API
我上次寫小程式都是一年以前了，所以我覺得新增的API可能大家都很熟悉了，不喜輕噴哈。
4.1 wx.getImageInfo 獲取圖片資訊
該API用來獲取圖片的width， height， path， orientation，type 等資訊，可以看到不僅能獲取圖片的寬度和高度，還能將 網路圖片的地址換成本地圖片的地址，當然了，網路圖片需先配置download域名才能生效。
4.2 FileSystemManager.readFile 讀取本地檔案內容
通過指定 encoding 就可以得到類似於 html5 FileReader 的效果，比如將檔案讀取為 base64。小程式支援的 encoding 還是比較多的，可以自己看看官方文件的。
4.3 FileSystemManager.getFileInfo 獲取該小程式下的 本地臨時檔案 或 本地快取檔案 資訊
這個API主要是用來獲取檔案的大小，也就是size屬性。如果還需要檔案摘要，可以使用下面的API。
4.4 wx.getFileInfo 獲取檔案資訊
這個API主要是用來獲取檔案的size和digest資訊，目前支援 md5 和 sha1 兩種。
4.5 wx.pageScrollTo 將頁面滾動到目標位置
在做即時通訊的時候，如果收到新訊息，在增加內容以後也要滾動頁面至底部；下拉重新整理也得回到頂部。這個時候該API就很有用了，要不然很無奈呀，我記得一年以前好像是沒有這個功能的。
4.6 總結
其實列舉的都是我在做 小程式 和 騰訊雲IM 即時通訊的時候需要使用的API，騰訊雲IM官方文件只有web端的，小程式的直接讓你參考web端的，因為API的差異，基本上所有功能都需要自己封裝，一般的還好，IM上傳圖片這個可就坑了，IM只能傳送base64編碼的檔案，要不是看到小程式支援了base64編碼，我都差點放棄了。
在不考慮壓縮圖片的情況，從選擇圖片到傳送IM圖片訊息，光是小程式這邊我就得呼叫4個API，小程式就不能簡化一下嗎？
5. 獲取使用者資訊getUserInfo
這簡直就是一個巨坑，做專案之前我去社群看了一下，發現這個API現在不能彈窗提醒了，必須使用者點選按鈕才能獲取，就是說沒有按鈕，連彈窗都彈不出來的。針對這個問題，我直接給後臺說了，那邊居然說是別人家的就不用點選按鈕就能獲取，到你這怎麼還得點選按鈕？我跟你說，讓使用者點選按鈕肯定是不現實的，那多影響使用者體驗，你自己想辦法去。
what？？？官方都說的那麼明確了，只有3種解決辦法，每一種都繞不開按鈕，我能怎麼辦？最後費了半天口舌，再加上我把別人家的小程式也都放到他們跟前，讓他們一個個看清有沒有按鈕，總算是搞定了。
6.總結
說實話，作為一個開發者，我還是更喜歡web這種開發的平臺，微信小程式真的是一步一個坑，如果可以，真的不想做微信小程式呀! 可惜沒有如果o(╥﹏╥)o。