摘要：除官方外的參考文章微信小程序?qū)嵗齽?chuàng)建下發(fā)模板消息實例手把手教你開發(fā)微信小程序之模版消息開發(fā)教你突破小程序模板消息的推送限制獲取用戶信息接口的廢棄問題接口是獲取用戶信息昵稱，頭像等的接口，在官方文檔上寫是即將廢棄。

1、分享監(jiān)聽接口
分享消息給好友時，開發(fā)者將無法從callback獲知用戶是否分享完成，也無法在分享后立即獲得群ID。請參考調(diào)整指引

2、getUserInfo接口
用戶需要點擊組件后，才可以觸發(fā)登錄授權(quán)彈窗、授權(quán)自己的昵稱頭像等數(shù)據(jù)。請參考調(diào)整指引

3、openSetting接口
用戶需要點擊行為后，才可以跳轉(zhuǎn)打開設(shè)置頁，管理授權(quán)信息。請參考調(diào)整指引

官方文檔上提到了幾種檢測方法，但是測試后發(fā)現(xiàn)有些沒有用：
1）wx.canIUse()對一些api沒有用
2）if (wx.apiXX) { wx.apiXX(); }也不完全有用
所以，最后通過直接比較當前版本號和目標版本號來實現(xiàn)兼容。

/**
 * 比較兩個版本號的大小，用于兼容小程序不同版本的api時比較版本號（v1 > v2則返回1）
 * @param {*} v1
 * @param {*} v2
 */
export function compareVersion(v1, v2) {
  v1 = v1.split(".")
  v2 = v2.split(".")
  var len = Math.max(v1.length, v2.length)

  while (v1.length < len) {
    v1.push("0")
  }
  while (v2.length < len) {
    v2.push("0")
  }

  for (var i = 0; i < len; i++) {
    var num1 = parseInt(v1[i])
    var num2 = parseInt(v2[i])

    if (num1 > num2) {
      return 1
    } else if (num1 < num2) {
      return -1
    }
  }

  return 0
}

const  SDKVersion  =  wx.getSystemInfoSync().SDKVersion; // 獲取版本
if(T.compareVersion(SDKVersion, "2.0.7")>=0) { ... }

小程序跳轉(zhuǎn)只能實現(xiàn) 同一公眾號下關(guān)聯(lián) 的小程序跳轉(zhuǎn)
一個公眾號可關(guān)聯(lián)10個同主體的小程序，3個不同主體的小程序。
一個小程序可關(guān)聯(lián)3個公眾號。
（p.s. 所以想跳轉(zhuǎn)像蘇寧小程序，只能把我們小程序關(guān)聯(lián)到他們小程序的公眾號下）

(1)使用navigator組件(僅用于微信2.0.7以上版本)

跳轉(zhuǎn)mp

(2)使用navigateToMiniProgram來兼容微信2.0.7以下（但即將廢棄） >=1.3.0

goMiniprogram() {
    const  SDKVersion  =  wx.getSystemInfoSync().SDKVersion; // 獲取版本
    if(T.compareVersion(SDKVersion, "2.0.7")>=0) {
        wx.navigateToMiniProgram({
            appId:  this.changeNewAppid,
            path:  this.changeNewUrl,
            envVersion:  "release",
            success(res) {
                console.log("打開mp成功")
            }
        })
    }
}

調(diào)試注意：
開發(fā)者工具上不會顯示跳轉(zhuǎn)，但我們可以從回調(diào)函數(shù)里log打印信息，只有真機調(diào)試才可以跳轉(zhuǎn)。

格式：pages/list?source=wxmpcz01 （不要appid，也不要pages前加/）

思路：
1.小程序不能分享到朋友圈，只能通過保存圖片的形式分享。
2.如果保存靜態(tài)圖片，可以直接調(diào)接口就行，但是需求是動態(tài)的圖片（獲取用戶的頭像），所以需要用canvas畫圖，然后保存成2倍/3倍圖。

優(yōu)化的問題：
一、文字有用特殊字體，但是字體文件都比較大。所以需要用fontmin抽取出所需字的字體文件，最后上線頁面從原來的3.7MB變成29KB字體woff/eot/ttf文件。

之前產(chǎn)品想要文案不寫死，三種成功頁各自有隨機的文案，這個在想怎么優(yōu)化更好。因為寫死的文案可以直接抽出來。隨機文案要么就是一次性把文案抽出來但字體文件大小會增加；要么就是node寫個進程模擬cmd去跑fontmin實時壓縮字體的命令，但這種會更慢一些，而且小程序不一定支持這種寫法。（一般的PC端網(wǎng)頁是支持的）

