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