溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么在微信小程序中使用onShareAppMessage(options)實現分享功能

發布時間:2021-05-26 09:59:56 來源:億速云 閱讀:170 作者:Leah 欄目:web開發

今天就跟大家聊聊有關怎么在微信小程序中使用onShareAppMessage(options)實現分享功能,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據這篇文章可以有所收獲。

在頁面的js文件中定義了 onShareAppMessage 函數時,頁面可以表示改頁面可以轉發??梢栽诤瘮抵性O置頁面轉發的信息。

1. 只有定義了該函數,小程序右上角的菜單中才會有轉發按鈕

2. 用戶點擊轉發按鈕的時候回調用該函數

3. 該函數內需要 return 一個 Object,Object中包含轉發的信息(可自定義轉發的內容)

頁面中有可以觸發轉發時間的地方有兩個:

  一個是右上角菜單中的轉發按鈕
  另一個是頁面中具有屬性open-type且其值為share的button。(注:必須是button組件,其他組件中設置 open-type="share" 無效)
  即:

<button data-name="shareBtn" open-type="share">轉發</button>

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

觸發分享事件后調用的函數:

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.name );   // shareBtn
    // 此處可以修改 shareObj 中的內容
    shareObj.path = '/pages/btnname/btnname?btn_name='+eData.name;
  }
  // 返回shareObj
  return shareObj;
}

看完上述內容,你們對怎么在微信小程序中使用onShareAppMessage(options)實現分享功能有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注億速云行業資訊頻道,感謝大家的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女