記錄微信小程序的坑

EastWoodYang 發(fā)布于2019-08-23 12:02 / 691人閱讀

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

----------------更新-------------- 2018年10月10日官網(wǎng)3個(gè)接口廢棄的通知：

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

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

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

1.不同版本號(hào)是否可以使用某方法/屬性

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

/**
 * 比較兩個(gè)版本號(hào)的大小，用于兼容小程序不同版本的api時(shí)比較版本號(hào)（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) { ... }

2.小程序間的跳轉(zhuǎn)

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

(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ā)者工具上不會(huì)顯示跳轉(zhuǎn)，但我們可以從回調(diào)函數(shù)里log打印信息，只有真機(jī)調(diào)試才可以跳轉(zhuǎn)。

3.小程序所屬的公眾號(hào)入口及其推送文章等入口進(jìn)入小程序的url配置

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

4.保存圖片功能（用途之一是分享朋友圈）

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

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

之前產(chǎn)品想要文案不寫死，三種成功頁各自有隨機(jī)的文案，這個(gè)在想怎么優(yōu)化更好。因?yàn)閷懰赖奈陌缚梢灾苯映槌鰜?。隨機(jī)文案要么就是一次性把文案抽出來但字體文件大小會(huì)增加；要么就是node寫個(gè)進(jìn)程模擬cmd去跑fontmin實(shí)時(shí)壓縮字體的命令，但這種會(huì)更慢一些，而且小程序不一定支持這種寫法。（一般的PC端網(wǎng)頁是支持的）

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

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

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

5.canvas畫圖

1.canvas的clip()裁剪方法，只對(duì)第一次裁剪的圖有效，后面裁剪都無效。
解決方案：制作一張和頭像圖片一樣大的中間有個(gè)n個(gè)圓形鏤空（中間透明）的圖片繪制在頭像上，在視覺上給頭像做出圓形的效果。
2.不能給文字設(shè)置字體，所以需求需要特殊字體時(shí)用的圖片。
3.保存canvas為圖片時(shí)，ctx.draw()需要加個(gè)定時(shí)器，晚些執(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));
// 保存圖片到相冊(cè)
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: "您已取消保存圖片到相冊(cè)！",
                        showCancel: false
                    });
                } else {
                    wx.showModal({
                        title: "提示",
                        content: "保存圖片失敗，您可以點(diǎn)擊確定設(shè)置獲取相冊(cè)權(quán)限后再嘗試保存！",
                        complete: function(res) {
                            if (res.confirm) {
                                wx.openSetting({});      // 打開小程序設(shè)置頁面，可以設(shè)置權(quán)限
                            } else {
                                wx.showModal({
                                    title: "保存圖片失敗",
                                    content: "您已取消保存圖片到相冊(cè)！",
                                    showCancel: false
                                });
                            }
                        }
                    });
                }
            }
        });
    }
}

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

6.分享轉(zhuǎn)發(fā)功能

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

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

/**
前提條件：
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)鍵代碼：

    


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

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

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

8.獲取用戶信息接口wx.getUserInfo的廢棄問題

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

2.使用綁定的點(diǎn)擊事件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è)置一個(gè)延時(shí) 因?yàn)橛脩舸蜷_授權(quán)按鈕不能立即生效 所以會(huì)出現(xiàn)請(qǐng)求接口auth deny的問題
    setTimeout(getUserLocationWrapper, 500);
  }
}

// 寫法2

  自動(dòng)獲取地址


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

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

12.有時(shí)候開發(fā)者模式自測通過，但是發(fā)的體驗(yàn)版一些數(shù)據(jù)拿不到，然后當(dāng)體驗(yàn)版開了調(diào)試模式時(shí)，又可以跑通所有邏輯。

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

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

GPU云服務(wù)器云服務(wù)器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97868.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

EastWoodYang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

RAKsmart：10月驚爆促銷活動(dòng)，爆款產(chǎn)品半價(jià)熱賣?。。?！

閱讀 3714·2021-10-09 09:58
云主機(jī)怎么建網(wǎng)站-怎么在云主機(jī)上搭建網(wǎng)站？

閱讀 1272·2021-09-22 15:20
[前端開發(fā)]--分享個(gè)人習(xí)慣的命名方式

閱讀 2556·2019-08-30 15:54
現(xiàn)代 CSS 進(jìn)化史

閱讀 3568·2019-08-30 14:08
使用resume-master快速制作簡歷

閱讀 953·2019-08-30 13:06
計(jì)算機(jī)網(wǎng)絡(luò)七層協(xié)議

閱讀 1882·2019-08-26 12:16
Rxjs 響應(yīng)式編程-第六章使用Cycle.js的響應(yīng)式Web應(yīng)用程序

閱讀 2745·2019-08-26 12:11
為什么不用setInterval

閱讀 2571·2019-08-26 10:38

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

記錄微信小程序的坑

相關(guān)文章

**從零開始：微信小程序新手入門寶典《一》**

**從零開始：微信小程序新手入門寶典《一》**

**從零開始：微信小程序新手入門寶典《一》**

發(fā)表評(píng)論

0條評(píng)論

EastWoodYang

男|高級(jí)講師

TA的文章

RAKsmart：10月驚爆促銷活動(dòng)，爆款產(chǎn)品半價(jià)熱賣?。。?！

云主機(jī)怎么建網(wǎng)站-怎么在云主機(jī)上搭建網(wǎng)站？

[前端開發(fā)]--分享個(gè)人習(xí)慣的命名方式

現(xiàn)代 CSS 進(jìn)化史

使用resume-master快速制作簡歷

計(jì)算機(jī)網(wǎng)絡(luò)七層協(xié)議

Rxjs 響應(yīng)式編程-第六章使用Cycle.js的響應(yīng)式Web應(yīng)用程序

為什么不用setInterval

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

記錄微信小程序的坑

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！