微信小程序與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')