背景说明：

兔展的h5活动作品支持多环境跳转，本章主要介绍如何实现不同环境下的跳转；

功能说明：

1、微信h5环境跳转外部h5

2、微信h5环境跳转外部小程序

3、小程序h5环境跳转外部小程序

由于微信自身的限制，在小程序中嵌入的h5，需要通过特殊的方式才能实现小程序间的跳转

准备工作

进入工作台——申请【小程序环境跳转】的自建应用；

审核通过后，点击添加跳转方法。

输入目标小程序的相关信息，点击保存即可；

编辑器相关配置：

作品保存后，确保此作品被嵌入小程序环境下，当用户点击配置了跳转的按钮时，方可触发postMessage方法发起跳转请求。

h5嵌入的小程序需要的开发工作：

概述：

本文档服务于对接方使用自己的小程序嵌入兔展H5作品，需要跳转到外部其他小程序的业务场景。

此方案兔展H5作品仅发送跳转请求（使用微信jssdk提供的miniProgram.postMessage方法同宿主小程序通信），后续的跳转外部小程序逻辑需接入方小程序自行实现（参考示例部分的演示代码）。

另外因受制于微信小程序web-view组件的消息通信方式，本方案并不支持以下场景：

1、他人分享的活动直接进入小程序内兔展活动页面的。

2、通过某种外部方式跳转直接命中打开小程序内兔展活动页的。

具体原因：

更多详情请参阅微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

请接入方根据自身需求场景综合考虑后使用！

提前条件：

获取兔展H5作品地址（在工作台作品预览窗口取到作品访问地址），替换域名为renderer.rabbitpre.com，完整地址形如：https://renderer.rabbitpre.com/m2/xxxx。
在微信小程序后台配置业务域名，并放置校验文件（可能需要寻求兔展运维支持），添加如下业务域名：

活动页发送消息的流程：

使用miniProgram.navigateBack方法来触发宿主小程序的bindmessage（详见示例部分）事件。

消息字段格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

const message = {
  // 消息类型：跳转小程序
  type: "JUMP_MP_MESSAGE",
  // 载荷数据
  payload: {
    // 目标小程序的appid
    appId: "",
    // 目标小程序的页面路径，可以包含query参数
    path: "",
    // H5作品信息对象
    appData: {
      // 作品id
      id: "",
      // 作品标题
      title: "",
      // 作品描述
      desc: "",
      // 作品封面
      cover: "",
      // 作品地址
      url: "",
    },
    // 额外信息，启用动态参数后传递，暂未开放
    extraData: {},
  },
};

小程序跳转演示demo：

假设小程序浏览H5作品页面命名为preview。

1
2
3
4
5


<view>

<web-view src="{{appUrl}}" bindmessage="handleMessage"></web-view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// preview.js
const MESSAGE_TYPE = 'JUMP_MP_MESSAGE';

Page({
  data: {
    // 兔展H5作品地址
    appUrl: 'https://renderer.rabbitpre.com/m2/xxxx',
  },

  // message事件处理器
  handleMessage(e) {
    const messages = e.detail.data || [];
    // 从消息列表中提取出来跳转外部小程序的消息
    const jumpMpMessage = messages.find(msg => msg.type === MESSAGE_TYPE);
    if (!jumpMpMessage) return;
    const {
      payload: {
        appId, // 目标小程序的appid
        path, // 目标小程序的页面路径，可以包含query参数
        appData,  // H5作品信息对象
        extraData,  // 额外信息，启用动态参数后传递
      }
    } = jumpMpMessage;
    const mark = /\?/g.test(path) ? '&' : '?';
    // 根据业务需要，自行拼接参数
    const pathWithParams = `${path}${mark}appId=${appData.id}`;
    // 调用小程序API跳转到目标小程序去
    wx.navigateToMiniProgram({
      appId,
      path: pathWithParams,
      extraData,
    });
  },
});

4、小程序h5环境跳转内部小程序

在编辑器选择【该小程序原生页面】，填写原生小程序页面的路径。

页面树结构

H5多环境跳转