快捷導(dǎo)航

微信小程序分享功能onShareAppMessage(options)用法分析

更新時間：2019年04月24日 11:44:54 作者：烏匠

這篇文章主要介紹了微信小程序分享功能onShareAppMessage(options)用法,結(jié)合具體實例形式分析了微信小程序分享功能onShareAppMessage(options)具體使用技巧與相關(guān)操作注意事項,需要的朋友可以參考下

本文實例講述了微信小程序分享功能onShareAppMessage(options)用法。分享給大家供大家參考，具體如下：

在頁面的js文件中定義了 onShareAppMessage 函數(shù)時，頁面可以表示改頁面可以轉(zhuǎn)發(fā)?？梢栽诤瘮?shù)中設(shè)置頁面轉(zhuǎn)發(fā)的信息。

1. 只有定義了該函數(shù)，小程序右上角的菜單中才會有轉(zhuǎn)發(fā)按鈕

2. 用戶點擊轉(zhuǎn)發(fā)按鈕的時候回調(diào)用該函數(shù)

3. 該函數(shù)內(nèi)需要 return 一個 Object，Object中包含轉(zhuǎn)發(fā)的信息（可自定義轉(zhuǎn)發(fā)的內(nèi)容）

頁面中有可以觸發(fā)轉(zhuǎn)發(fā)時間的地方有兩個：

　　一個是右上角菜單中的轉(zhuǎn)發(fā)按鈕
　　另一個是頁面中具有屬性open-type且其值為share的button。（注：必須是button組件，其他組件中設(shè)置 open-type="share" 無效）
　　即：

<button data-name="shareBtn" open-type="share">轉(zhuǎn)發(fā)</button>

　　注意：實際開發(fā)中會發(fā)現(xiàn)這個 button 自帶有樣式，當(dāng)背景顏色設(shè)置為白色的時候還有一個黑色的邊框，剛開始那個邊框怎么都去不掉，后來給button加了一個樣式屬性 plain="true" 以后，再在樣式文件中控制樣式 button[plain]{ border:0 } ，就可以比較隨便的自定義樣式了，比如說將分享按鈕做成一個圖標(biāo)等

觸發(fā)分享事件后調(diào)用的函數(shù)：

onShareAppMessage: function( options ){
  var that = this;
  // 設(shè)置菜單中的轉(zhuǎn)發(fā)按鈕觸發(fā)轉(zhuǎn)發(fā)事件時的轉(zhuǎn)發(fā)內(nèi)容
  var shareObj = {
    title: "轉(zhuǎn)發(fā)的標(biāo)題",    // 默認(rèn)是小程序的名稱(可以寫slogan等)
    path: '/pages/share/share',    // 默認(rèn)是當(dāng)前頁面，必須是以‘/'開頭的完整路徑
    imageUrl: '',   //自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡(luò)圖片路徑，支持PNG及JPG，不傳入 imageUrl 則使用默認(rèn)截圖。顯示圖片長寬比是 5:4
    success: function(res){
      // 轉(zhuǎn)發(fā)成功之后的回調(diào)
      if(res.errMsg == 'shareAppMessage:ok'){
      }
    },
    fail: function(){
      // 轉(zhuǎn)發(fā)失敗之后的回調(diào)
      if(res.errMsg == 'shareAppMessage:fail cancel'){
        // 用戶取消轉(zhuǎn)發(fā)
      }else if(res.errMsg == 'shareAppMessage:fail'){
        // 轉(zhuǎn)發(fā)失敗，其中 detail message 為詳細(xì)失敗信息
      }
    },
    complete: fucntion(){
      // 轉(zhuǎn)發(fā)結(jié)束之后的回調(diào)（轉(zhuǎn)發(fā)成不成功都會執(zhí)行）
    }
  };
  // 來自頁面內(nèi)的按鈕的轉(zhuǎn)發(fā)
  if( options.from == 'button' ){
    var eData = options.target.dataset;
    console.log( eData.name );   // shareBtn
    // 此處可以修改 shareObj 中的內(nèi)容
    shareObj.path = '/pages/btnname/btnname?btn_name='+eData.name;
  }
  // 返回shareObj
  return shareObj;
}

希望本文所述對大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章: