微信小程式開發經驗總結
前言：
前段時間公司打算做一款基於線下服務的小程式，涉及到掃碼支付，地圖，充值，會員體系等功能。由於公司暫時沒有新招小程式開發人員，而我之前又有過開發小程式的經驗。所以，這個小程式開發自然而然也就交給我來做了。（ps:我在這家公司的崗位是ios開發。）
說到小程式，可能很多人會誤解了，這個不就是web嘛？其實小程式並不等於web，準確來說，他結合了原生app和web的各自優勢。既有原生app那樣流暢順滑的體驗，又具有web開發的優勢，頁面變動靈活，一次開發多端適用。在開發小程式之前，我們需要申請開發者賬號，配置環境，等等。如何開始我的第一個小程式，不在本文的討論範疇之內，大家在網上可以找到很多的教程。這裡不一一贅述。（ps:下文微信小程式簡稱小程式）
正文：
一：https部署以及設定合法域名。
1.小程式向後臺請求介面必須使用https，包括web-view裡的網頁，如果專案中有用到web socket，那麼也必須使用wss協議。https證書一般會用第三方的。比如阿里雲的。
2.在微信小程式管理後臺，還需要配置合法域名。當然，在後臺還沒有部署https之前，我們也可以進行開發除錯，只需要設定不校驗合法域名，https證書等即可。
二：post請求，json資料格式轉換
當我們向後臺進行post請求的時候，當我們的傳輸資料的格式為json的時候，需要設定
'content-type': 'application/x-www-form-urlencoded'
三：微信小程式誰是首頁的問題
當我們在開發原生應用的時候，我們一般會在程式的入口，設定我們程式的第一個頁面，但是反觀小程式，並沒有找到類似的方法，原來在小程式中，app.json檔案中的pages資料的第一個元素，就是首頁。但是，我們有時候會有這樣的需求，微信掃碼直接跳轉小程式內部的指定頁面，那麼，這時，只需要在小程式管理後臺，設定掃碼開啟的頁面路徑填好即可。
四：微信小程式開發單位問題
我們再開發iOS的時候預設使用pt；在開發Android的時候，我們使用dp,sp等單位；在開發web的時候使用em,rem等單位。但是在我們的小程式裡我們只要記住rpx這一個單位就好了，這樣我們開發出來的小程式就完美的執行在各式各樣螢幕的手機上了。no!no!no，也是有特殊情況的，有時候我們就不能使用rpx，比如使用到 canvas 的時候，那麼就只能使用 px 為單位，那麼，如何做到螢幕適配呢？我的做法是使用 wx.getSystemInfo 這個api來獲取到執行手機的螢幕的寬度和高度，那麼根據UI的標註圖的螢幕寬高，就可以換算出一個比例來了。如果大家有更好的做法歡迎交流指正。
五：wxss檔案中不支援本地圖片
如果我們有一個需求：新增一張背景圖，根據web開發思維，肯定是在background-image:中設定本地圖片的路徑，但是在微信小程式上這是行不通的。微信小程式的background-image只支援網路圖片。
六：cover-view元件
這是小程式上特有的元件，它其實是由客戶端建立的原生元件。這些元件有：cavans，map，vedio等，如果想要在原生元件上覆蓋元件的話，新增view,text,button都是行不通的，必須使用cover-view和cover-image元件，具體用法，可以參考微信小程式官方文件。下面我來說說cover-view中踩過的坑。 cover-view對css支援真的不太友好 ，雖然我們設定背景色，字型大小，寬高等都沒啥問題，但是，
1.在web開發中，如果我們想要給文字設定刪除線，那麼使用 text-decoration 即可實現，但是抱歉， cover-view不支援 這個屬性。
2.曾經我嘗試 給cover-image新增旋轉的動畫 ，但是發現怎麼都實現不了，我猜測可能也是不支援，後來換了其他方法實現這個需求了。
3.cover-view是用 hidden 屬性的，但是我奇葩的發現了，在 ios10系統 上，cover-view改變hidden屬性的時候報錯了，後來換成了 wx:if ，就這樣神奇的解決了。
4.使用cover-view元件的時候，如果cover-view在模擬器上表現是好的，別忘了使用真機跑跑看，說不定會有意想不到的結果哦。
5.總之，使用cover-view的時候一定要小心謹慎。
這些是我遇到的關於cover-view坑，應該還有，歡迎大家補充。
七：微信小程式不能操作DOM樹
web開發中，可以使用getElementById()訪問documnent中的某一個元素，顧名思義，就是通過id來獲取元素，但是微信小程式沒有windows物件，所以小程式不能直接操作dom樹，小程式採用的都是mvvm的設計模式，資料雙向繫結。類似於vue.js的寫法。
八：微信小程式分享功能如何實現
微信有龐大的流量，既然有這麼得天獨厚的平臺，那麼在小程式開發分享功能也是水到渠成的。比如，要開發一個類似外賣平臺發紅包的功能，照以前開發app邏輯，app客戶端負責開發“發”的邏輯，整合分享的sdk，把紅包發出去即可，再使用web開發“領”的邏輯，也就是領紅包的頁面是一個web頁面。一開始，我也是打算這麼設計這個架構的。但是在web頁面重新登入，在開啟小程式，中間涉及到的登入流程又會顯得比較複雜。後來參考了其他小程式的分享功能，把分享頁面也定義成一個小程式原生頁面，而不是小程式內的web-view頁面。這樣設計，實際開發後，發現其實簡單了許多。
九：配置普通連結二維碼規則需要注意的地方
這裡有一個地方需要注意。開發小程式的時候，我們有一個使用微信掃碼開啟指定頁面的需求。那麼我們需要配置一個普通連結二維碼規則，但是我們在開發測試的過程中，我們需要來測試我們的跳轉功能是否好用。二維碼規則需要釋出才可以全網使用，測試連結也是隻針對管理員開發者體驗著等有效果。
二維碼配置頁面.png
十：地圖導航等功能需要注意的地方
微信小程式整合地圖功能非常簡單，但是需要注意的是我們使用的是騰訊地圖，也就是gcj02座標系，如果後臺使用的是其他座標系，那麼我們需要轉換。如果需要實現導航功能，那麼小程式內的map元件是沒有這個能力的，我們需要呼叫 wx.openLocation 來實現，其實這個api是打開了微信內建的騰訊地圖，這樣，就是我們熟悉的微信導航服務了，可以在這裡開啟手機內的百度地圖，高德地圖，騰訊地圖這些app來進行導航了。
十一：wx.showToast吐槽
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
微信提供的這個api，預設的提示圖示是一個小勾勾，但是即使不設定icon，也會出現這個圖示，這就很難受了。如果我想提示失敗呢？你給我一個對勾的圖示？我的解決辦法就是自己寫了一個toast-view，或者可以找ui設定一張空白的圖片放上去吧，嘻嘻，我沒試過，但是應該可行。
上面就是我開發上一個微信小程式專案中遇到的一些坑和總結出來的一些經驗，雖然不夠全面，但是對於正準備開發小程式的同學們應該有幫助，歡迎大家指正補充。