版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

背景说明:

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

功能说明:

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

Image Added


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

Image Added

Image Added


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

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

准备工作

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

Image Added

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

Image Added

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

Image Added

...


编辑器相关配置:

Image Added

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



...

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

概述:

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

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

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

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

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

具体原因:

Image Added

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

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

提前条件:

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

活动页发送消息的流程:

Image Added

  • 使用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

<!-- preview.wxml -->
<view>
  <!-- 监听message事件,接收从H5作品发来的消息 -->
  <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环境跳转内部小程序

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

Image Added