小程序中canvas不支持使用自定義字體。所以保存功能需要使用圖片替代文字。

保存圖片因為用的canvas，然后canvas每一層無法設(shè)置優(yōu)先級，只能一層層疊上去，所以一些圖片/資源異步加載的順序比較重要，如果加載順序不做控制則可能將其他內(nèi)容物覆蓋。目前用的是await/aync + Promise.all()來實現(xiàn)

二、為了使保存的帶有二維碼的圖片更加清晰，保存圖片需要使用upng轉(zhuǎn)換成base64格式的。

1.canvas的clip()裁剪方法，只對第一次裁剪的圖有效，后面裁剪都無效。
解決方案：制作一張和頭像圖片一樣大的中間有個n個圓形鏤空（中間透明）的圖片繪制在頭像上，在視覺上給頭像做出圓形的效果。
2.不能給文字設(shè)置字體，所以需求需要特殊字體時用的圖片。
3.保存canvas為圖片時，ctx.draw()需要加個定時器，晚些執(zhí)行canvasToTempFilePath().否則保存下來的是空白圖片。

ctx.draw(true, setTimeout(function() { // 延遲一下
    wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 2079,
        height: 2181,
        destWidth: 2079,
        destHeight: 2181,
        canvasId: "myCanvas",
        success: function(res) {
            self.data.savedImgUrl = res.tempFilePath;
            self.saveImageToPhoto();
        }
    });
}, 400));
// 保存圖片到相冊
saveImageToPhoto() {
    const that = this;
    if (this.data.savedImgUrl !== "") {
        wx.saveImageToPhotosAlbum({
            filePath: this.data.savedImgUrl,
            success: function() {
                that.imgSaveLoading = false;
                that.$apply();
                wx.showModal({
                    title: "保存圖片成功",
                    content: "xxxx",
                    showCancel: false
                });
            },
            fail: function(res) {
                console.log(res);
                that.imgSaveLoading = false;
                that.$apply();
                if (res.errMsg === "saveImageToPhotosAlbum:fail cancel") {
                    wx.showModal({
                        title: "保存圖片失敗",
                        content: "您已取消保存圖片到相冊！",
                        showCancel: false
                    });
                } else {
                    wx.showModal({
                        title: "提示",
                        content: "保存圖片失敗，您可以點擊確定設(shè)置獲取相冊權(quán)限后再嘗試保存！",
                        complete: function(res) {
                            if (res.confirm) {
                                wx.openSetting({});      // 打開小程序設(shè)置頁面，可以設(shè)置權(quán)限
                            } else {
                                wx.showModal({
                                    title: "保存圖片失敗",
                                    content: "您已取消保存圖片到相冊！",
                                    showCancel: false
                                });
                            }
                        }
                    });
                }
            }
        });
    }
}

參考文章:
小程序05 canvas繪圖并保存到相冊
canvas坑

如果使用右上角的默認分享功能，可以調(diào)用onShareAppMessage()， 如果自定義按鈕分享則是使用 結(jié)合 onShareAppMessage里加一些判斷。(注意：成功/失敗callback于2018/10/10廢棄)

