微信小程序開發的一點心得

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而不是自適應的。

提供兩種解決方案:

1. 設置mode屬性

// mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。
// 我經常使用的模式是：
// widthFix 寬度不變，高度自動變化，保持原圖寬高比不變
// 也就是說設置mode="widthFix"後只設置width屬性，圖片也能夠自適應

// wxml
<image
    mode="widthFix"
    class="info--head"
    src="{{src}}"></image>
// wxss
.info--head {
    width: 750rpx;
}
複製代碼

2. 不設置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步：

1. 在小程序中執行命令安裝 npm 包：npm install；
2. 點擊開發者工具中的菜單欄：工具 --> 構建 npm；
3. 勾選「使用 npm 模塊」選項；
4. 構建完成後便可使用 npm 包。

照作一遍以後，嗯，很好。

what???個人操做有誤嗎？總共也才4步，難道這我都能出錯？後來查了一下，發現還少了很重要的一步: package.json文件。對呀，平時作項目的時候這個文件都是最不可或缺的，怎麼到了微信小程序就給忘了呢，看來仍是讀書太少了。

解決辦法:

1. 先使用 npm init在項目根目錄下新建package.json文件。
2. 以後跟着官方文檔照作吧，我就不寫了。

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。