⼩程序webView嵌⼊H5的⽅法实例
前⾔
⼩程序提供了新的开放能⼒！它终于开放了在⼩程序中内嵌HTML页⾯的功能！从⼩程序基础库1.6.4开始，我们就可以在⼩程序内放置⼀个<web-view>组件来链接我们的HTML页⾯了。在这之前，我们在⼩程序中没有办法整合我们已有的HTML程序（⽐如HTML5⽂章系统，商城系统等），只能使⽤⼩程序的⽅式重新开发⼀套，现在有了<web-view>就可以⽅便的集成这些⽹页系统，为我们减少了可观的⼯作量。
tips：个⼈类型的⼩程序暂不⽀持web-viwe引⽤H5，同时需要在⼩程序管理后台配置H5的域名为业务域名
⽅法如下
1.直接引⼊页⾯地址；
<web-view :src="url"></web-view>
url为需要跳转的地址，可以⽤encodeURIComponent对url进⾏编码,⼩程序⽤decodeURIComponent解码，url⾥⾯可以⽤?和&带参,⼩程序可以直接在onLoad中option接收参数;
2.⼩程序顶部设置透明；
web-view嵌⼊的H5页⾯不能设置透明，只能修改页⾯顶部的颜⾊;
a.所有页⾯设置透明（在app.json⾥⾯的window增加navigationStyle:custom ，顶部导航栏就会消失，只保留右上⾓胶囊状
的按钮）;写文章的小程序
b.单独页⾯设置透明（在每个单独的json⾥⾯增加navigationStyle:custom）；
3.⼩程序跳转到H5页⾯
注意：使⽤redirectTo跳转到H5页⾯之后，所有嵌⼊的H5页⾯没有返回按钮，左侧只有⼀个返回⾸页按钮
4.H5跳转到⼩程序页⾯
需要引⼊<script type="text/javascript" src="res.wx.qq/open/js/jweixin-1.3.2.js"></script>才能⽤参数
wx.miniProgram.switchTab({ url:url}); //跳转到⼩程序tabbar页，不能传参
wx.miniProgram.navigateTo({ url:url,query:{//填写参数}});//跳转到⼩程序⾮tabbar页，可以传参
其他的跳转参考下图
5.H5使⽤bindmessage向⼩程序传参
tips：使⽤bindmessage时只有⽤户点击了⼩程序的后退、分享按钮或者是⼩程序嵌⼊的H5页⾯销毁才能触发参数的传递，否则是不会触发。
6.H5使⽤其他⼩程序的接⼝，可以参考API，因为我⾃⼰没有涉及到，所以给个链接给⼤家参考
参考链接：…
总结
到此这篇关于⼩程序webView嵌⼊H5的⽂章就介绍到这了，更多相关⼩程序webView嵌⼊H5内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。