前言

微信小程序提供了新的開放能力！它終于開放了在小程序中內(nèi)嵌HTML頁面的功能！從微信小程序基礎(chǔ)庫1.6.4開始，我們就可以在小程序內(nèi)放置一個(gè)<web-view>組件來鏈接我們的HTML頁面了。在這之前，我們?cè)谛〕绦蛑袥]有辦法整合我們已有的HTML程序（比如HTML5文章系統(tǒng)，商城系統(tǒng)等），只能使用小程序的方式重新開發(fā)一套，現(xiàn)在有了<web-view>就可以方便的集成這些網(wǎng)頁系統(tǒng)，為我們減少了可觀的工作量。

tips:個(gè)人類型的小程序暫不支持web-viwe引用H5，同時(shí)需要在小程序管理后臺(tái)配置H5的域名為業(yè)務(wù)域名

方法如下

1.直接引入頁面地址；

<web-view :src="url"></web-view>

url為需要跳轉(zhuǎn)的地址，可以用encodeURIComponent對(duì)url進(jìn)行編碼,小程序用decodeURIComponent解碼，url里面可以用?和&帶參,小程序可以直接在onLoad中option接收參數(shù);

2.小程序頂部設(shè)置透明；

web-view嵌入的H5頁面不能設(shè)置透明，只能修改頁面頂部的顏色;

• a.所有頁面設(shè)置透明（在app.json里面的window增加navigationStyle:custom ,頂部導(dǎo)航欄就會(huì)消失,只保留右上角膠囊狀的按鈕）;
• b.單獨(dú)頁面設(shè)置透明（在每個(gè)單獨(dú)的json里面增加navigationStyle:custom）；

3.小程序跳轉(zhuǎn)到H5頁面

注意：使用redirectTo跳轉(zhuǎn)到H5頁面之后，所有嵌入的H5頁面沒有返回按鈕，左側(cè)只有一個(gè)返回首頁按鈕

4.H5跳轉(zhuǎn)到小程序頁面

需要引入<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>才能用參數(shù)

wx.miniProgram.switchTab({ url:url}); //跳轉(zhuǎn)到小程序tabbar頁，不能傳參

wx.miniProgram.navigateTo({ url:url,query:{//填寫參數(shù)}});//跳轉(zhuǎn)到小程序非tabbar頁，可以傳參

其他的跳轉(zhuǎn)參考下圖

5.H5使用bindmessage向小程序傳參

tips：使用bindmessage時(shí)只有用戶點(diǎn)擊了小程序的后退、分享按鈕或者是小程序嵌入的H5頁面銷毀才能觸發(fā)參數(shù)的傳遞，否則是不會(huì)觸發(fā)。

6.H5使用其他小程序的接口，可以參考API，因?yàn)槲易约簺]有涉及到，所以給個(gè)鏈接給大家參考

參考鏈接：developers.weixin.qq.com/miniprogram…

總結(jié)

到此這篇關(guān)于微信小程序webView嵌入H5的文章就介紹到這了,更多相關(guān)微信小程序webView嵌入H5內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論