概述：

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

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

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

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

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

具体原因：

更多详情请参阅微信官方文档：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

我需要准备什么？

  1. 本授权功能需接入方企业先在兔展营销云开通 “数据集成” 模块，并获得 “自建应用” 的使用权限。

  2. 自建应用内申请开通 编辑器 → 小程序环境跳转，后续联系管理员审核通过。应用配置界面如下：



    添加后，点击“编辑”进入对应设置页



  3. 配置好跳转名称、目标小程序名称、appid后点击“确认”并保存即可，appid可以从微信小程序后台获取。

  4. 编辑器制作作品时，添加带触发功能的组件（按钮、图片、形状、文字等），在设置面板触发选项卡下进行配置，具体配置如下：



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

活动页发送消息的流程：

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

消息字段格式：

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

小程序跳转演示demo：

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

<!-- preview.wxml -->
<view>
  <!-- 监听message事件，接收从H5作品发来的消息 -->
  <web-view src="{{appUrl}}" bindmessage="handleMessage"></web-view>
</view>


// 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,
    });
  },
});




  • 无标签