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>
  1. 通过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']
    });
  1. 通过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 组件,前提是公众号已关联小程序。
    公众号跳转到小程序:可以进行菜单和模板消息配置等。

.

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