源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 微信小程序H5页面分享自定义标题和分享数据实操方法 [打印本页]
作者: 洪七公    时间: 2023-3-21 13:13
标题: 微信小程序H5页面分享自定义标题和分享数据实操方法


第一步：H5里引入微信开发JSSDK
  1. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
复制代码

第二步：H5里判断是否小程序环境并PostMessage给小程序
  1. var ua = window.navigator.userAgent.toLowerCase();
  2. if (ua.indexOf("miniprogram") != -1 && wx.miniProgram) {
  3.         wx.miniProgram.getEnv(function (res) {
  4.                 if (res.miniprogram) {
  5.                         // 小程序环境下逻辑
  6.                         var title = document.title;
  7.                         var desc = getDesc();
  8.                         if (!desc || desc == "") {
  9.                                 desc = "锦尚中国源码论坛是集分享、交流、学习为一体的综合论坛";
  10.                         }
  11.                         console.log("postMessage",title);
  12.                         console.log("postMessage",desc);
  13.                         wx.miniProgram.postMessage({
  14.                                 data: {
  15.                                         title: title,
  16.                                         desc: desc,
  17.                                 }
  18.                         });
  19.                 } else {
  20.  
  21.                         //非小程序环境下逻辑
  22.  
  23.                 }
  24.         })
  25. }
复制代码

其中，getDesc是获取页面<meta name="Description"的值的。可以自行编写或者直接写死。
第三步：小程序里接收并处理数据

小程序Webview页面里面接收H5页面Post过来的Message。wxml绑定相关事件：
  1.   ​<view class="pageH5" style='padding-top:-200px;'
  2.     <web-view src="{{url}}" bindmessage="h5PostMessage" binderror="onerror" bindload="bindload"></web-view>
  3.   </view>
复制代码

webview的JS里面编写h5PostMessage方法
  1. //h5向小程序发送的数据
  2. h5PostMessage: function (e) {
  3.         this.h5Data = e.detail.data;
  4.         this.setData({
  5.                 h5Data: e.detail.data,
  6.         });
  7.         if (this.data.h5Data.length > 0) {
  8.                 this.setData({
  9.                         h5Data: this.data.h5Data[this.data.h5Data.length-1],
  10.                 });
  11.         }
  12. },
复制代码

小程序的webview页面转发时设置分享标题和其他数据：
  1. onShareAppMessage(options) {
  2.         console.log("this.h5Data", this.data.h5Data);
  3.         //options.webViewUrl 可获得当前url
  4.         var shareurl = '/pages/web/web?url=' + encodeURIComponent(options.webViewUrl);
  5.         var that = this;
  6.         console.log("this.data.h5Data", this.data.h5Data.title);
  7.         var tmpstr = that.data.h5Data.title ? that.data.h5Data.title : that.data.webtitle;
  8.         console.log(tmpstr);
  9.         return {
  10.                 title: tmpstr ? tmpstr : "天下网吧分享干货给您",
  11.                 path: shareurl,
  12.                 desc: that.data.h5Data.desc?that.data.h5Data.desc:'天下网吧、网咖天下',
  13.                 success: function (res) {
  14.                         // 转发成功
  15.                         console.log(res)
  16.                         wx.showToast({
  17.                                 title: '分享成功',
  18.                                 icon: 'success',
  19.                                 duration: 2000
  20.                         })
  21.                 },
  22.                 fail: function (res) {
  23.                         // 转发失败
  24.                         wx.showToast({
  25.                                 title: '分享失败',
  26.                                 icon: 'fail',
  27.                                 duration: 2000
  28.                         })
  29.                 }
  30.         }
  31. },
复制代码




欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3