小程序內嵌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>