前段時間不是很忙，剛好公司需要開發一個微信小程式，於是我就入坑了（此坑還是有點深滴，請備好乾糧）。 我是一名iOS開發工程師，個人覺得入門開發小程式的話，需要基本的web前端知識，比如說：代碼的書寫格式，規範，標簽以及樣式的使用等，但作為一門如此新的開發語言，它也有自己的獨特之處，就像我們的swif ...
前段時間不是很忙，剛好公司需要開發一個微信小程式，於是我就入坑了（此坑還是有點深滴，請備好乾糧）。
我是一名iOS開發工程師，個人覺得入門開發小程式的話，需要基本的web前端知識，比如說：代碼的書寫格式，規範，標簽以及樣式的使用等，但作為一門如此新的開發語言，它也有自己的獨特之處，就像我們的swift，融合了萬家語言於一體，學好它就可以敲遍天下無敵手了（程式猿的毛病又犯了。。。）。它的外表看起來有點像傳統的web開發，但它實質的開發思想又和我們的oc很像，比如它的 app.js、app.json、app.wxss 這三個全局文件的作用，還有數據綁定的開發模式。下麵就說說自己的入坑經歷吧，希望對大家有點點幫助。
先說一些大家上手小程式時都會問到的問題：
Q：小程式可以和現有的App 打通嗎？
A：小程式可以藉助微信聯合登錄，和開發者已有的App 後臺的用戶數據進行打通，但不會支持小程式和App 直接的跳轉。
Q：微信已經有了訂閱號、服務號、企業號，小程式和這三者有什麼不同？
A：小程式、訂閱號、服務號、企業號是並行的體系。
Q：小程式可以個人開發嗎？
A：小程式允許個人開發，只是個人開發是不能發佈的，並且想在真機上看到的話，在創建小程式時就得填上你申請好的appid。
Q：小程式需要付費嗎？
A：個人是不需要的，公司的需要一個被認證過的微信服務號，不需再付額外的費用（需要註意小程式申請時名字及icon的確認）。
開始正題：重要的事情說n遍（認真看文檔，仔細看文檔，認真仔細看文檔，雖然微信的官方文檔寫的不清不楚）。長度單位基本使用rpx（這是小程式特有的單位，可以理解為一個百分比），它是把屏幕寬分為750等份，所以我們在開發時，最好要求UI設計師提供750px寬度的圖，然後在iPhone6上面開發。在這我們得註意一個點，模擬器上面的UI展示效果和真機上的有時還是有差別的，所以我們在模擬器上調試後好，一定要用不同真機看看效果，必要時可以根據不同機型稍作調整（蘋果手機還好，如果是安卓手機，對於點點ui問題就沒必要太糾結了。。。怕你會瘋）。
生命周期的註意：下麵圖片里的兩個數組，它們的作用域都是本頁面，但是它們的生命周期是不同的。dataList1的生命周期同小程式的生命周期，也就意味著你每次退出頁面時，要在onUnload: function () {}函數中使之置空，要不會有數據的疊加發生（對於像BOOL值的判斷也需註意）。dataList2的生命周期同本頁的生命周期，所以不需要手動管理。全局屬性或函數，請在app.js里申明，配合var app = getApp()使用。
小程式現在的入口有：微信客戶端-發現-小程式；個人或群里分享（不支持盆友圈分享）；掃碼進入。
我們主要看看後面兩種方法的實現，分享主要調用onShareAppMessage函數，請看下麵的截圖。
掃碼請仔細看文檔（https://mp.weixin.qq.com/debug/wxadoc/introduction/qrcode.html#二維碼跳轉規則），
如何設置：後臺-設置-開發設置-伺服器功能變數名稱-掃普通鏈接二維碼打開小程式（如下圖，左開發版，右線上版）
這裡要特別註意兩點：在我們的小程式未上線時，一次最多只支持5個鏈接的使用。在使用鏈接生成二維碼之前，要先去後臺-設置-開發設置-伺服器功能變數名稱-request合法功能變數名稱里，配置好鏈接功能變數名稱。如果你的鏈接是帶參數的，那麼一定要註意，生成二維碼時參數也必須一樣。當我們的小程式上線後，就沒有這麼多限制了，只需設置規則及功能頁面就可以了，這也就意味著我們線上版生成的二維碼里的參數可以隨便改，達到掃不同的二維碼，進入的界面里的數據都不一樣的效果。
好了，轉發及二維碼的生成我們都會了，現在來看看怎麼在程式中怎麼接收這些參數，然後去使用（看下圖）：
註意點：在onLoad函數中設置參數（options，自定義）接收，二維碼鏈接內容會以參數q（只能用q去接收）的形式帶給頁面，在onLoad事件中提取"q"參數並自行UrlDecode一次，即可獲取原二維碼的完整內容。
工具類的使用：常用的方法可以放在util.js裡面，方便管理和使用。例如調用裡面的網路請求方法：
var request = require('../../../utils/util.js')；
request.httpsGetRequest(url, dic, function (success) { }）；
module.exports = {
formatTime: formatTime,
getWindowWidth: getWindowWidth,
getWindowHeight: getWindowHeight,
showStyle: showStyle,
useScanCode: useScanCode,
httpsGetRequest: httpsGetRequest,
httpsPostRequest: httpsPostRequest
}
function getWindowWidth() {
var num = 0
wx.getSystemInfo({
success: function (res) {
num = res.windowWidth
}
})
return num;
}
function showStyle(title, content) {
console.log('showStyle')
wx.showModal({
title: title,
content: content,
success: function (res) {
if (res.confirm) {
console.log('用戶點擊確定')
} else {
console.log('用戶點擊取消')
}
}
})
}
//GET請求
function httpsGetRequest(req_url, req_obj, res_func) {
var jsonUrl = {
url: req_url,
header: { "Content-Type": "application/json" },
method: "GET",
success: function (res) {
typeof res_func == "function" && res_func(res.data);
}
}
if (req_obj) {
jsonUrl.data = req_obj;
}
wx.request(jsonUrl);
}
對於代碼的管理及利用，我們也可以多使用模板（template），具體請參考（https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/template.html）。
背景圖（background-image:url（‘imageUrl’））的使用：可能剛開始是可以直接使用本地的圖片的，但現在經過自己的測試，如果使用本地圖片的話，必須先base64編碼（http://base64.xpcha.com/indexie.php），然後把imageUrl換成你編碼後的字元串，由於編碼後的字元串不是一般的長，所以還是推薦使用網路圖片作為背景圖的資源。
分享到朋友圈：小程式雖然不能直接分享到朋友圈，但是並不是代表沒有方法。既然我們可以通過掃碼進入小程式，那也就意味著我們只要把二維碼分享到朋友圈，別人長按識別後就可以達到目的了。但是我們如果只是轉一個二維碼在朋友圈的話，誰知道是什麼內容，所以也就需要配些文字說明，個人感覺這樣hen low，所以了，不如在二維碼下加一個吸引人的背景圖，並且在背景圖上加以文字說明（作為一名程式猿，做了產品經理做的事，還給自己挖了個坑去實現。。。申明我不是處女座。。。）。想法很好，怎麼去實現呢？
方法一：讓後臺生成二維碼圖片，包括合成背景圖，然後我們下載再保存到相冊，用的api有，wx.downloadFile======wx.saveImageToPhotosAlbum。
方法二：自己生成二維碼併合成，需要用到canvas標簽，至於合成圖片，小程式是沒有提供介面的，我們可以把要合成的背景圖設為畫布的背景圖，這樣就可以實現了。用的api有，
wx.canvasToTempFilePath======wx.saveImageToPhotosAlbum。難點是怎麼畫二維碼，小程式沒有提供介面，請參照：http://blog.csdn.net/sinat_17775997/article/details/53608479。
註意點：保存圖片到相冊需要用戶的許可權，所以需要處理好這塊的邏輯，就像獲取用戶的基本信息一樣；判斷api是否可用，本人的微信版本6.5.6，在使用wx.saveImageToPhotosAlbum介面時就一直報錯，後面才排查到是因為版本的問題。
其實對於小程式的推廣，除了這幾點，我們還可以使用公眾號里的模版消息進行推送，具體請自己去看公帳號開發文檔。還有，好像訂閱號的文章里也可以寫上小程式的鏈接進行推廣，這個本人暫時沒試過，如果有小伙伴驗證了，記得評論告訴小哥哥。
最後講一下上線問題，上線時需要填一些相關信息，上面寫的很嚴格（嚇屎個把人），對於我們開發iOS的程式員來說，最怕的就是被拒-被拒-悲劇。。。實際是沒那麼嚴格的，比如功能頁面及其說明，不怕，儘管填，拒了還是算你的。審核時間問題，第一次的話會久一點，兩天左右，以後迭代就快了，5個小時左右（上班時間，其實晚上他們也有人審核的）。
本人qq：763815972，歡迎一起交流。
