微信小程序与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将触发举行参数的获。。。。。

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