微信小程序與Html如何實現交互

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

微信小程序與Html交互實現方法

微信小程序訪問html頁面是通過小程序中的WebView作為網頁承載容器實現的，通過配置WebView的src屬性進行html頁面的加載；當html返回小程序需要引用小程序類庫，調用指定接口進行跳轉。
目前小程序與html交互，都是通過跳轉鏈接的參數拼接進行數據的傳遞的。

小程序跳轉到html

1、小程序跳轉到html,需要配置跳轉地址到指定的域名白名單內。

2、在白名單配置的域名服務器根目錄下添加簽名文件，文件名如：mAPifgWWWz.txt ，內容如：e1756a5045b2504b499cc1cce1d2c605
3、在頁面內添加webView組件，配置地址：

index.wxml

index.js
  data: {
urlPath:'https://visualstreet.cn/website/index.html?path=web-view&mytest=showWebView'
  },

當小程序調用html時，可以在WebView的src中寫入html地址；
eg:https://res.wx.qq.com/index.html;
當小程序調用html希望是登錄狀態時，需要將登錄信息以參數形式傳遞給html；
eg:https://res.wx.qq.com/index.html?user=111&unionId=222;
html頁面window.onload將觸發進行參數的獲?。?/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 跳轉到小程序

webView內html頁面可以跳轉回指定的小程序頁面，也就是html頁面可以經過一系列操作，將結果參數返回給小程序即可；
使用html返回小程序需要在返回的html頁面引用小程序類

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

調用小程序類中的指定接口進行返回

wx.miniProgram.navigateTo( )
wx.miniProgram.navigateBack( )
wx.miniProgram.switchTab( )
wx.miniProgram.reLaunch( )
wx.miniProgram.redirectTo( )
wx.miniProgram.postMessage( )
wx.miniProgram.getEnv( )

當html 跳轉回小程序時，可以通過到小程序指定router在該頁面獲取參數信息；

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

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