微信小程序webView嵌入H5的方法實(shí)例
前言
微信小程序提供了新的開放能力！它終于開放了在小程序中內(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript創(chuàng)建對(duì)象方法實(shí)例小結(jié)
這篇文章主要介紹了JavaScript創(chuàng)建對(duì)象方法,結(jié)合實(shí)例形式總結(jié)了javascript創(chuàng)建對(duì)象的基本原理及使用工廠模式、構(gòu)造函數(shù)模式與原型模式創(chuàng)建對(duì)象的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-09-09
uniapp使用vue-cli新建項(xiàng)目并打包的步驟
這篇文章主要介紹了uniapp使用vue-cli新建項(xiàng)目并打包,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了VsCode插件整理（小結(jié)），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript提取 PDF 圖片,即把每一頁里的多張圖片都提取出來,不是把一整頁都轉(zhuǎn)換為一張圖片,感興趣的可以了解下2025-03-03
這篇文章主要介紹了extjs圖形繪制之餅圖實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了extjs繪制餅圖的相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
JavaScript生成二維數(shù)組的多種方法小結(jié)
我經(jīng)常在面試中問候：你能用?JavaScript?生成一個(gè)二維數(shù)組嗎？這個(gè)問題看似簡(jiǎn)單,實(shí)際上卻能揭示出面試者對(duì)?JavaScript?的熟練程度,天,就讓我們一起來探索這個(gè)問題背后的答案,揭開生成二維數(shù)組的多種秘密,需要的朋友可以參考下2024-04-04
javascript設(shè)置文本框光標(biāo)的方法實(shí)例小結(jié)
這篇文章主要介紹了javascript設(shè)置文本框光標(biāo)的方法,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)文本框光標(biāo)的位置、設(shè)置及文本操作的相關(guān)技巧,需要的朋友可以參考下2016-11-11
JS實(shí)現(xiàn)動(dòng)態(tài)添加外部js、css到head標(biāo)簽的方法
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)添加外部js、css到head標(biāo)簽的方法,涉及javascript針對(duì)頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-06-06
jQuery與JavaScript節(jié)點(diǎn)創(chuàng)建方法的對(duì)比
本文主要介紹jQuery與JavaScript節(jié)點(diǎn)的創(chuàng)建方法，以及他們的具體代碼實(shí)現(xiàn)方法，大家可以對(duì)比下他們之間的不同，希望對(duì)大家編寫代碼有所幫助2016-11-11
Bootstrap每天必學(xué)之前端開發(fā)框架，今天這篇文章就帶著大家了解認(rèn)識(shí)當(dāng)下最流行的前端開發(fā)框架Bootstrap，bootstrap深受大家喜愛的原因到底是什么呢，我們一探究竟。2015-11-11