小程序和h5的互相跳转

作者: 面朝南的落地窗 | 来源:发表于2019-03-15 11:53 被阅读0次

小程序和H5页面互相跳转的实现
小程序之社交
H5跳小程序
小程序和h5的互相跳转
小程序和h5相互跳转遇到的坑
H5、App、外部网页、短信等场景跳转到微信小程序方案
小程序跳转h5
小程序和h5跳转
小程序和h5页面之间的互相跳转
小程序与H5如何互相跳转

小程序到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 摘抄文章作为笔记
查看更多详解