首先小程序想要使用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 }) } })
完成了。。
