小編推薦：Fundebug專注於JavaScript、微信小程序、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，衆多大佬公司都在使用。
前言：
前段時間公司打算做一款基於線下服務的小程序，涉及到掃碼支付，地圖，充值，會員體系等功能。由於公司暫時沒有新招小程序開發人員，而我之前又有過開發小程序的經驗。所以，這個小程序開發自然而然也就交給我來做了。（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只支持網絡圖片。
六：wxml文件中可以使用三目運算符
如果我們要在wxml文件中做邏輯判斷，那麼我們可以使用三目運算符，列如：class=" {{type==1?'style_one':'style_two'}}"。這裏的意思是通過type的不同，渲染不同的wxss文件。注意！這裏要分清單引號與雙引號，不能弄混淆。
七：this.setData和直接賦值的區別
這兩者都可以造成data裏數據的改變，但是this.setData賦值纔會造成wxml裏面數據的改變，也就是同步更新渲染界面，而直接賦值只會讓data裏數據發生變化，但是界面並不會改變。看代碼：
//wxml文件
<text>我的名字是{{name}}</text>
//js文件
//數據源
data: {
name:'',
},
onLoad: function (options) {
this.data.name='張三'//只會使data裏數據發送改變，但是界面不會發生改變，界面仍顯示”我的名字是“
console.log(this.data.name)//打印出來的結果是”張三“
this.setData({
name: '張三'
})
//此時，界面數據纔會發生改變，變成”我的名字是張三“
},
八：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設置一張空白的圖片放上去吧，嘻嘻，我沒試過，但是應該可行。
十四：添加點擊事件
在wxml文件中，text,image,view,button等標籤都可以添加點擊事件。（ps:這點比移動開發中只有button才能添加點擊事件，其他的只能添加手勢方便了許多）使用button的時候有一點需要注意，那就是button有默認的樣式，我們如果不需要這個樣式，需要手動清除。
十五：關於提審上線
根據經驗，微信小程序第一個版本上線提審，時間會久一點，可能1-2天，後續版本一般2-3個小時。（工作時間）我感覺微信小程序的審覈沒有app store那麼嚴格。大家不用太擔心~
上面就是我開發上一個微信小程序項目中遇到的一些坑和總結出來的一些經驗，雖然不夠全面，但是對於正準備開發小程序的同學們應該有幫助，歡迎大家指正補充。後面開發中，我還會持續更新的，歡迎大家關注交流~
作者：冰之與火焰
鏈接：https://www.jianshu.com/p/c410e870f5af
關於Fundebug
Fundebug專注於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了9億+錯誤事件，得到了Google、360、金山軟件、百姓網等衆多知名用戶的認可。歡迎免費試用！
