本文介绍如何通过 WebView 在您用于观看直播的微信小程序（以下简称“小程序 A”）内接入 SaaS 观看页，并确保观众在移动端观看页点击商品卡片后，可以跳转至您用于售卖商品的微信小程序（以下简称“小程序 B”）页面。

前提条件

• 获取小程序 A 的原始 ID 以及小程序 B 的小程序 ID。
  1. 分别使用小程序 A 和小程序 B 的账号登录微信公众平台。
  2. 在左侧导航栏，选择设置。在基本设置页签下即可查看原始 ID 和小程序 ID。
• 配置小程序 A 的业务域名并将下载的校验文件提供给企业直播技术支持。
  1. 登录小程序开发者后台。在开发管理 > 开发设置 > 业务域名中，单击开始配置。
     
  2. 在配置业务域名弹窗中，下载校验文件，并将观看页地址中的域名，例如 live.byteoc.com，配置为小程序 A 的业务域名。
     

操作步骤

1. 创建 web-view 组件。
   示例代码如下所示。请将 finalUrl 替换为直播间的观看页地址。

   <web-view src="{{finalUrl}}"></web-view>
   

2. 设置直播间的观看限制。推荐使用自定义登录观看限制的观看页免登录方案。

   1. 登录企业直播控制台。

   2. 在直播列表中，单击进入直播间。

   3. 在左侧导航栏，选择观看页管理 > 观看限制。

   4. 本文以用户必须先登录小程序 A 后才能进入直播间为例，将观看账号设置为自定义并填写登录账号App 和登录链接。
      

      • 登录账号 App：小程序 A 的名称。
      • 登录链接：小程序 A 的登录页面链接。该链接需要包含协议头，例如http://myDomain/auth。

   5. 单击保存，可自动生成 Secret Key，用于计算校验签名（Sign 值）。

   6. 将 Sign、Nickname、UserId、Timestamp 等参数作为鉴权参数添加至观看页地址。例如 https://live.byteoc.com/xxx/xxx?Sign=xx&Nickname=xx&UserId=xx&Timestamp=xxx。
      本文仅介绍必选参数。如需添加非必选参数，详见回调参数。

      参数	类型	描述	示例值
      UserId	String	用户在小程序 A 的唯一标识。该参数仅用于关联小程序 A 和企业直播，不用做数据分析。 说明 为避免个人信息泄露，请勿使用手机号、身份证号等信息作为用户在小程序 A 的唯一标识。	14039
      Nickname	String	用户在小程序 A 的昵称。您需要对昵称先进行 UTF-8 编码，然后进行 Base64 编码，最后再进行 URL 编码。 例如昵称为员工😁 ABC，则进行 Base64 编码后的值为 5ZGY5bel8J+YgSBBQkM=，再进行 URL 编码后的值为 5ZGY5bel8J%2BYgSBBQkM%3D。 说明 为避免个人信息泄露，请勿使用手机号、身份证号等信息作为用户在小程序 A 的昵称。	5ZGY5bel8J%2BYgSBBQkM%3D
      Timestamp	Integer	当前时间。Unix 毫秒级时间戳。	1669808499000
      Sign	String	校验签名。 完成以下步骤，计算校验签名。 以 SecretKeyUserIdTimestamp 的格式拼接字符串。其中 Secret Key 可在上一步获得。 将字符串进行 MD5 加密并转化为 32 位小写密文。 例如 Secret Key、UserId 和 Timestamp 的值分别是 h/macd/b/a、14039 和 1669808499000，则 Sign 的值为 2708f2f2969e38ff5d1863fde50e7b64。	2708f2f2969e38ff5d1863fde50e7b64

   7. 用户登录小程序 A 后，点击您自行拼接的带有鉴权参数的观看页地址。企业直播通过签名校验后，用户即可进入直播间观看直播、发送评论等。

3. 由于微信小程序 WebView 嵌入的场景下，不支持跳转至其他微信小程序的页面。因此，为确保观众在移动端小程序 A 的观看页点击商品卡片后可以跳转至小程序 B 的页面，可先将观众跳转至小程序 A 的固定页面，并在该固定路径下，调用 wx.navigateToMiniProgram 方法跳转至小程序 B 的页面。

   说明

   如仅需跳转至小程序 A 的页面，可跳过该步骤，在步骤 4 中填写小程序 A 的页面链接即可。本文以在小程序 A 中点击商品卡片可跳转至小程序 B 为例进行介绍。

   在小程序 A 的项目中，完成以下操作：

   1. 在 app.json 文件中，配置专门重定向路由，在小程序 A 中创建一个用于跳转到小程序 B 的中间页面。

      "pages": [
          //...
          "pages/redirect/index" // 小程序 A 的固定路径，观众点击商品卡片后会先跳转至该页面
      ],
      

   2. 创建 pages/redirect/index.ts 文件并完成以下配置。

      // pages/redirect/index.ts
      Page({
      
        /**
         * 监听到页面加载事件后，执行该生命周期函数
         */
        onLoad(options) {
          const path = options.targetPath || 'pages/login/index' // 获取跳转至小程序 B 的页面时传递的参数，从而动态改变跳转路径。如未传入参数，则使用固定路径 pages/login/index。请将 pages/login/index 替换为小程序 B 页面的固定路径
          wx.navigateToMiniProgram({
            appId: 'wx93c2321b9e0a****', // 小程序 B 的小程序 ID
            path: path, // 小程序 B 的页面路径
            success(res) {
              // 小程序 B 页面跳转成功回调函数。可在此处自行实现记录用户行为或数据埋点等逻辑
            }
          })
        },
        backLive(){
          wx.navigateBack({delta: 1}) // 返回小程序 A 的 WebView 所在的页面
        },
      })
      

   3. 在 pages/redirect/index.wxml 文件中，添加返回直播按钮。观众在小程序 B 的页面返回小程序 A 的固定页面后，即可点击该按钮，返回小程序 A 的 WebView 所在的页面。

      <!--pages/redirect/index.wxml-->
      <view class="button-box">
          <button type="primary" bindtap="backLive">返回直播</button>
      </view>
      

4. 配置商品卡片菜单，并开启微信小程序跳转功能。

   1. 在直播间的左侧导航栏，选择菜单管理 > 商品卡片。
   2. 打开启用开关并单击全局配置。
      
   3. 打开微信小程序跳转开关，填写小程序 A 的原始 ID，并单击确定。
      

      说明

      交互展示配置在微信小程序中不生效。

   4. 配置商品卡片的介绍图、标题等信息后，单击编辑更多。
      
   5. 填写微信小程序链接并单击确定。小程序链接的格式为：小程序 A 的固定路径+?+参数名=参数值&参数名=参数值。本文中小程序 A 的固定路径为 pages/redirect/index，因此，例如需传递 id 和 title 2 个参数，则可填写 pages/redirect/index?id=xxx&title=xxx，观众点击商品卡片后，即可先跳转至小程序 A 的固定页面 pages/redirect/index，再跳转至小程序 B 的 pages/login/index?id=xxx&title=xxx 页面。
      

      说明

      如果参数值中含有 ?、&等特殊符号，需先调用 encodeURIComponent 方法编码，再在接收传递的参数时调用 decodeURIComponent 方法解码。