一、第一種方式：

// 開(kāi)啟小程序原生右上角分享按鈕
    uni.showShareMenu({
      // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']//開(kāi)啟轉(zhuǎn)發(fā)好友和轉(zhuǎn)發(fā)朋友圈按鈕
    });

這里有個(gè)uni官方文檔的bug，uni官方文檔并沒(méi)有說(shuō)明uni.showShareMenu有menus配置項(xiàng)，但是微信官方文檔是有的。所以加上也是會(huì)生效的。

注意：配置了此項(xiàng)，此種方式優(yōu)先級(jí)要比第二種方式要高，所以采用第二種方式就不能配置第一種方式。

下面是uni的文檔配置項(xiàng)：官方文檔

微信官方配置項(xiàng)：官方文檔

二、第二種方式（自定義轉(zhuǎn)發(fā)分享）

//html
<view class="flex align-items justify-start order-tab" v-if="hasLogin">
  <view class="every-tab flex flex-direction align-items" style="position:relative;">
      <uni-icons custom-prefix="custom-icon" type="staff-filled" size="30" color="gray"></uni-icons>
      <text class="font-12">購(gòu)買(mǎi)分享</text>
    <button id="shareBtn" open-type="share">購(gòu)買(mǎi)分享(opicty透明)</button>
  </view>
 </view>

//scss
#shareBtn {
  position: absolute;
  z-index: 2;
  opacity: 0;
  width: 100%;
  height: 100%;
}

//js
 //分享到朋友圈
  onShareTimeline(res) {
    return {
      title: '妙智康商城小程序',
      // path: '/pages/home/index',不支持自定義頁(yè)面路徑
      // query:id=1,//自定義頁(yè)面路徑中攜帶的參數(shù)，如 path?a=1&b=2 的 “?” 后面部分
      // imageUrl: '/static/imgs/mylogo.png',
    }
  },
  // 自定義此頁(yè)面的轉(zhuǎn)發(fā)給好友(已經(jīng)有全局的分享方法，此處會(huì)覆蓋全局)
  onShareAppMessage(res) {
    return {
      title: '妙智康商城小程序',
      path: `/pages/home/index?id=${this.userInfo.userId}`,
      // imageUrl: '/static/imgs/mylogo.png'
    }
  },

需注意：onShareTimeline、onShareAppMessage事件是和onload、data、computed同級(jí)書(shū)寫(xiě)！

第二種方式，采用了button的open-type="share"，然后隱藏這個(gè)button。scss代碼主要是哪個(gè)opcity。不自定義轉(zhuǎn)發(fā)圖片的情況下，默認(rèn)會(huì)取當(dāng)前頁(yè)面，從頂部開(kāi)始，高度為 80% 屏幕寬度的圖像作為轉(zhuǎn)發(fā)圖片。

onShareAppMessage：不設(shè)置path默認(rèn)是打開(kāi)的點(diǎn)擊分享時(shí)的頁(yè)面，不設(shè)置title，默認(rèn)是小程序名字

onShareTimeline：不設(shè)置path默認(rèn)是打開(kāi)的點(diǎn)擊分享時(shí)的頁(yè)面，不設(shè)置title，默認(rèn)是當(dāng)前頁(yè)面的標(biāo)題

注意事項(xiàng)

• 不自定義轉(zhuǎn)發(fā)圖片的情況下，默認(rèn)會(huì)取當(dāng)前頁(yè)面，從頂部開(kāi)始，高度為 80% 屏幕寬度的圖像作為轉(zhuǎn)發(fā)圖片。

