扫码打开小程序配置详解：微信VS支付宝

2023-10-07 08:23:11

扫码打开小程序的功能在日常使用中十分常见，但背后的配置原理却鲜为人知。本文将深入浅出地为你揭秘微信和小程序扫码打开配置的奥秘，并对比分析两者的异同，助你一探究竟。

微信小程序扫码打开配置

1. 配置文件

首先，你需要创建一个名为 wxapp.json 的配置文件，并将其放在小程序项目根目录下。

{
  "app": {
    "pages": [
      "pages/index/index"
    ],
    "window": {
      "navigateToMiniProgramAppIdList": ["你的小程序AppID"]
    }
  }
}

2. 扫描普通二维码

在小程序页面中，使用 wx.scanCode() API 扫描普通二维码，并指定 onlyFromCamera: true。

wx.scanCode({
  onlyFromCamera: true,
  success: (res) => {
    // res.path 为扫描到的普通二维码路径
  }
});

3. 解析二维码路径

扫描成功后，需要解析二维码路径中的参数。例如，一个指向小程序的二维码路径可能为 path=/pages/index/index?name=John。

4. 使用 API 打开小程序

使用 wx.navigateToMiniProgram() API 打开解析后的小程序。

wx.navigateToMiniProgram({
  appId: '你的小程序AppID',
  path: res.path
});

支付宝小程序扫码打开配置

1. 配置文件

在支付宝小程序项目根目录下，创建一个名为 manifest.json 的配置文件。

{
  "package": {
    "name": "你的小程序名称",
    "scanCodeDomains": ["你的小程序域名"]
  }
}

2. 扫描普通二维码

在小程序页面中，使用 my.scan() API 扫描普通二维码。

my.scan({
  type: 'qr',
  success: (res) => {
    // res.code 为扫描到的普通二维码内容
  }
});

3. 解析二维码内容

扫描成功后，需要解析二维码内容中的参数。与微信小程序类似，支付宝小程序二维码路径中也可能包含指向小程序的路径信息。

4. 使用 API 打开小程序

使用 my.navigateToMiniProgram() API 打开解析后的小程序。

my.navigateToMiniProgram({
  appId: '你的小程序AppID',
  path: res.code
});

异同对比