微信小程序webView嵌入H5的方法實例
前言
微信小程序提供了新的開放能力!它終于開放了在小程序中內嵌HTML頁面的功能!從微信小程序基礎庫1.6.4開始,我們就可以在小程序內放置一個<web-view>組件來鏈接我們的HTML頁面了。在這之前,我們在小程序中沒有辦法整合我們已有的HTML程序(比如HTML5文章系統(tǒng),商城系統(tǒng)等),只能使用小程序的方式重新開發(fā)一套,現(xiàn)在有了<web-view>就可以方便的集成這些網(wǎng)頁系統(tǒng),為我們減少了可觀的工作量。
tips:個人類型的小程序暫不支持web-viwe引用H5,同時需要在小程序管理后臺配置H5的域名為業(yè)務域名
方法如下
1.直接引入頁面地址;
<web-view :src="url"></web-view>
url為需要跳轉的地址,可以用encodeURIComponent對url進行編碼,小程序用decodeURIComponent解碼,url里面可以用?和&帶參,小程序可以直接在onLoad中option接收參數(shù);
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="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
才能用參數(shù)
wx.miniProgram.switchTab({ url:url}); //跳轉到小程序tabbar頁,不能傳參
wx.miniProgram.navigateTo({ url:url,query:{//填寫參數(shù)}});//跳轉到小程序非tabbar頁,可以傳參
其他的跳轉參考下圖
5.H5使用bindmessage向小程序傳參
tips:使用bindmessage時只有用戶點擊了小程序的后退、分享按鈕或者是小程序嵌入的H5頁面銷毀才能觸發(fā)參數(shù)的傳遞,否則是不會觸發(fā)。
6.H5使用其他小程序的接口,可以參考API,因為我自己沒有涉及到,所以給個鏈接給大家參考
參考鏈接:developers.weixin.qq.com/miniprogram…
總結
到此這篇關于微信小程序webView嵌入H5的文章就介紹到這了,更多相關微信小程序webView嵌入H5內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
js使用文檔就緒函數(shù)動態(tài)改變頁面內容示例【innerHTML、innerText】
這篇文章主要介紹了js使用文檔就緒函數(shù)動態(tài)改變頁面內容,結合實例形式分析了JavaScript使用innerHTML、innerText函數(shù)動態(tài)操作頁面元素相關使用技巧,需要的朋友可以參考下2019-11-11