首页 > 课堂 > 小程序 > 正文

微信小程序与Html交互实现方法

2020-03-21 16:16:08
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表