如何在嵌入的小程序中分享活動(dòng)

功能介紹

  人人秀平臺(tái)發(fā)布的活動(dòng)，可以直接通過(guò)鏈接訪問(wèn)，也可以支持在小程序中訪問(wèn)?？梢酝ㄟ^(guò)嵌入的方式在自己的小程序內(nèi)訪問(wèn)、直接參與活動(dòng)，因人人秀活動(dòng)采用多平臺(tái)訪問(wèn)的技術(shù)架構(gòu)和產(chǎn)品特性，在小程序內(nèi)參與活動(dòng)，需要聯(lián)系客服開(kāi)通第三方授權(quán)接口功能，保證用戶體系打通，構(gòu)建用戶唯一性機(jī)制。

   如果小程序內(nèi)活動(dòng)有獲取分享信息需求，可根據(jù)綁定監(jiān)聽(tīng)事件【活動(dòng)分享信息推送】功能，再配合小程序分享注冊(cè)自行對(duì)接開(kāi)發(fā)，完成活動(dòng)助力分享。

流程示例 

  以拆禮盒活動(dòng)微信小程序分享活動(dòng)流程示例，在自己小程序內(nèi)打開(kāi)，使用嵌入webView訪問(wèn)活動(dòng)，用戶點(diǎn)擊分享時(shí)，主動(dòng)監(jiān)聽(tīng)接收事件【活動(dòng)分享信息推送】，傳遞分享參數(shù)、帶參分享鏈接，來(lái)實(shí)現(xiàn)分享助力功能。

開(kāi)通步驟

• 需對(duì)接小程序用戶體系則聯(lián)系客戶客服，付費(fèi)開(kāi)通第三方授權(quán)接口功能；

• 在嵌入的小程序中，人人秀活動(dòng)是通過(guò)分享提示的形式，最終實(shí)現(xiàn)分享邏輯是在小程序內(nèi)完成，用戶點(diǎn)擊分享操作時(shí)獲取主動(dòng)監(jiān)聽(tīng)并接收人人秀提供的分享參數(shù)來(lái)實(shí)現(xiàn)小程序分享注冊(cè)；

• 根據(jù)頁(yè)面綁定監(jiān)聽(tīng)事件【活動(dòng)分享信息推送】獲取活動(dòng)分享鏈接參數(shù)，自己小程序完成鏈接分享；

• 測(cè)試功能接口，調(diào)整參數(shù)驗(yàn)證活動(dòng)功能是否正常。

注意事項(xiàng)

• 該功能只是提供了小程序分享活動(dòng)的解決方案，需要開(kāi)發(fā)者對(duì)接開(kāi)發(fā)支持功能。

• 該功能與其他高級(jí)功能，比如第三方授權(quán)，第三方發(fā)獎(jiǎng)等接口復(fù)合功能組合使用時(shí)，可能在部分插件使用上存在兼容差別或不支持完整功能情況，屬于二次開(kāi)發(fā)功能，如發(fā)布活動(dòng)需提前驗(yàn)證測(cè)試。
  

對(duì)接說(shuō)明

參數(shù)示例

小程序頁(yè)面綁定邏輯示例

<web-view bindmessage="handlePostMessage"  src="{{h5Url}}"></web-view>

活動(dòng)地址來(lái)源【h5Url】：使用人人秀H5提供的活動(dòng)地址；如果是支持活動(dòng)助力分享訪問(wèn)，地址通過(guò)分享的帶參參數(shù)中獲取（即讀取分享參數(shù)地址，取不到則使用默認(rèn)地址），然后動(dòng)態(tài)綁定在顯示頁(yè)面中。這樣才能使用活動(dòng)助力功能。

ex：

onLoad: function (options) {

     let h5Url = decodeURIComponent(options.h5Url);

     this.setData({

         h5Url: h5Url

     })

}

頁(yè)面綁定監(jiān)聽(tīng) 【handlePostMessage 】事件：該事件是在用戶點(diǎn)擊小程序分享菜單時(shí)，主動(dòng)推送信息事件，通過(guò)該事件可以獲得 人人秀活動(dòng)的分享信息，分享標(biāo)題、分享描述、分享頭圖和分享鏈接地址。

代碼示例：

        handlePostMessage(ret){

              // 獲取推送的返回?cái)?shù)據(jù)

            let shareRets = ret.detail.data;

            // 獲取推送的人人秀活動(dòng)返回信息

         let shareInfo = shareRets.pop();

            let  shareTitle= shareInfo.title;   // 獲取分享標(biāo)題

    let shareDesc = shareInfo.desc;   // 獲取分享描述

            let shareImage = shareInfo.image;   // 獲取分享頭像

            let shareUrl = shareInfo.url;   // 獲取分享鏈接

    }

示例完整代碼

webview.wxml

   <web-view bindmessage="handlePostMessage"  src="{{h5Url}}"></web-view>

webview.js

  onShareAppMessage: function (res) {

      let shareH5Url=this.data.shareH5Url;

      shareH5Url=encodeURIComponent(shareH5Url);

      let pagePathUrl = '/pages/webview/webview'+`?url=${shareH5Url}`;

      return  {

            title: this.data.title,

            path: pagePathUrl,

            imageUrl:this.data.image,

            success:function(res){

                          }

               }

 },

  onLoad(options) {

       let h5Url = decodeURIComponent(options.url);

       this.setData({

                      originalUrl:h5Url

        });

  },

  handlePostMessage(data){

      let shareInfoArr = data.detail.data;

      let length = shareInfoArr.length -1;

      let shareInfo = shareInfoArr[length];

      let image = shareInfo.image;

      this.setData({

                 title:shareInfo.title,

                 image:image,

                 shareH5Url:shareInfo.url

       })

   }      

相關(guān)文檔

• 人人秀開(kāi)放平臺(tái)