微信小程序中(zhōng)的分享事件 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

微信小程序中(zhōng)的分享事件

發表時間:2021-3-31

發布人:葵宇科技

浏覽次數:37

小程序的分享 onShareAppMessage(options)

在頁面的js文(wén)件中(zhōng)定義了 onShareAppMessage 函數時,頁面可(kě)以表示改頁面可(kě)以轉發。可(kě)以在函數中(zhōng)設置頁面轉發的信息。

  1. 隻有定義了該函數,小程序右上角的菜單中(zhōng)才會有轉發按鈕
  2. 用戶點擊轉發按鈕的時候回調用該函數
  3. 該函數内需要 return 一個(gè) Object,Object中(zhōng)包含轉發的信息(可(kě)自定義轉發的内容)

頁面中(zhōng)有可(kě)以觸發轉發時間的地方有兩個(gè):

  一個(gè)是右上角菜單中(zhōng)的轉發按鈕
  另一個(gè)是頁面中(zhōng)具有屬性open-type且其值為share的button。(注:必須是button組件,其他組件中(zhōng)設置 open-type="share" 無效)
     即:
  注意:實際開發中(zhōng)會發現這個(gè) button 自帶有樣式,當背景顔色設置為白色的時候還有一個(gè)黑色的邊框,剛開始那個(gè)邊框怎麼都去不掉,後來給button加了一個(gè)樣式屬性 plain="true" 以後,再在樣式文(wén)件中(zhōng)控制樣式 button[plain]{ border:0 } ,就可(kě)以比較随便的自定義樣式了,比如(rú)說将分享按鈕做成一個(gè)圖标等

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

onShareAppMessage: function( options ){
  var that = this;
  // 設置菜單中(zhōng)的轉發按鈕觸發轉發事件時的轉發内容
  var shareObj = {
    title: "轉發的标題", // 默認是小程序的名稱(可(kě)以寫slogan等)
    path: '/pages/share/share', // 默認是當前頁面,必須是以‘/’開頭的完整路(lù)徑
    imgUrl: '', //自定義圖片路(lù)徑,可(kě)以是本地文(wén)件路(lù)徑、代碼包文(wén)件路(lù)徑或者網絡圖片路(lù)徑,支持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'){
        // 轉發失敗,其中(zhōng) detail message 為詳細失敗信息
      }
    },
    complete: fucntion(){
      // 轉發結束之後的回調(轉發成不成功都會執行)
    }
  };
  // 來自頁面内的按鈕的轉發
  if( options.from == 'button' ){
    var eData = https://www.wxapp-union.com/options.target.dataset;
    console.log( eData.name ); // shareBtn
    // 此處可(kě)以修改 shareObj 中(zhōng)的内容
    shareObj.path = '/pages/btnname/btnname?btn_name='+eData.name;
  }
  // 返回shareObj
  return shareObj;
}

相關(guān)案例查看更多