Webview H5 小程序 分享功能

1、Webview说明

Webview可以内嵌在移动端，实现前端的混合式开发，大多数混合式开发框架都是基于WebView模式进行二次开发的。

2、前端代码 VUE

1)、安装依赖

npm i weixin-js-sdk -s

2)、全局注入

import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx

3)、方法的调用

  methods: {
    test() {
      this.$wx.miniProgram.postMessage({
          // 传入参数
          data: { title: '测试', imgUrl:"https://www.cnblogs.com/psmart/" },
         })
       },
    }
 

3、小程序

1)、demo.wxml

//  webview通过bindmessage定义的方法接收H5传输的数据
<web-view src="{{url]}" bindmessage="message" />

2)、demo.js

 // 传入数据
  message (e) {
    let obj =  e.detail.data[e.detail.data.length - 1]
    this.setData({
      info:obj
    })
  }

3)、分享配置

  onShareAppMessage: function (options) {
    const _this = this
    const data = {
      title:_this.data.info.title, // 分享标题
      path:  path:'pages/share/share?url='+encodeURI(info.pdfUrl),, // 分享路径
      imageUrl:_this.data.info.imgUrl //分享图片
    }
    return data
  },