UNI-APP_中微信小程序、App、h5相互跳转

1.跳转小程序

1.1小程序跳转小程序

小程序可跳转任意正常小程序(uni.navigateToMiniProgram(OBJECT) | uni-app官网)，使用uni.navigateToMiniProgram

具体代码：

// #ifdef MP-ALIPAY || MP-WEIXIN
uni.navigateToMiniProgram({
    appId: appId,
    path: 页面路径,
    envVersion: 'release',// 开发版、体验版、正式版
    success(res) { }
  });
// #endif

1.2 App跳转小程序

App跳转小程序需要使用plus的launchMiniProgramapi,HTML5+ API launchMiniProgram 文档

具体代码：

// #ifdef APP-PLUS
plus.share.getServices(
(data) => {
  let sweixin = null;
  data.forEach(item=>{
    if(item.id==="weixin"){
      sweixin = item
    }
  })
  if (sweixin) {
    // 跳转到微信小程序
    sweixin.launchMiniProgram({
      id: "", //微信小程序原生id
      path: `/pages/mall/index`,
      // 可取值：0-正式版； 1-测试版； 2-体验版。默认值为0。
      type: 0, // 微信小程序版本类型，
    });
  } else {
    uni.showToast({
      title: "请安装微信",
      icon: "none",
    });
  }
},
(err) => {
  console.log("跳转失败");
}
);
// #endif
 
data值为：
[
    {
        "id": "sinaweibo",
        "description": "新浪微博",
        "authenticated": false,
        "accessToken": "",
        "nativeClient": false
    },
    {
        "id": "qq",
        "description": "QQ",
        "authenticated": false,
        "accessToken": "",
        "nativeClient": true
    },
    {
        "id": "weixin",
        "description": "微信",
        "authenticated": true,
        "accessToken": "",
        "nativeClient": true
    }
]

1.3 h5跳转小程序

h5(普通h5或者微信网页h5)跳转小程序，可以使用URL Scheme,即通过weixin://dl/business/?xxx方式，拉起本地微信后进行跳转。
获取 URL Scheme | 微信开放文档

具体代码：

// #ifdef WEB
window.location.href= "weixin://dl/business/?t=HZ2gBmGKRzp"
//"weixin://dl/business/?appid=wx7fdf86d7c67b2184&path=pages/mall/index" 
// #endif

2. 小程序与h5相互跳转

2.1 小程序跳转h5

小程序跳转h5通过微信的web-view，跳转前需要后台配置业务域名。

<web-view
    :src="url"
    @message="bindmessage"
    @load="bindload"
></web-view>

2.2 h5跳转小程序

2.2.1 非小程序内嵌h5跳转小程序

使用开放标签的情况‌：当需要在微信公众号中跳转到微信小程序时，可以使用开放标签。使用开放标签必须要进行授权,服务号需绑定JS接口安全域名下的网页。

具体参考进行鉴权：

概述 | 微信开放文档

1.设置JS接口安全域名

2. 引入js文件

<script src='https://res2.wx.qq.com/open/js/jweixin-1.6.0.js'></script>

3. 通过config接口注入权限验证配置

    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: '', // 必填，公众号的唯一标识
      timestamp: , // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '',// 必填，签名
      jsApiList: [], // 必填，需要使用的JS接口列表
      openTagList: ['wx-open-launch-weapp','wx-open-subscribe'] //可选，需要使用的开放标签列表，例如['wx-open-launch-app']
    });

4. 通过ready接口处理成功验证 5. 通过error接口处理失败验证

具体使用： 目录 | 微信开放文档

开放标签使用条件：

具体代码：

<wx-open-launch-weapp
  id="launch-btn"
  appid="wx12345678"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

2.2.2 小程序内嵌h5跳转小程序

使用wx.miniProgram.navigateTo的情况‌：当H5页面位于微信小程序的webview内部时，应使用wx.miniProgram.navigateTo进行页面跳转。

web-view | 微信开放文档

具体代码：

wx.miniProgram.navigateTo({url})

3. 小程序、公众号相互跳转

3.1 小程序跳转公众号

小程序跳转公众号，可使用官方的official-account组件。参考official-account 组件文档

前提条件：
目前不支持小程序跳转公众号。
在小程序中配置关注公众号组件后可以在小程序内跳转关注公众号，但是必须是同主体才能实现。

1. 需要公众号后台关联小程序
   

2. 小程序中需添加引导
   

3. 添加组件：

<!-- #ifdef MP-WEIXIN -->
<official-account></official-account>
<!-- #endif -->

本地调试:
需要设置特定的进入场景：

3.2 公众号跳转小程序

公众号跳转小程序，可以在菜单、图文、或者消息模板等方式进行配置。

4.总结：

1. 小程序之间跳转：使用 uni.navigateToMiniProgram 方法，可以在小程序间跳转。参数包含目标小程序的 appId 和页面路径等。
2. App 跳转到小程序：在 App 中可以通过 plus.share.getServices 获取分享服务，然后使用 launchMiniProgram 方法跳转到微信小程序。
3. H5 跳转小程序：H5 页面通过 URL Scheme (weixin://dl/business/?xxx) 的形式调起本地微信，并跳转到指定小程序。
4. 小程序跳转 H5：通过小程序内的 web-view 组件，能够嵌入和跳转到 H5 页面。
5. H5 页面跳转小程序：可以通过微信开放标签（如 wx-open-launch-weapp）或 wx.miniProgram.navigateTo 来实现 H5 页面跳转到小程序。
6. 小程序与公众号跳转：
   小程序跳转到公众号：通过 official-account 组件，前提是公众号已关联小程序。
   公众号跳转到小程序：可以进行菜单和模板消息配置等。

.