小程序嵌套h5页面_uni-app 中使用 web-view 微信小程序嵌套H5

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 微信小程序中嵌套 web-view呢？

第一步： uni-app项目中新建一个页面 webView

代码如下：

export default {

data() {

return {

webUrl: 'htt