一、第一種方式：

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

這里有個uni官方文檔的bug，uni官方文檔并沒有說明uni.showShareMenu有menus配置項，但是微信官方文檔是有的。所以加上也是會生效的。

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

下面是uni的文檔配置項：官方文檔

微信官方配置項：官方文檔

二、第二種方式（自定義轉(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">購買分享</text>
    <button id="shareBtn" open-type="share">購買分享(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',不支持自定義頁面路徑
      // query:id=1,//自定義頁面路徑中攜帶的參數(shù)，如 path?a=1&b=2 的 “?” 后面部分
      // imageUrl: '/static/imgs/mylogo.png',
    }
  },
  // 自定義此頁面的轉(zhuǎn)發(fā)給好友(已經(jīng)有全局的分享方法，此處會覆蓋全局)
  onShareAppMessage(res) {
    return {
      title: '妙智康商城小程序',
      path: `/pages/home/index?id=${this.userInfo.userId}`,
      // imageUrl: '/static/imgs/mylogo.png'
    }
  },

需注意：onShareTimeline、onShareAppMessage事件是和onload、data、computed同級書寫！

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

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

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

注意事項

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

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

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

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

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

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

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

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

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

1.

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

2.

 onShow: async function () {
     let allPages = getCurrentPages(); //獲取當(dāng)前頁面棧的實例(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)

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

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

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

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

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

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

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

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

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

總結(jié)

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

最新評論