• 轉(zhuǎn)發(fā)的調(diào)試支持請(qǐng)查看 普通轉(zhuǎn)發(fā)的調(diào)試支持 和 [帶 shareTicket 的轉(zhuǎn)發(fā)](../../devtools/different.md#帶 -shareticket- 的轉(zhuǎn)發(fā))

• 轉(zhuǎn)發(fā)非私密消息時(shí)，只有轉(zhuǎn)發(fā)到群聊中打開(kāi)才可以獲取到 shareTicket 返回值，單聊沒(méi)有 shareTicket。轉(zhuǎn)發(fā)私密消息時(shí)，群聊和單聊都可獲取到 shareTicket。私密消息詳見(jiàn) 私密消息使用指南

• shareTicket 僅在當(dāng)前小程序生命周期內(nèi)有效

• 由于策略變動(dòng)，小程序群相關(guān)能力進(jìn)行調(diào)整，開(kāi)發(fā)者可先使用 wx.getShareInfo 接口中的群 ID 進(jìn)行功能開(kāi)發(fā)。

• 微信7.0.12開(kāi)始，支持群主轉(zhuǎn)發(fā)小程序時(shí)同時(shí)把消息設(shè)為該群的群待辦消息，群待辦消息會(huì)以氣泡形式出現(xiàn)在聊天窗口底部。默認(rèn)每次轉(zhuǎn)發(fā)一個(gè)群待辦消息，都會(huì)生成一個(gè)待辦消息氣泡。通過(guò) wx.updateShareMenu 接口修改toDoActivityId屬性可以把多個(gè)待辦消息聚合為同一個(gè)，即轉(zhuǎn)發(fā)相同toDoActivityId的群待辦消息，只會(huì)出現(xiàn)一個(gè)待辦消息氣泡。toDoActivityId需要在轉(zhuǎn)發(fā)前通過(guò) updatableMessage.createActivityId 接口創(chuàng)建。

還需要注意的是網(wǎng)上搜了很多資料都給onShareTimeline()配置了path這個(gè)選項(xiàng)。經(jīng)踩坑，官方文檔并沒(méi)有這個(gè)配置項(xiàng)。如下圖：官方文檔鏈接

第二種方式的onShareAppMessage事件是可以自定義path路徑，配置好后通過(guò)以下方式去獲取

獲取有兩種方式（在path對(duì)應(yīng)的頁(yè)面去獲?。?/p>

1.

onLoad: function (options) {
    console.log(options);//打印和option就可以看到path后面?zhèn)鬟f的參數(shù)
  }

2.

 onShow: async function () {
     let allPages = getCurrentPages(); //獲取當(dāng)前頁(yè)面棧的實(shí)例(onshow的option是undefined)
    let page = allPages[allPages.length - 1]
    let option = page.options
    console.log("option", option);
 
}

三、統(tǒng)一配置分享功能

//utils
export default {
    // 發(fā)送給朋友
    onShareAppMessage(res) {
         return {
          title: this.$shareTitle,
          path: '/pages/login/login'
        }
    },
    //分享到朋友圈
    onShareTimeline(res) {
         return {
          title: this.$shareTitle,
          path: '/pages/login/login'
        }
    }
}

//main.js
import commonShare from '@/utils/commonShare.js'
Vue.prototype.$shareTitle = '分享標(biāo)題'
Vue.mixin(commonShare)

在任意頁(yè)面可以自定義更改標(biāo)題

onLoad() {
    this.$shareTitle = '登錄頁(yè)面分享'
},

特別的是：全局設(shè)置好分享配置后，如果想某個(gè)頁(yè)面?zhèn)€性化定制，同樣可以設(shè)置onShareAppMessage、onShareTimeline，頁(yè)面級(jí)別的這倆事件是優(yōu)先級(jí)高于全局的

四、小程序分享票據(jù)

小程序分享票據(jù)shareTickets

通常開(kāi)發(fā)者希望轉(zhuǎn)發(fā)出去的小程序被二次打開(kāi)的時(shí)候能夠獲取到一些信息，例如群的標(biāo)識(shí)。在小程序中調(diào)用wx.showShareMenu并且設(shè)置 withShareTicket為true，當(dāng)用戶(hù)將小程序轉(zhuǎn)發(fā)到微信群之后，此轉(zhuǎn)發(fā)卡片在群聊中被其他用戶(hù)打開(kāi)時(shí)，可以在A(yíng)pp.onLaunch 或App.onShow獲取到一個(gè)shareTicket。通過(guò)調(diào)用wx.getShareInfo(shareTicket) 接口可以獲取到轉(zhuǎn)發(fā)信息。

分享前調(diào)用wx.showShareMenu方法，否則不會(huì)帶有分享票據(jù)

分享票據(jù)可以分為私密消息和動(dòng)態(tài)消息

應(yīng)用場(chǎng)景，這里鏈接一下知乎的一篇文章

總結(jié)

到此這篇關(guān)于unapp微信小程序轉(zhuǎn)發(fā)分享及攜帶參數(shù)的2種方式的文章就介紹到這了,更多相關(guān)unapp小程序轉(zhuǎn)發(fā)分享攜帶參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論