微信小程序h5页面分享设置

前言(废话): 最近开发新项目，因为公司希望能在开发完h5后顺便吧微信小程序也上了，但是人力有限，只能做到h5，开发小程序压根做不到，只能投机了， 我真是个机灵鬼。。。

然后我就看API，咦，贼拉简单，一。使用web-view标签嵌入网页，后台配置合法域名，二，使用postmessage通信，然后保存地址就好了。。。代码如下：

h5也页面代码

/**
 * @desc 设置微信小程序分享
 */
let miniProgramShareInfo = (params = {}) => {
  
  if (window.__wxjs_environment === 'miniprogram') {
    let path = window.location.href
    let title = window.document.title
    let sharInfo = {
      imageUrl: '',
      title,
      path,
      ...params
    }
    console.log('sharInfo', sharInfo)
    // 判断，如果是在小程序内部就发送一个msg给界面
    wx.miniProgram.postMessage({ data: JSON.stringify(sharInfo)})
    
    // 据说能触发事件，虽然我没测试出来，先放着
    wx.miniProgram.navigateBack()

  }
}

我以为上边这么写就好了，结果发现是我太年轻，发现分享后打不开界面。。。

然后进入debugger模式。开始寻找问题。。。

第一步: h5页面打印地址，对的，参数也ok，

第二步：小程序界面解析参数，也是对的。

第三部：重新调用，结果还是失败，然后我进入了死循环，一直各种尝试，最后的最后，发现居然需要我先用一个完整的地址，然后再加上path才可以。。

总结

通过上边的调试，发现文档只有参考价值，没有权威，博客。论文都没有，我这里主要做个笔记，方便后期排查，

关于调试，使用vsconsole，然后就是当我们使用网页的时候，没法查询入口参数，这里需要在微信开发者工具右键，开发工具的左上角就会出现一个调试按钮，打开会有一个调试面板，方便看参数。分享的时候只能通过手机，这个时候就会无法查看参数，真机调试，重新进入小程序会断开链接。。。最后的最后，说一句，珍爱生命，原理微信生态圈