分享給家人 onShareAppMessage(res) { let shareType = "friend"; let title = "送你一個公益禮包，快去打開看看是什么！"; let path = "XXXX"; // 右上角分享時 if (res.from === "button") {// 來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕，根據(jù)不同的#id分享不同的鏈接等操作 shareType = res.target.id.split("-")[1]; if (shareType === "family") { // 分享結(jié)果頁 path = ‘XXXXXX2’; title = "我有個公益禮包需要和家人一起打開，你快點進來！" ; } .... } return { // 分享的title，path里都可有變量 title: title, path: path, imageUrl: "xxx", success(res) { console.log(res); 做一些成功后的操作... }, fail(res) { console.log(res); } }; } 7.上報formid給后臺實現(xiàn)服務(wù)消息觸達

1.在微信公眾平臺-小程序的模板中心先申請一個消息模板
2.服務(wù)消息觸達只有支付的和提交表單才能觸發(fā)服務(wù)觸達通知。而支付這個方法不符合場景，所以使用提交表單：把任意一個文本改造成一個空表單的按鈕，然后點擊上報formid給后臺。（1次提交表單可下發(fā)1條，多次提交下發(fā)條數(shù)獨立，相互不影響。）
3.后臺使用formid后調(diào)用相應(yīng)觸達的接口。

/**
前提條件：
1.已獲取access_tocken。
(參考接口：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret})
2.已獲取openId。
(參考接口：https://api.weixin.qq.com/sns/jscode2session?appid=${G.appId}&secret=${ appSecret}&js_code=${code}&grant_type=authorization_code)
**/

// 關(guān)鍵代碼：

    
        一個普通文本，把他改造成一個按鈕，點擊提交空表單來上報formid
    


formSubmit(e) {
    const { formId } = e.detail; // 獲得formid
    ...
},

注意：
1.只能手機調(diào)試，我用開發(fā)工具打印出來的formId: "the formId is a mock one"并不是數(shù)字串。
2.每個formid只能給當前用戶推送的時候用 不能給其他人用。

除官方api外的參考文章：
微信小程序?qū)嵗簞?chuàng)建下發(fā)模板消息實例
手把手教你開發(fā)微信小程序之模版消息
開發(fā) | 教你突破小程序模板消息的推送限制

wx.getUserInfo接口是獲取用戶信息（昵稱，頭像等）的接口，在官方文檔上寫是即將廢棄。現(xiàn)在開發(fā)版和體驗版已經(jīng)廢棄（調(diào)用接口默認直接fail），但是現(xiàn)網(wǎng)版本還是可以使用（會出現(xiàn)系統(tǒng)彈彈窗），官網(wǎng)更新說于2018/10/10廢棄。
目前，有兩種兼容方式:
1.如果只是單純展示用戶頭像或昵稱，可以使用 組件。但是這個有局限性，只能顯示，卻獲取不到信息，比如：后臺接口需要前端傳遞用戶昵稱或頭像信息時。

2.使用，引導(dǎo)用戶主動進行授權(quán)操作（適配v1.3.0以上版本）

