title: wechat-小程式入坑
categories: Wechat
tags: [wechat, 記錄]
date: 2018-10-23 14:13:18
comments: false

wechat-小程式入坑

前篇

• 小程式開發文件 - https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18101612
• 小程式api - https://developers.weixin.qq.com/minigame/dev/document/media/canvas/createCanvas.html
• 網頁接入 jssdk 文件: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

js引入 promise async await

小程式開發中由於 es6 至少 ios 9.1 不支援，所以如果已經在專案中使用了較多了es6或必須使用es6，則需要勾選 es6 轉 es5，才能解決前述相容問題。但若有使用 async await 會報 regeneratorRuntime is not defined 錯誤。解決方法如下：

1. 下載 facebook 的 regenerator 庫 -
   https://github.com/facebook/regenerator
2. 取 regenerator-master/packages/regenerator-runtime 目錄中的 runtime.js 檔案放入你的專案中
3. 在你有使用 async await 的檔案前面引入這個 runtime.js 檔案即可，引入程式碼如： const regeneratorRuntime = require(’…/…/utils/runtime.js’);

• 參考: - https://developers.weixin.qq.com/community/develop/doc/000a4ac7c7c108998916efda35b400

小程式 webview

• 是小程式, 不是小遊戲, 小程式才能使用 webview, 將自定義域名的網頁嵌入到小程式中展示.

• 內網測試需要勾選 不校驗 業務域名 驗證

  

小程式 與 webview 互動

• 參考
  • https://blog.csdn.net/laishaojiang/article/details/82181952
  • https://blog.csdn.net/qq_37235231/article/details/82053062

問題

• 小程式 外掛 中, 禁止使用 webview, 官方解釋: https://developers.weixin.qq.com/community/develop/doc/000a641bff08c086b14723a2651400?jumpto=comment&commentid=0006ceac8f43e8a7b347ebce3564

小程式 生命週期

頁面的生命週期

參考: https://www.jianshu.com/p/0078507e14d3

Page()函式用來註冊一個頁面。接受一個 object 引數，其指定頁面的初始資料、生命週期函式、事件處理函式等。
object 引數說明：

頁面的生命週期

• 小程式註冊完成後，載入頁面，觸發onLoad方法。
• 頁面載入後觸發onShow方法，顯示頁面。
• 首次顯示頁面，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只會呼叫一次。
• 當小程式後臺執行或跳轉到其他頁面時，觸發onHide方法。
• 當小程式有後臺進入到前臺執行或重新進入頁面時，觸發onShow方法。
• 當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發onUnload。

跳轉頁面-路由

官方api說明 - https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

• navigateTo

  wx.navigateTo({
      url: '../index/index'
  });
  

  生成新頁面, 加入堆疊, 走一遍: 舊頁 onHide -> 新頁 onLoad, onShow, onReady,

• redirectTo

  wx.redirectTo({
      url: '../index/index'
  })
  

  生成新頁面, 加入堆疊, 走一遍: 舊頁 onUnload -> 新頁 onLoad, onShow, onReady,

• navigateBack

  wx.navigateBack({
      delta: 2
  })
  

  返回delta個頁, 中間所有的頁 按堆疊順序出棧呼叫 onUnload, 目的頁 onShow

路由-帶引數

• 例如: 從 a頁面 -> b頁面

  // a頁面跳轉
  wx.navigateTo({
  	url: '../web001/web001?key=value&key2=value2',
  });
  
  // b頁面 onLoad 中可以接收到引數
  onLoad: function (options) {
  	gLog("--- web001 onLoad", options) // object 型別, {key: "value", key2: "value2"}
  },
  

  • 其他路由api類似, 都可以這樣傳參 ?key=value&key2=value2

小程式外掛

外掛開發

參考

• https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html

使用外掛

參考

• https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html

採坑

• 微信開發工具小程式開發預覽按鈕不能點選提示遊客模式無法使用本功能？？？

  刪除專案, 重新新增即可.

  參考: https://developers.weixin.qq.com/community/develop/doc/2536993b261da576febfdf8201b5a822