H5 与 webview 交互
# H5 与 webview 交互
web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高).
# 基本使用
<template>
<web-view src="https://www.baidu.com"></web-view>
</template>
web-view 组件详细使用,可以参考官方 web-view (opens new window). 在 uniapp 中 web-view 可设置属性并没详细罗列,需要参考 html5plus (opens new window)。
下面通过一个实际案例来了解它们的使用。
# 实际案例
在开发 51趣味营销 活动的时候,活动页是通过单独 h5 开发的。开发的 h5 页面需要嵌入到 app 、微信、公众号 中进行营销。
既然需要嵌入到 app 中,那么就需要使用到 web-view 组件。
先来说下 h5 中包含那些需要与 app 交互的内容,微信朋友分享、微信朋友圈分享、一键获取干货(打开小程序)。
知道内容之后,可以开始探索一下如何完成接入、微信分享、唤醒小程序。
# 3.1 利用 webview 加载 h5
<template>
<view class="container">
<web-view @message="message" :src="src"></web-view>
</view>
</template>
<script>
let wv;
export default {
data() {
return {
src: ''
}
},
onLoad(options){
this.src = options.src;
// #ifdef APP-PLUS
// 此对象相当于 html5plus 里的 plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.
const currentWebview = this.$scope.$getAppWebview() $getAppWebview()
setTimeout(function() {
wv = currentWebview.children()[0]
wv.setStyle({
scalable: false
})
}, 200); //如果是页面初始化调用时,需要延时一下
// #endif
}
}
</script>
这样基本上,就