Webview H5 小程式 分享功能
阿新 • • 發佈:2022-03-30
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:'pages/share/share', // 分享路徑 imageUrl:_this.data.info.imgUrl //分享圖片 } return data },