小程序和h5的互相跳转
2019-03-15 本文已影响0人
面朝南的落地窗
小程序到h5
wxml
<view class="subject subject1" data-info='{{objecturl2}}' bindtap='toAdmm' ></view>
小程序.js
//跳转的h5页面链接
data:{
objecturl2: "https://....../action2/index.html"
}
//跳转到其他页面去显示h5页面
toAdmm: function (even) {
let url = even.currentTarget.dataset.info;
if (url != null && url != '' && url != undefined) {
wx.navigateTo({
url: '../banner_detail/banner_detail?banner_url=' + url //需要嵌套h5页面的路径【即 h5的页面展示在这个文件】
})
}
},
显示h5的页面容器
【emmm。。是有个容器banner_detail文件夹 专门去显示h5的内容】
banner_detail.js
data: {
banner_url: '',
},
onLoad: function (options) {
this.setData({
banner_url: options.banner_url //传递过来的h5页面的路径链接
});
},
banner_detail.wxml
<view class="container">
<web-view src="{{banner_url}}"></web-view>
</view>
h5到小程序
wx.miniProgram.navigateTo
wx.miniProgram.navigateBack
wx.miniProgram.switchTab [即将开放]
wx.miniProgram.reLaunch [即将开放]
wx.miniProgram.redirectTo [即将开放]
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
<script src="js/rem.js"></script>
</head>
<body style="max-width: 7.5rem;margin:auto">
<div class="object-box">
<div class="object">点击</div>
</div>
</body>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript">
$(".object").click(function(){
if(window.__wxjs_environment === 'miniprogram'){
wx.miniProgram.navigateTo({url: '../detail/detail?sku_id=10211'}) //跳回小程序需要显示的页面路劲
}else{
alert("请在微信浏览器里打开");
}
});
</script>
</html>
ps 摘抄文章作为笔记
查看更多详解
