微信小程序與Html如何實現(xiàn)交互

這篇文章主要介紹了微信小程序與Html如何實現(xiàn)交互，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

微信小程序與Html交互實現(xiàn)方法

微信小程序訪問html頁面是通過小程序中的WebView作為網(wǎng)頁承載容器實現(xiàn)的，通過配置WebView的src屬性進行html頁面的加載；當(dāng)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'
  },

當(dāng)小程序調(diào)用html時，可以在WebView的src中寫入html地址；
eg:https://res.wx.qq.com/index.html;
當(dāng)小程序調(diào)用html希望是登錄狀態(tài)時，需要將登錄信息以參數(shù)形式傳遞給html；
eg:https://res.wx.qq.com/index.html?user=111&unionId=222;
html頁面window.onload將觸發(fā)進行參數(shù)的獲取：

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( )

當(dāng)html 跳轉(zhuǎn)回小程序時，可以通過到小程序指定router在該頁面獲取參數(shù)信息；

eg: wx.miniProgram.navigateTo( 'login/index?htmlvalue=12dasf&htmlvalue2=231')

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序與Html如何實現(xiàn)交互”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!