1. 程式人生 > 程式設計 >小程式分享連結onShareAppMessage的具體用法

小程式分享連結onShareAppMessage的具體用法

onShareAppMessage用法:

只需要在button標籤中加入open-type="share",小程式ui就會自動識別分享連結功能

<button data-name="shareBtn" open-type="share">分享</button>

js中程式碼如下:

onShareAppMessage: function( options ){
  var that = this;
  // 設定選單中的轉發按鈕觸發轉發事件時的轉發內容
  var shareObj = {
    title: "轉發的標題",// 預設是小程式的名稱(可以寫slogan等)
    path: '/pages/share/share',// 預設是當前頁面,必須是以‘/'開頭的完整路徑
    imageUrl: '',//自定義圖片路徑,可以是本地檔案路徑、程式碼包檔案路徑或者網路圖片路徑,支援PNG及JPG,不傳入 imageUrl 則使用預設截圖。顯示圖片長寬比是 5:4
    success: function(res){
      // 轉發成功之後的回撥
      if(res.errMsg == 'shareAppMessage:ok'){
      }
    },    fail: function(){
      // 轉發失敗之後的回撥
      if(res.errMsg == 'shareAppMessage:fail cancel'){
        // 使用者取消轉發
      }else if(res.errMsg == 'shareAppMessage:fail'){
        // 轉發失敗,其中 detail message 為詳細失敗資訊
      }
    },    complete: fucntion(){
      // 轉發結束之後的回撥(轉發成不成功都會執行)
    }
  };
  // 來自頁面內的按鈕的轉發
  if( options.from == 'button' ){
    var eData = options.target.dataset;
    console.log( eData.id);   // shareBtn
    // 此處可以修改 shareObj 中的內容
    shareObj.path = '/pages/goods/goods?goodId='+eData.id;
  }
  // 返回shareObj
  return shareObj;
}

在實際應用中,會碰到這種情況:

微信小程式分享時,需要呼叫一個ajax(Promise)請求,然後return 一個物件,怎麼同步實現?

比如:微信小程式分享時會呼叫 onShareAppMessage 方法,他會return 一個物件作為分享時的引數。但是我需要在他return之前呼叫一個ajax方法getShareCode,怎麼樣同步實現?

//將字串連結轉為二維碼,如:轉換前 itemid/344*fromuser/4909*shopid/75,轉換後 KtIQE4j9OP4JNGS2dsZy
getShareCode: function () {
  var that = this;
  util.request(api.CreateShareCode,{
   sharecode: 'itemid/' + that.data.productid + '*fromuser/' + user.getBuyerUserId() + '*shopid/' + that.data.shopId
  }).then(function (res) {

   if (res.statusCode === 0) {
    that.setData({ newShareCode: res.sharedata });
   }
  });
 },//分享功能
 onShareAppMessage: function () {
  this.getShareCode();
  let that = this;
  var newShareCode = that.data.newShareCode;
  var shareBackUrl = 'pages/goods/goods?scene=' + newShareCode;
  return {
   title: that.data.goods.title,path: shareBackUrl
  }
 },

嘗試用async await 和 Promise都沒有得到想要的結果。

不能用async await原因是, 如果 onShareAppMessage 是async函式,分享時會呼叫這個方法,但是分享的事件是走的預設的分享,沒用使用我return的引數物件。Promise同理。

而且return的物件寫到請求方法裡面也會出現上面的問題:方法會被呼叫,但是分享事件沒有用return的引數。如下:

//分享功能
 onShareAppMessage: function () {
  var that = this;
  util.request(api.CreateShareCode,{
   sharecode: 'itemid/' + that.data.productid + '*fromuser/' + user.getBuyerUserId() + '*shopid/' + that.data.shopId
  }).then(function (res) {

   if (res.statusCode === 0) {
      var newShareCode = res.sharedata;
      var shareBackUrl = 'pages/goods/goods?scene=' + newShareCode;
      return {
       title: that.data.goods.title,    path: shareBackUrl
      }
   }
  });
 },

jQuery的ajax請求可以這麼設定同步請求:

$.ajaxSetup({
  async: false
});

async 方法,別人呼叫的時候,會立刻返回一個Promise,而return裡的path,則是在返回的那個getShareCode裡獲取的。微信呼叫這個方法拿的是返回值,也就是一個Promise,而Promise裡沒有他需要的那些引數,所以就是預設的分享了。
換句話說,這個Share回撥不允許有非同步操作。能改成同步就改,不能改的話,就得改程式碼邏輯了。

結果發現這個Share回撥還真不允許有非同步操作。

曲線救國的方法就多了,比如:

1、在頁面載入的時候先請求好資料,存在data裡

2、寫個阻塞的函式

3、封裝自己的分享函式onShareAppMessage實現分享引數的動態獲取

到此這篇關於小程式分享連結onShareAppMessage的具體用法的文章就介紹到這了,更多相關小程式分享連結onShareAppMessage內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!