小程序和web之间相互跳转并且支持传参实现笔记
首先小程序想要使用web-view就需要企业类型才可以使用。
微信官方的说明：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
首先在小程序首页的wxml中添加web-view组件，代码如下
<web-view src="https://www.test.com/miniprogram.html?id=123"></web-view>
接着在自己的网站中添加一个html页面，名字为miniprogram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="application/javascript">
$(function () {
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
var id = getQueryString("id");
console.log('id='.id);
$('#button').click(function () {
wx.miniProgram.redirectTo({
url: '/pages/back/back?id=456',
});
});
});
</script>
<body>
<input id="button" type="button" value="打开小程序">
</body>
</html>
接着写一个小程序页面接收参数
小程序wxml代码如下
<button bindtap='buttonClick'>id:{{id}}</button>
小程序js代码如下
Page({ /** * 页面的初始数据 */ data: { id:null }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(options); this.setData({ id: options.id }) } })
完成了。。
