静态网站 H5 跳转小程序

前言

向指定用户发送一条携带网址的短信，点击以后跳转指定小程序。

这个场景是非常常见，我这里主要是讲一下完整的流程，以及需要注意的一些要点。

环境

微信开发者工具: RC 1.06.2402021

基础库: 3.4.9

方案

本地开发 H5 页面和云函数 -> 开通微信小程序云开发 -> 上传 H5 页面和云函数 -> 开放云函数权限 -> 配置自定义域名 -> 点击网址打开指定小程序

实现

本地开发 H5 页面和云函数

具体的模板代码，微信官方已经给出，只需要其中带有 <!-- replace --> 的地方替换成自己的配置即可。

静态网站 H5 跳小程序

在小程序项目根目录下新建 cloud-static 和 cloudfunctions 文件夹，
cloud-static 文件夹下新建 index.html 文件，此为 H5 页面，
cloudfunctions 文件夹下新建 public 文件夹，存放云函数相关文件。

具体目录结构如下:

H5 页面

需要注意的是，如果你想携带一些自定义参数，那你就需要进行一些修改。

主要是以下两段代码，注意 a 和 b 变量所在的位置：

if (isWeixin) {
  var containerEl = document.getElementById("wechat-web-container");
  containerEl.classList.remove("hidden");
  containerEl.classList.add("full", "wechat-web-container");

  var launchBtn = document.getElementById("launch-btn");
  launchBtn.addEventListener("ready", function (e) {
    console.log("开放标签 ready");
  });
  launchBtn.addEventListener("launch", function (e) {
    console.log("开放标签 success");
  });
  launchBtn.addEventListener("error", function (e) {
    console.log("开放标签 fail", e.detail);
  });

  // 设置自定义参数
  const a = 1;
  const b = 2;
  launchBtn.setAttribute("path", `pages/home/index?a=${a}&b=${b}`);

  wx.config({
    // debug: true, // 调试时可开启
    appId: "小程序 AppID", // <!-- replace -->
    timestamp: 0, // 必填，填任意数字即可
    nonceStr: "nonceStr", // 必填，填任意非空字符串即可
    signature: "signature", // 必填，填任意非空字符串即可
    jsApiList: ["chooseImage"], // 必填，随意一个接口即可
    openTagList: ["wx-open-launch-weapp"], // 填入打开小程序的开放标签名
  });
}

async function openWeapp(onBeforeJump) {
  var c = window.c;

  // 设置自定义参数
  const a = 1;
  const b = 2;
  const res = await c.callFunction({
    name: "public",
    data: {
      action: "getUrlScheme",
      a,
      b,
    },
  });
  console.warn(res);
  if (onBeforeJump) {
    onBeforeJump();
  }
  location.href = res.result.openlink;
}

云函数

相对应的，如果你想携带自定义参数，那云函数也要经过一定的改造。

请注意 a 和 b 变量所在的位置：

async function getUrlScheme(options) {
  // 使用环境共享时，需要注意此处传入 appid 来保证打开的是调用方小程序，否则默认将打开资源方小程序
  // 参考如下：
  // cloud.openapi({ appid: wxContent.FROM_APPID }).urlscheme.generate
  const a = options.a || "";
  const b = options.b || "";
  return cloud.openapi.urlscheme.generate({
    jumpWxa: {
      path: "/page/component/index", // <!-- replace -->
      query: `a=${a}&b=${b}`,
    },
    // 如果想不过期则置为 false，并可以存到数据库
    isExpire: true,
    // 一分钟有效期
    expireTime: parseInt(Date.now() / 1000 + 60),
  });
}

开通微信小程序云开发

点击 微信开发者工具 左上角的 云开发 按钮，完成云开发的功能开通即可，目前的基础套餐月费用为 ￥19.9（2024.10.08）。

上传 H5 页面和云函数

H5 页面需要在 云开发控制台 上传，云函数在 微信开发者工具 中直接上传即可。

上传 H5 页面

打开 云开发控制台 以后，点击更多里面的 静态网站，再点击 文件管理 菜单下的 上传文件 按钮，选择需要上传的 html 文件。

上传云函数

在需要上传的云函数文件夹上，单击右键，选择 上传并部署：云端安装依赖（不上传 node_modules） 。

开放云函数权限

云函数不做配置的话，需要登录才能调用到云函数，所以我们需要放开云函数的权限控制，让未登录用户也能正常调用。

需要配置的权限有两处：

云函数权限

打开 云开发控制台 以后，选择 云函数，再选择 云函数权限 菜单，修改 自定义安全规则 为以下代码即可。

{
  "*": {
    "invoke": "auth != null"
  },
  "public": {
    "invoke": true
  }
}

云资源权限

打开 云开发控制台 以后，选择设置，找到 未登录用户访问云资源权限设置，打开指定云资源权限即可。

配置自定义域名

首先云开发环境是自带一个域名的，如果你需要使用自定义的域名，就需要自己配置一下。

首先可以先配置域名，再选择 SSL 证书，如果没有就点击 SSL证书控制台 进去上传就可以了。

具体的配置要联系运维，这边就不展开了。

点击网址打开指定小程序

配好域名以后，打开的网址指向你上传的 H5 页面的路径即可，例如:

https://www.baidu.com/index.html

总结

可以说，在 相关文档 的帮助下，静态网站 H5 跳转小程序 这个功能的实现不算麻烦，能够很好的起到引流的效果。