uniapp中微信小程序、App、h5相互跳转总结

原博:https://juejin.cn/post/7415776780076040243

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跳转小程序需要使用pluslaunchMiniProgramapi,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跳转小程序,可以使用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

1.4 小程序跳转h5

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

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

1.5 h5跳转小程序

1.5.1 开放标签跳转

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

具体参考进行鉴权:

概述 | 微信开放文档

  1. 设置JS接口安全域名
  2. 2. 引入js文件
  3.     <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 :username="userName" :path="path">
  <script type="text/wxtag-template">
    <img src="https://xcx.ihotel.cn/distribution/images/goMiniWx.gif" alt="" style="width: 114px;height: 114px;margin: 0 auto;margin-top: 100px;display: block;">
    <p style="margin-top: 20px;font-size: 16px; color: #888;">请点击此处跳转小程序后,再分享哦~</p>      
  </script>
</wx-open-launch-weapp>

1.5.2 wx.miniProgram跳转

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

web-view | 微信开放文档

具体代码:

wx.miniProgram.navigateTo({url})

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

2.1 小程序跳转公众号

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

前提条件: 

  1. 需要公众号后台关联小程序
  2. 小程序中需添加引导
  3. 添加组件:
  1. <!-- #ifdef MP-WEIXIN -->
    <official-account></official-account>
    <!-- #endif -->
    

    本地调试:

    需要设置特定的进入场景:

2.2 公众号跳转小程序

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

总结

最后总结一下:

  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 组件,前提是公众号已关联小程序。
    • 公众号跳转到小程序:可以进行菜单和模板消息配置等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值