王国平博客

在用微信小程序webview打包网站的时候遇到个问题，直接打包的网站详情页分享给朋友后，朋友打开的还是首页，而不是详情页。

今天就来分享一下H5页面通过微信小程序webview打包成小程序后，小程序页面分享出去后，别人打开仍然显示你分享时候的页面，并且显示分享页面title和简介的实现方法。

第一步：先用微信开发者工具新建一个小程序，默认会有index文件夹，打开index文件夹下的 index.wxml 文件放入下面的代码：

<web-view class='page_web' src="{{url}}" bindmessage="bindGetMsg"></web-view>

第二步：打开index文件夹下的 index.js 文件放入下面的代码：

Page({
  data: {
  url: '改成自己的网站链接如：https://www.abcxxx.com'   //h5地址
  },
  bindmessage(e) {                 //接收web-view传递的参数
  if (e.detail.data[e.detail.data - 1].title) {
  this.setData({                       //存储状态
  title: e.detail.data[0].title
  })
  }
  },
  
  //分享功能部分代码
  onLoad: function (options) {
  options.url ? this.setData({ url: decodeURIComponent(options.url) }) : this.setData({ url: options.url });
  },
  
  //获取网页标题  
  bindGetMsg: function (e) {
  this.data.shareObj = e.detail.data[e.detail.data.length - 1];
  },
  
  //分享并返回页面标题和链接  
  onShareAppMessage: function (options) {
  let shareObj = this.data.shareObj;
  if (shareObj) {
  return {
  title: shareObj.shareTitle,
  desc: shareObj.shareDesc,
  path: '/pages/index/index?url=' + encodeURIComponent(options.webViewUrl),
  }
  }
  },
})

第三步：在网站H5页面放入下面的代码：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> 
<script type="text/javascript">
var obj = {
'shareDesc': '{你的网站description调用变量}',
'shareTitle': '{你的网站Title调用变量}'
}
wx.miniProgram.postMessage({
data: obj
})
console.log(getUrlkey_(window.location.href))
</script>

OK，可以现在微信开发者工具里本地预览看下试试，没问题的话直接打包提交小程序，审核上线就可以了。