一、web-view是什么?
简单来说 就是小程序嵌套H5页面
web-view 官网地址
二、如何使用web-view
1.在小程序创建一个页面,专门用来显示H5
不需要在这个页面做修饰,H5页面会自动铺满
bindmessage属性用来绑定从H5传值过的函数;
注意:传给H5的数据只能拼接在url后面
代码如下(示例):
<web-view src="H5页面地址?token=XXXX" bindmessage="handlePostMessage" ></web-view>
接收 h5 页面传递过来的参数
onLoad: function (options) {},
handlePostMessage: function (e) {
console.log(e.detail.data)
let resObj = e.detail.data[e.detail.data.length - 1];
//多次传递会是数组的形式,传递一次会push进数组,所以我们需要拿到最新的数据,也就是数组的最后一个子集
console.log(resObj.message)
},
2.H5页面
(1)引入JSSDK
代码如下(示例):文章来源:https://www.toymoban.com/news/detail-506547.html
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
(2)判断是否在小程序环境内
wx.miniProgram.getEnv(function (res) {
if (res.miniprogram) {
//小程序环境 ,在此进行相关逻辑处理
} else {
//非小程序环境下逻辑
console.log('不在小程序中')
}
})
(3)获取页面路径参数
function getQueryString(e) {
var t = new RegExp("(^|&)" + e + "=([^&]*)(&|$)", "i"),
i = window.location.search.substr(1).match(t);
return null != i ? decodeURIComponent(i[2]) : null
}
//调用函数
let token = getQueryString("token");
(4)向小程序传值
向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的 message 事件;
文章来源地址https://www.toymoban.com/news/detail-506547.html
wx.miniProgram.postMessage({
//这里一定要将数据放在dada中
data: {
message: uploadinput.files[0]
}
});
//跳转到小程序页面,触发向小程序发送消息
wx.miniProgram.redirectTo({
url: '/pages/studentWork/scoreInfo/scoreInfo'
})
到了这里,关于微信小程序-web-View使用以及跟小程序的通信传值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!