微信小程序與Html交互實現(xiàn)方法
微信小程序與Html交互實現(xiàn)方法
微信小程序訪問html頁面是通過小程序中的WebView作為網(wǎng)頁承載容器實現(xiàn)的,通過配置WebView的src屬性進行html頁面的加載;當html返回小程序需要引用小程序類庫,調(diào)用指定接口進行跳轉(zhuǎn)。
目前小程序與html交互,都是通過跳轉(zhuǎn)鏈接的參數(shù)拼接進行數(shù)據(jù)的傳遞的。
小程序跳轉(zhuǎn)到html
1、小程序跳轉(zhuǎn)到html,需要配置跳轉(zhuǎn)地址到指定的域名白名單內(nèi)。
2、在白名單配置的域名服務(wù)器根目錄下添加簽名文件,文件名如:mAPifgWWWz.txt ,內(nèi)容如:e1756a5045b2504b499cc1cce1d2c605
3、在頁面內(nèi)添加webView組件,配置地址:
index.wxml
index.js data: { urlPath:'https://visualstreet.cn/website/index.html?path=web-view&mytest=showWebView' },
當小程序調(diào)用html時,可以在WebView的src中寫入html地址;
eg:https://res.wx.qq.com/index.html;
當小程序調(diào)用html希望是登錄狀態(tài)時,需要將登錄信息以參數(shù)形式傳遞給html;
eg:https://res.wx.qq.com/index.html?user=111&unionId=222;
html頁面window.onload將觸發(fā)進行參數(shù)的獲?。?/p>
window.onload = function() { console.log(document.location); console.log(window.location); document.getElementById("txtMsg").innerText=document.location.href; document.getElementById("txtDetail").innerText=window.__wxjs_environment; }
并且可以通過
window.__wxjs_environment
得到小程序的來源
html 跳轉(zhuǎn)到小程序
webView內(nèi)html頁面可以跳轉(zhuǎn)回指定的小程序頁面,也就是html頁面可以經(jīng)過一系列操作,將結(jié)果參數(shù)返回給小程序即可;
使用html返回小程序需要在返回的html頁面引用小程序類
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
調(diào)用小程序類中的指定接口進行返回
wx.miniProgram.navigateTo( ) wx.miniProgram.navigateBack( ) wx.miniProgram.switchTab( ) wx.miniProgram.reLaunch( ) wx.miniProgram.redirectTo( ) wx.miniProgram.postMessage( ) wx.miniProgram.getEnv( )
當html 跳轉(zhuǎn)回小程序時,可以通過到小程序指定router在該頁面獲取參數(shù)信息;
eg: wx.miniProgram.navigateTo( 'login/index?htmlvalue=12dasf&htmlvalue2=231')