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

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

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

<template>
  <div class="index">
    <web-view :src="path" @message="message"></web-view>
  </div>
</template>

<script>
import { url } from '@/config.js' // 网站url
export default {
  name: 'index',
  data() {
    return {
      
      path: url ,
      title: '这个人很帅',
      shareData: null, // 保存分享的数据
      url,
    }
  },
  methods: {
    message (e) { // 监听message事件
      let { data } = e.mp.detail
      console.log('message', data)
      this.shareData = JSON.parse(data.pop())
    }
  },
  // 调用分享的时候出发
  onShareAppMessage(options) {
    let { path, title, shareData, imageUrl } = this
    let params = {
      title
    }
    if (shareData) {
      title = shareData.title
      path = shareData.path
      imageUrl = shareData.imageUrl
    }

    return {
      title,
      path: `pages/index/main?path=${path}`,
      imageUrl,
      success: function (res) {
          // 转发成功
        wx.showToast({
          title: "转发成功",
          icon: 'success',
          duration: 2000
        })
      },
      fail: function (res) {
          // 转发失败
      }
    }
  },
  onLoad(options) {
    // 这里主要是当用户打开界面的时候，需要解析是否跳转到指定页面
    console.log('h5 load', options, this.url)
    if (options.path) {
      this.path = `${this.url}${options.path}`
      console.log('options', options)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.index{}
</style>

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