本文實(shí)例講述了微信小程序分享功能onShareAppMessage(options)用法。分享給大家供大家參考，具體如下：
在頁(yè)面的js文件中定義了 onShareAppMessage 函數(shù)時(shí)，頁(yè)面可以表示改頁(yè)面可以轉(zhuǎn)發(fā)。可以在函數(shù)中設(shè)置頁(yè)面轉(zhuǎn)發(fā)的信息。
1. 只有定義了該函數(shù)，小程序右上角的菜單中才會(huì)有轉(zhuǎn)發(fā)按鈕
2. 用戶點(diǎn)擊轉(zhuǎn)發(fā)按鈕的時(shí)候回調(diào)用該函數(shù)
3. 該函數(shù)內(nèi)需要 return 一個(gè) Object，Object中包含轉(zhuǎn)發(fā)的信息（可自定義轉(zhuǎn)發(fā)的內(nèi)容）
頁(yè)面中有可以觸發(fā)轉(zhuǎn)發(fā)時(shí)間的地方有兩個(gè)：
一個(gè)是右上角菜單中的轉(zhuǎn)發(fā)按鈕
另一個(gè)是頁(yè)面中具有屬性open-type且其值為share的button。（注：必須是button組件，其他組件中設(shè)置 open-type="share" 無效）
即：
<button data-name="shareBtn" open-type="share">轉(zhuǎn)發(fā)</button>
注意：實(shí)際開發(fā)中會(huì)發(fā)現(xiàn)這個(gè) button 自帶有樣式，當(dāng)背景顏色設(shè)置為白色的時(shí)候還有一個(gè)黑色的邊框，剛開始那個(gè)邊框怎么都去不掉，后來給button加了一個(gè)樣式屬性 plain="true" 以后，再在樣式文件中控制樣式 button[plain]{ border:0 } ，就可以比較隨便的自定義樣式了，比如說將分享按鈕做成一個(gè)圖標(biāo)等
觸發(fā)分享事件后調(diào)用的函數(shù)：
onShareAppMessage: function( options ){ var that = this; // 設(shè)置菜單中的轉(zhuǎn)發(fā)按鈕觸發(fā)轉(zhuǎn)發(fā)事件時(shí)的轉(zhuǎn)發(fā)內(nèi)容 var shareObj = { title: "轉(zhuǎn)發(fā)的標(biāo)題", // 默認(rèn)是小程序的名稱(可以寫slogan等) path: '/pages/share/share', // 默認(rèn)是當(dāng)前頁(yè)面，必須是以‘/'開頭的完整路徑 imageUrl: '', //自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡(luò)圖片路徑，支持PNG及JPG，不傳入 imageUrl 則使用默認(rèn)截圖。顯示圖片長(zhǎng)寬比是 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ā)成不成功都會(huì)執(zhí)行） } }; // 來自頁(yè)面內(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;}希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
