10-26 6380人
什么是WebView
WebView是术语,是指网页视图。能加载显示网页,可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页。
可以内嵌在移动端,实现前端的混合式开发,大多数混合式开发框架都是基于WebView模式进行二次开发的。比如:APIcloud
、uni-app
等等的框架。
uni-app里的web-view
web-view是一个web浏览器组件,可以用来承担网页的容器,会自动铺满整个屏幕
各小程序平台,web-view 加载的 url 需要在后台配置域名白名单,包括内部再次 iframe 内嵌的其他 url 。
详细属性查看:uni-app里的web-view
通讯方法
引入SDK
嵌入的h5项目或者页面不是uni-app
项目搭建的话,需要在 index.html 页面或者是当前的HTML页面引入uni-app
项目的API ,这样才能使用,才能相互通讯。
我们是用的Vue-cli
脚手架搭建的项目,直接在 html 模板引入
<!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 -->
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK,必须引用。 -->
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
Tips
- 这些 JS 文件是在 web-view 加载的那个 HTML 文件中引用的,而不是 uni-app 项目中的文件。
- 如果不考虑微信小程序,则无需引入微信的 JS-SDK。
- 两个文件同时引入时,注意引入的顺序,微信的需要在前。
调用的时机
在引用依赖的文件后,需要在 HTML 中监听 UniAppJSBridgeReady
事件触发后,才能安全调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
uni.getEnv(function(res) {
console.log('当前环境:' + JSON.stringify(res));
});
});
APP端
监听 web-view
组件的 message
事件,然后在事件回调的 event.detail.data
中接收传递过来的消息。
// 引入需要嵌入的h5 链接
<template>
<view>
<web-view
@message="getMessage"
src="https://uniapp.dcloud.io/static/web-view.html"
>
</web-view>
</view>
</template>
<script>
//在methods中接收h5发送的消息
/**
* @information message中 接收到的是由h5项目通过uni.postMessage中传递出来的数据,以数组的形式接收每次的消息
*/
getMessage(event){
console.log('接收到消息',event.detail.data)
}
</script>
H5端
uni.postMessage
中的参数格式,必须是 data: {}。也就是说,传递的消息信息必须在 data 这个对象中。
<script>
// 在使用到的页面 添加如下代码
mounted () {
this.$nextTick(()=>{
document.addEventListener('UniAppJSBridgeReady', function() {
// 向 app 发送消息
uni.postMessage({
data: {
action: 'postMessage'
}
});
});
})
}
</script>
APP 向 H5 发送消息 可以动态设置URL,然后 H5 获取 query 参数
<template>
<web-view
@message="getMessage"
:src="url">
</web-view>
</template>
<script>
export default {
data () {
return {
url: 'http://192.168.0.1/test?id=1' // APP URL传递参数
}
},
created () {
// H5 获取参数
this.params = this.$route.query.id
}
}
</script>
跳转页面
在h5页面中引入web-view的方法的基础上,不但可以像上面一样进行通讯,还可以跳转页面,达到从嵌入h5跳回到本地应用的页面上的效果,跳转页面的方式与uni-app
一致,在h5页面写入方法就好。
- uni.navigateTo // 跳转到指定页面
- uni.redirectTo // 关闭当前页面跳转到指定页面
- uni.reLaunch // 关闭所有页面跳转到指定页面
- uni.switchTab // 跳转tab页面—只能跳转tab页
- uni.navigateBack // 返回页面层级
Tips
- 当web-view嵌入的h5 是
uni-app
生成的h5资源的话- 使用
uni.webView.navigateTo
//其中的webView指的是你嵌入的h5的跳转想要跳转回应用
- 使用
踩坑
uni.showToast
会清掉 loading 状态- 同理 hideLoading 也会关闭 showToast
- 解决方案:使用 H5+ 的
plus.nativeUI.toast
- 频繁使用
uni.showLoading
会闪烁,比如上传进度场景- 解决方案:使用 H5+ 的
plus.nativeUI.showWaiting
- 解决方案:使用 H5+ 的
- ing…
文章不错非常喜欢
Windows 10 x64 Google Chrome 78.0.3904.108学习了
Windows 10 x64 Google Chrome 63.0.3239.132学习了 赞一个
Windows 10 x64 Firefox 84.0博客很棒 欢迎回访我哦
Windows 7 x64 Google Chrome 87.0.4280.88学习啦!
Windows 7 x64 Google Chrome 78.0.3904.108