傷不起的微信小程序

前段時間不是很忙，恰好公司須要開發一個微信小程序，因而我就入坑了（此坑仍是有點深滴，請備好乾糧）。

我是一名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接口時就一直報錯，後面才排查到是由於版本的問題。

其實對於小程序的推廣，除了這幾點，咱們還可使用公衆號裏的模版消息進行推送，具體請本身去看公賬號開發文檔。還有，好像訂閱號的文章裏也能夠寫上小程序的連接進行推廣，這個本人暫時沒試過，若是有小夥伴驗證了，記得評論告訴小哥哥。

 

若是要把小程序與公衆號打通，則需前往微信開放平臺，將這些公衆號和應用綁定到一個開放平臺帳號下，綁定後，一個用戶雖然對多個公衆號和應用有多個不一樣的OpenID，但他對全部這些同一開放平臺帳號下的公衆號和應用，它們的UnionID是同樣的，這樣就能夠聯通了。以下圖：

 最後講一下上線問題，上線時須要填一些相關信息，上面寫的很嚴格（嚇屎個把人），對於咱們開發iOS的程序員來講，最怕的就是被拒-被拒-悲劇。。。實際是沒那麼嚴格的，好比功能頁面及其說明，不怕，儘管填，拒了仍是算你的。審覈時間問題，第一次的話會久一點，兩天左右，之後迭代就快了，5個小時左右（上班時間，其實晚上他們也有人審覈的）。還有一點切記，切記！！！審覈成功後你會收到微信的通知，但並無自動上架更新，正式發佈請本身登陸後臺發佈，被坑了兩次了。。。