微信小程序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. },
    

复制代码