国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

記錄微信小程序的坑

EastWoodYang / 598人閱讀

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

----------------更新-------------- 2018年10月10日官網3個接口廢棄的通知：

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

2、getUserInfo接口
用戶需要點擊組件后，才可以觸發登錄授權彈窗、授權自己的昵稱頭像等數據。請參考調整指引

3、openSetting接口
用戶需要點擊行為后，才可以跳轉打開設置頁，管理授權信息。請參考調整指引

1.不同版本號是否可以使用某方法/屬性

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

/**
 * 比較兩個版本號的大小，用于兼容小程序不同版本的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) { ... }
2.小程序間的跳轉

小程序跳轉只能實現 同一公眾號下關聯 的小程序跳轉
一個公眾號可關聯10個同主體的小程序，3個不同主體的小程序。
一個小程序可關聯3個公眾號。
（p.s. 所以想跳轉像蘇寧小程序，只能把我們小程序關聯到他們小程序的公眾號下）

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


跳轉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成功")
            }
        })
    }
}

調試注意：
開發者工具上不會顯示跳轉，但我們可以從回調函數里log打印信息，只有真機調試才可以跳轉。

3.小程序所屬的公眾號入口及其推送文章等入口進入小程序的url配置

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

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

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

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

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

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

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

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

5.canvas畫圖

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

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

6.分享轉發功能

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

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

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

// 關鍵代碼：


    



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

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

除官方api外的參考文章：
微信小程序實例：創建下發模板消息實例
手把手教你開發微信小程序之模版消息
開發 | 教你突破小程序模板消息的推送限制

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

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

2.使用綁定的點擊事件openSettingFn還是可以調用api**

// 寫法1

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

// 寫法2

  自動獲取地址


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

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97868.html

相關文章

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

    摘要：為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習一微信小程序的特點張小龍張小龍全面闡述小程序，推薦通讀此文小程序是一種不需要下載安裝即可使用的應用，它出現了觸手可及的夢想，用戶掃一掃或者搜一下即 為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習； 一：微信小程序的特點 張小龍：張小龍全面闡述小程...

    whataa 評論0 收藏0

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

    摘要：為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習一微信小程序的特點張小龍張小龍全面闡述小程序，推薦通讀此文小程序是一種不需要下載安裝即可使用的應用，它出現了觸手可及的夢想，用戶掃一掃或者搜一下即 為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習； 一：微信小程序的特點 張小龍：張小龍全面闡述小程...

    mdluo 評論0 收藏0

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

    摘要：為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習一微信小程序的特點張小龍張小龍全面闡述小程序，推薦通讀此文小程序是一種不需要下載安裝即可使用的應用，它出現了觸手可及的夢想，用戶掃一掃或者搜一下即 為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習； 一：微信小程序的特點 張小龍：張小龍全面闡述小程...

    LdhAndroid 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<