源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 3051|回复: 0

[小程序开发] 微信小程序H5页面分享自定义标题和分享数据实操方法

[复制链接]

3095

主题

3493

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
266463
发表于 2023-3-21 13:13:06 | 显示全部楼层 |阅读模式


第一步: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. },
复制代码
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-14 03:44 , Processed in 0.027659 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明