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
  },