uni-app 中使用 web-view 微信小程序嵌套H5
由于项目需要，我们的小程序中嵌套了web-view， 对于第一次接触uni-app，第一次用web-view的我真的是踩坑无数，屡次站在放弃的边缘，终于在今天搞定了。所以我感觉有必要更新一篇关于uni-app中嵌套web-view的文章，希望下面的文章可以帮助到正在学习的朋友吧。
1、uni-app 中为什么要嵌套 web-view ？
2、uni-app 中如何嵌套 web-view ？
3、 uni-app 中的嵌套的web-view 和h5 之间如何通信？
4、uni-app 嵌套 web-view 在微信小程序中 需要注意什么呢？
接下来我们就一起来解答上面的问题吧！
1、uni-app 中为什么要嵌套 web-view ？
什么是web-view？
web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。
为什么要使用web-view？
按照正常的流程我们修改了什么东西都需要提交新版本审核，第一，灵活性不够，第二，审核有时候就不通过很麻烦。所以如果采用web-view，这样我们在修改了什么文案或者临时的活动的时候就不需要等待审核这些事情了，操作起来非常的灵活。（个人项目重的感受）
2、uni-app 中如何嵌套 web-view ？
很多人在学习的时候都回去网上查，我呢也不例外，但是这次项目中身边写小程序的人少之又少，网上的案例也是很多不能运行起来（可能是我太笨了吧），写完整个项目后最大的感受就是： 官网就是最好的案例。
无论做什么的时候我们真的应该好好认真的去看一遍官网的文档，这样子会少踩很多坑的。
uni-app官网：https://uniapp.dcloud.io/
web-view：https://uniapp.dcloud.io/component/web-view?id=web-view
下面我们就详细的介绍一下如何在uni-app 微信小程序中嵌套 web-view呢？
第一步： uni-app项目中新建一个页面 webView
代码如下：
<template>
<view>
<web-view :src="webUrl" @message="message"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
webUrl: 'https://www.aliyue.net',
}
},
onLoad(options) {
},
methods: {
message(event){
console.log(event.detail.data)
}
}
}
</script》
效果图：
注意：
- 小程序仅支持加载网络网页，不支持本地html
- 小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。
- App 端使用
自定义组件模式时，uni.web-view.js 的最低版为 uni.webview.1.5.2.js - App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在
uni-app 项目根目录->hybrid->html文件夹下，如下为一个加载本地网页的uni-app项目文件目录示例： - nvue
web-view必须指定样式宽高 - V3 编译模式，网页向应用
postMessage为实时消息
第二步： 新建一个H5 页面 index.html 【这里给大家粘贴一个完整的代码复制粘贴即可用，这里我用的vue的】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.btn{
display: block;
margin: 10px auto;
width: 40%;
height: 45px;
line-height: 45px;
text-align: center;
border-radius: 10px;
background-color: #259F3B;
color: #FFFFFF;
border: none;
}
</style>
</head>
<body>
<div id="app">
<div>
<div>
这里是小程序来的数据：{{wxdata}}
</div>
<button class="btn" @click="postWx">向页面发送数据1</button>
<button class="btn" @click="postWx2">向页面发送数据2</button>
</div>
</div>
<!-- 微信的SDK -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
wxdata: "abc"
},
mounted() {
this.$nextTick(() => {
document.addEventListener('UniAppJSBridgeReady', function() {
uni.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
});
})
},
created() {
this.wxdata = this.getQueryString('wxdata') || 'abc'
console.log(this.wxdata)
},
methods: {
postWx() {
uni.switchTab({
url: '/pages/my/my'
});
uni.postMessage({
data: {
action2: '我是按钮2',
action1: '我是按钮1'
}
});
},
postWx2() {
uni.switchTab({
url: '/pages/my/my'
});
uni.postMessage({
data: {
action2: '我是按钮2',
action1: '我是按钮1'
}
});
},
getQueryString: function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return null;
}
}
})
</script>
</body>
</html>
下面说一下h5 页面的几个需要注意的事项
- 移动端meta标签设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- JS SDK的引入【这里是以微信小程序为案例】
<!-- 微信的SDK --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <!-- uni 的 SDK --> <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
注意⚠️： 这里的引入顺序不能变
- src 路径， 小程序必须是网络链接，不可用本地链接【其他平台请看官网吧，不在这里写了】
3、uni-app 中的嵌套的web-view 和h5 之间如何通信？
内嵌很容易，那么他们之间如何做到相互通信的呢？下面我们一起分享一下
——- uni-app 向 h5 传递参数【通过src 的 url 】
<web-view :src="webUrl" @message="message"></web-view>
这里webUrl里面添加参数 ?id=123&name=abc&age=12
data() {
return {
webUrl: 'https://www.aliyue.net?id=123&name=abc&age=12',
}
},
H5 页面如何接收这些参数呢？在methods 里面定义此方法，获取小程序里传递过来的参数
getQueryString: function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return null;
}
// 我一般是在created 里面接收传递过来的参数
let id = getQueryString('id')
let name = getQueryString('name')
let age =getQueryString('age')
这里需要注意的，如果您向要传递一个布尔值，那么接收到的其实是一个字符串，这个一定要注意。
——- h5 向 uni-app 传递参数【通过 uni.postMessage 】
postWx() {
uni.switchTab({
url: '/pages/my/my'
});
uni.postMessage({
data: {
action2: '我是按钮2',
action1: '我是按钮1'
}
});
},
我们通过 uni.postMessage 来向页面传递数据，格式必须是data：{ 这里面就是要传递的数据 }
小程序如何接收数据呢？【 @message=”message” 】
<web-view :src="webUrl" @message="message"></web-view>
这里通过@message 的方法来接收H5 所传递来的数据
methods: {
message(event){
console.log(event.detail.data)
}
}
event.detail.data 里面就是我们接收到的数据
网页向应用发送消息，在 <web-view> 的 message 事件回调 event.detail.data 中接收消息。
Tips
- 传递的消息信息，必须写在 data 对象中。
event.detail.data中的数据，以数组的形式接收每次 post 的消息。
4、uni-app 嵌套 web-view 在微信小程序中 需要注意什么呢？
下面注意点是我自己项目中遇到的
- 微信小程序中 src 必须为网络路径，如果测试也可以用编辑器直接运行到浏览器，或者本地模拟一个服务也可以
- 如果在小程序中获取不到数据那么请看一下自己的点击事件，
| @message | EventHandler | 网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。 |
H5 暂不支持（可以直接使用 |
这里在H5页面做跳转的时候我们就需要注意一下用哪个跳转的方法了。
暂时总结到这里吧，后期有变化再补充。
————– 微信小程序 实战教程————-
uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘
全部高清，无密，云盘下载
