小程序内嵌h5页面跳转小程序指定页面, 需要引用 JSSDK: <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
//h5页面 aaa.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>h5页面</title> </head> <body> <div id="app"> <button class='btn' @click='handleClick'></button> </div> <script src="../js/vue.js"></script> <script src="../js/common.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> </body> </html>
//这里用的vue模板, 当然 你可以用 JQ <script> //截取小程序通过webview中 src 传给 h5页面的参数 //在common.js中, 后面会附上代码 var parame = parameter() console.log("接受参数:",parame) //parmae.type =111 var app = new Vue({ el: '#app', data: { dataList: [] }, methods: { handleClick(){ //跳转方式navigateTo 和小程序的一致, 参考官网链接: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html wx.miniProgram.navigateTo({ //h5给小程序传参 url:'/pages/bbb/bbb?id=3', success: function(){ console.log('success') }, fail: function(){ console.log('fail'); }, complete:function(){ console.log('complete'); } }); } }, mounted (){ } }) </script>
//common.js /*将url?name=value&name=value转换为{name:value,name:value}*/ function gainParameter(url) { var urlParameter = url.split("?"); urlParameter = urlParameter[1].split("&"); var arr = {}; for (var i in urlParameter) { var parameter = urlParameter[i].split("="); arr[parameter[0]] = parameter[1] } return arr } /*url参数返回封装*/ function parameter() { return gainParameter(decodeURI(window.location.href)); }
小程序页面 嵌入 h5页面: aaa.wxml 和 bbb.wxml
需要先 去微信平台 配置 业务域名 : (例子: https://www.bigbear.com) , h5页面部署到服务器: https://www.bigbear.com/static/aaa.html
// aaa.wxml <web-view src="{{urlAll}}" ></web-view> //aaa.js Page({ /** * 页面的初始数据 */ data: { urlAll: ''//webview链接 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(options) //给h5传各参数 type name ....随你写
let name = '测试' this.setData({ urlAll: 'https://bigbear.com/static/aaa.html?type=111' +'&name='+name
}) }, })
//bbb.js 小程序 bbb.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options) //接受h5 aaa页面传过来的 id
},
})
有问题和建议都可以留言哦,俺经常会看的
感谢 各位老板 小额打赏: (有问题call俺)
<div id="app" v-cloak> <button></button> </div>