onGotUserInfo(e){ const { errMsg, userInfo } = e.detail; if(errMsg.indexOf("ok") != -1) { //同意授權(quán) info = e.detail.userInfo; } const { avatarUrl, nickName } = info; // 獲取到了頭像，昵稱等 ... },

官方api說明廢棄問題：
https://developers.weixin.qq....

9.生成二維碼

參考以下api的三種api可以獲取二維碼，但是有局限性。比如說：可接受path參數(shù)較長，生成個數(shù)受限；有的可接受頁面參數(shù)較短，生成個數(shù)不受限；
https://developers.weixin.qq....

1）獲取access_token的接口 GET
https://api.weixin.qq.com/cgi...

2）獲取二維碼圖片的文件流接口 POST
https://api.weixin.qq.com/wxa...
{ "path": "pages/list" }

10.組件

因為說明彈窗的文字是運營在工具上配置的一些字段，然后現(xiàn)在有一些關(guān)鍵字高亮的功能，那樣運營可能要配置html字符串片段或者其他字符串片段，但小程序不可以像H5直接插入html片段，高亮實現(xiàn)起來比較麻煩。
網(wǎng)上解決方法：有的使用wxParse工具庫，有的是自己寫正則然后去自己拼湊標簽。
目前解決方法：使用小程序的組件，把內(nèi)容字段定義成json形式（而不是html格式，免去了手動正則匹配html標簽的步驟），然后來動態(tài)生成相應(yīng)標簽并動態(tài)添加高亮class，但有個不足的地方就是每個text片段如果高亮class是hightlight，而不符合的會有一個空的class。

ps.不采用wxParse的原因：
需要引入7個文件然后總大小134KB，感覺比較占體積。

11.拒絕地理位置授權(quán)后重新拉起授權(quán)窗口

當用戶選擇一些個性化偏好設(shè)置之后，系統(tǒng)會把選擇保存在授權(quán)緩存里，后續(xù)碰到相同授權(quán)不會再系統(tǒng)彈窗詢問，而是默認以第一次用戶的選擇為準（獲取地理位置也屬于這種情況）。現(xiàn)在需求是希望能點擊“獲取當前地址”之后再次彈窗詢問用戶授權(quán)。

api bug：
如果用戶拒絕第一次系統(tǒng)授權(quán)彈窗，后面wx.authorize()拉取授權(quán)窗口的接口將無效。（在wx.authorize的success回調(diào)里調(diào)用后臺獲取地址接口會直接fail， 報{errMsg: "getLocation:fail auth deny"}的錯）

解決方案：
通過一個點擊操作來調(diào)起openSetting。先去查用戶是否授權(quán)地理位置（wx.getSetting + authSetting["scope.userLocation"]）, 如果未授權(quán)則打開一個自定義的彈窗詢問用戶是否去“設(shè)置”中打開權(quán)限(wx.showModal + wx.openSetting)，然后跳轉(zhuǎn)去到“設(shè)置”。如果“設(shè)置”中用戶打開地理權(quán)限按鈕，就在成功的callback里去調(diào)獲取地址的API，后續(xù)操作就和第一次進入頁面一致了。（這里的“設(shè)置”是指小程序的授權(quán)設(shè)置頁，非手機設(shè)置或者自定義的設(shè)置頁）

版本兼容：
**2.3.0版本開始，用戶只有發(fā)生點擊行為后，才可以跳轉(zhuǎn)打開設(shè)置頁，所以不能直接調(diào)用，如onLoad里就調(diào)用。(2018/10/10生效)
1）

按鈕兼容 (v2.0.7以上生效)
2）自動獲取地址綁定的點擊事件openSettingFn還是可以調(diào)用api**

// 寫法1
自動獲取地址
openSetting(e) {
  //判斷是否獲得了用戶地理位置授權(quán)（v2.0.7以上版本）
  const that = this;
  if(e.detail.authSetting["scope.userLocation"]) { 
    //同意用戶的地理位置授權(quán) 立刻打開“設(shè)置”
    const getUserLocationWrapper = function(){
      API.getUserLocation().then((location)=>{
        ...
      }).catch((error) => {
        console.log("發(fā)起api 失敗",error)
      });
    }
    // 設(shè)置一個延時 因為用戶打開授權(quán)按鈕不能立即生效 所以會出現(xiàn)請求接口auth deny的問題
    setTimeout(getUserLocationWrapper, 500);
  }
}

// 寫法2

  自動獲取地址


dealLocationAuthorize() {
  //判斷是否獲得了用戶地理位置授權(quán)（v2.0.7以下版本）
  wx.getSetting({
    success: (res) => {
      if (!res.authSetting["scope.userLocation"]){
        this.openConfirm()
      }
    }
  })
}

// 未授權(quán)地址時，需要打開自定義的彈窗，詢問用戶是否去設(shè)置中打開權(quán)限
openConfirm () {
  const that = this;
  //此處可以打開一個modal詢問，然后在success的回調(diào)里調(diào)用openSetting都行的
  //wx.showModal({
    //content: "XXXX要獲取您的地理位置，是否允許？",
    //confirmText: "允許",
    //cancelText: "不允許",
    //success: function (res) {
      //if (res.confirm) { //點擊“確認”時打開設(shè)置頁面
      
        wx.openSetting({ // openSetting打開“設(shè)置”（v2.0.7以下版本）
          success: (res) => {
            const getUserLocationWrapper = function(){
              API.getUserLocation().then((location)=>{
                ...
                console.log("調(diào)用后臺接口拿到位置信息", location)
              }).catch((error) => {
                console.log("發(fā)起調(diào)用后臺接口失敗",error)
              });
            }
            // 設(shè)置一個延時 因為用戶打開授權(quán)按鈕不能立即生效 所以會出現(xiàn)請求接口auth deny的問題
            setTimeout(getUserLocationWrapper, 500);
          }
        })
        
      //} else {
       // console.log("用戶點擊取消")
      //}
      //that.$apply();
    //}
  //});
}

解決過程：后來發(fā)現(xiàn)是請求方式的問題，dev環(huán)境都是http請求，idc則需要https的請求，所以之前只有開了調(diào)試模式才能拿到數(shù)據(jù)。然后，還發(fā)現(xiàn)因為調(diào)試者工具上開發(fā)時默認勾選“不校驗合法域名、https證書...”的選項所以開發(fā)時未報錯，如果取消勾選則會報http那個域名不在白名單內(nèi)報錯（我們小程序白名單用的是https的url）。

還發(fā)現(xiàn)了一些奇怪的現(xiàn)象：
像小程序開發(fā)板/體驗版開了調(diào)試模式，再去打開線上小程序，本沒有調(diào)試工具的線上小程序也有了調(diào)試工具。以及這三個版本小程序的緩存感覺有一定聯(lián)系，可能共用。具體待實驗后跟進。