帮助中心  /  如何在嵌入的小程序中分享活动

如何在嵌入的小程序中分享活动

功能介绍

  人人秀平台发布的活动,可以直接通过链接访问,也可以支持在小程序中访问。可以通过嵌入的方式在自己的小程序内访问、直接参与活动,因人人秀活动采用多平台访问的技术架构和产品特性,在小程序内参与活动,需要联系客服开通第三方授权接口功能,保证用户体系打通,构建用户唯一性机制。

   如果小程序内活动有获取分享信息需求,可根据绑定监听事件【活动分享信息推送】功能,再配合小程序分享注册自行对接开发,完成活动助力分享。


流程示例 

  以拆礼盒活动微信小程序分享活动流程示例,在自己小程序内打开,使用嵌入webView访问活动,用户点击分享时,主动监听接收事件【活动分享信息推送】,传递分享参数、带参分享链接,来实现分享助力功能。

image.png

  

开通步骤

  • 需对接小程序用户体系则联系客户客服,付费开通第三方授权接口功能;

  • 在嵌入的小程序中,人人秀活动是通过分享提示的形式,最终实现分享逻辑是在小程序内完成,用户点击分享操作时获取主动监听并接收人人秀提供的分享参数来实现小程序分享注册;

  • 根据页面绑定监听事件【活动分享信息推送】获取活动分享链接参数,自己小程序完成链接分享;

  • 测试功能接口,调整参数验证活动功能是否正常。


注意事项

  • 该功能只是提供了小程序分享活动的解决方案,需要开发者对接开发支持功能

  • 该功能与其他高级功能,比如第三方授权,第三方发奖等接口复合功能组合使用时,可能在部分插件使用上存在兼容差别或不支持完整功能情况,属于二次开发功能,如发布活动需提前验证测试


对接说明

参数示例

参数名称

参数类型说明

title

string活动分享标题

desc

string活动分享描述

image

string活动分享头图

url

string活动分享地址

小程序页面绑定逻辑示例

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



活动地址来源【h5Url】:使用人人秀H5提供的活动地址;如果是支持活动助力分享访问,地址通过分享的带参参数中获取(即读取分享参数地址,取不到则使用默认地址),然后动态绑定在显示页面中。这样才能使用活动助力功能。

ex:

onLoad: function (options) {

     let h5Url = decodeURIComponent(options.h5Url);

     this.setData({

         h5Url: h5Url

     })

}



页面绑定监听 【handlePostMessage 】事件:该事件是在用户点击小程序分享菜单时,主动推送信息事件,通过该事件可以获得 人人秀活动的分享信息,分享标题、分享描述、分享头图和分享链接地址。

代码示例:

        handlePostMessage(ret){

              // 获取推送的返回数据

            let shareRets = ret.detail.data;

            // 获取推送的人人秀活动返回信息

         let shareInfo = shareRets.pop();

            let  shareTitle= shareInfo.title;   // 获取分享标题

    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}`;

    // 返回一个 Promise,强行让分享配置“等一等”
return {

   promise: new Promise(resolve => {

       setTimeout(() => {

         // 100ms后,handlePostMessage里的setData肯定已经执行完了

         resolve({
           title: this.data.title || '默认分享标题',

           path: pagePathUrl,
            imageUrl: this.data.image
         });

       }, 100); // 延时 100ms 足够让 handlePostMessage 完成数据同步

    })
}

 },

  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

       })

   }      


相关文档




帮助中心