不同场景下的小程序跳转

1、小程序原生页面之间的互相跳转

wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack
具体跳转方式可查看官方文档--https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

2、同一小程序内嵌H5页面和小程序原生页面之间跳转

 

内嵌H5跳转小程序原生页面
  wx.miniProgram.navigateTo({
    url: '/page/index/index?id=' + id + '&name=' + name
  })

  小程序原生页面跳转内嵌H5

    跳转方式同第一种情况，先使用小程序原生页面的跳转方式跳转到webview页面，

    跳转时携带需要内嵌的H5页面地址，将其绑定在webview上即可

    例如：

    原生页面：

      wx.navigateTo({

        url: `/page/webView/webView?pageUrl=${pageUrl}`

      })

    小程序webView页面

      <view>

        <web-view :src="pageUrl" @message="message"></web-view>

      </view>

      message(e) {}//接收web-view传递的参数

 

3、小程序A跳转到小程序B

  //（1）在小程序A的原生页面跳转小程序B
  wx.navigateToMiniProgram({
    appId: appId,//appId
    path: href,//需要跳转的页面地址
    extraData: {},
    envVersion: 'trial',//环境
    success() {},
    fail(){}
  })
  //（2）在小程序A的内嵌H5页面跳转小程序B
  // 先从H5页面跳转至小程序A的原生页面之后操作方式同上
  // 跳转成功后，需手动回退，否则返回时会停留在中转页面
  wx.navigateToMiniProgram({
    appId: appId,
    path: href,
    extraData: {},
    envVersion: 'trial',
    success(res) {
      let pages = getCurrentPages().length-1;
      wx.navigateBack({
        delta:pages
      });
      // 打开成功
    },
    fail(){
      wx.navigateBack();
    }
  })

4、小程序A的分享页面（微信浏览器打开），跳转至小程序B

html部分

<div class="parentBox">
    <img :src="图片路径" />
    <wx-open-launch-weapp 
        id="launch-btn"         
        :username="原始id"          
        :path="页面具体路径"
    >
    <script type="text/wxtag-template">
        <style>
          .linkBox { 
            width: 100%;
            height: 100%;
            position:absolute;
            top:0;
            left:0;
          }
        </style>
        <div class="linkBox"></div>
        </script>
    </wx-open-launch-weapp>
  </div>

css部分

<style>
  .parentBox {
    overflow: hidden;
    position: relative;
  }
  #launch-btn {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;  
    z-index: 9;
    overflow: hidden;
  }
</style>

js部分

<script>

  created() {

    const scriptNode = document.createElement('script');

    scriptNode.type = 'text/javascript';

    scriptNode.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';

    scriptNode.onload = this.getjssdk

    document.body.appendChild(scriptNode);

  }

  getjssdk() {

    var _this = this

    let params = {

      url: window.location.href.split('#')[0]//当前地址

    }

    // 获取签名等

    axios({

      type: 'get',

      url: '后台接口地址',

      params: params

    })

    .then((data) => {

      if(data) {

        var responseData = JSON.parse(data)

        var noncestr = responseData.noncestr;

        var signature = responseData.signature;

        var timestamp = responseData.timestamp;

        var appid = responseData.appid;

        wx.config({

          debug: true,

          appId: appid,

          timestamp: timestamp,

          nonceStr: noncestr,

          signature: signature,

          jsApiList: [

            "checkJsApi",

            "showAllNonBaseMenuItem",

            "onMenuShareTimeline",

            "onMenuShareAppMessage",

            "onMenuShareQQ",

            "onMenuShareWeibo",

            "onMenuShareQZone"

          ],

          openTagList:['wx-open-launch-weapp']

        });

      }

    })

  }

</script>