微信小程序组件 Web-view 定义:承载网页的容器
接口名 | 说明 |
---|---|
wx.miniProgram.navigateTo | 参数与小程序接口一致 |
wx.miniProgram.navigateBack | 参数与小程序接口一致 |
wx.miniProgram.switchTab | 参数与小程序接口一致 |
wx.miniProgram.reLaunch | 参数与小程序接口一致 |
wx.miniProgram.redirectTo | 参数与小程序接口一致 |
wx.miniProgram.postMessage | H5 向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的 message 事件 |
wx.miniProgram.getEnv | 获取当前环境 |
实现方式:
wx.miniProgram.navigateTo({ url: '/h5/loading-page', })
wx.miniProgram.navigateTo({ url: '/h5/loading-page?type=ccccc', })
wx.miniProgram.navigateTo({ url: '/h5/loading-page?type=aaaaaa', })
缺点:url 数据量有限,且需要打开界面
//js项目直接引入sdk;
//vue项目使用引入sdk //需要安装依赖 npm install weixin-webview-jssdk
//使用的页面引入 import wx from "weixin-webview-jssdk"; //H5页面
var vm = new Vue({
el: ".container",
data: {
input1: "333333",
},
created() {},
methods: {
//向小程序传递参数foo
send1() {
wx.miniProgram.postMessage({ data: { foo: this.input1 } });
},
},
});
// 获取应用实例
const app = getApp()
export default {
//页面的初始数据
data() {
return {
url: '',
Title:''
}
},
//生命周期函数--监听页面加载
onLoad: function (options) {
if (options.from && options.from === 'electron') {
this.url = decodeURIComponent(options?.url)
console.log('webview url', this.url)
} else {
this.url = options?.url || app.globalData.H5LinkUrl
}
},
// 用户点击右上角分享
onShareAppMessage(res) {
console.log("接收H5传入的参数this.data.Title",this.data.Title);
return {
title: this.data.Title,
path: '/pages/index/index?type=index',
imageUrl: 'https://picsum.photos/100/200'
}
},
//webview 组件的三个原生事件
bindload(){
console.log('webview load success')
}
binderror(){
console.log('webview load error')
},
methods: {
//网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data },data是多次 postMessage 的参数组成的数组
getMessage:function(res){
console.log("H5传递过来的参数",res.detail.data);
this.setData({
Title: res.detail.data[res.detail.data.length - 1].foo
})
}
}
}
优点:接入成本低 缺点:向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的 message 事件,只能这些特定时机;
无法实现,原因 wx.setStorage 与 localStorage 隔离
localStorage.setItem('h5key','value')
wx.setStorageSync('wx-key', 'value')