微信扫码直接打开小程序

在有些场景中，我们需要微信扫码直接进入小程序进行相关业务处理！，比如共享单车，共享充电宝等，可以直接用微信扫描二维码，打开小程序进行一些操作。

处理过程

配置二维码

进入开发-开发管理-开发设置，查看扫普通链接二维码打开小程序配置

不支持的小程序

个人类的小程序，开放给企业、媒体、政府及其他组织类型小程序。

我这里把配置项放出来，以及注意事项及相关说明

https & http以及大小写就不多说了，hlht这类没见过，好像是运营商

配置前需满足一下条件

二维码规则的域名须通过 ICP 备案的验证

• 前缀占用规则选择之后其他开发者不能再配置满足前缀匹配的子规则，建议勾选占用

• 校验文件这个很多配置其实都有，就是二维码规则+文件名称可网页直接访问即可

• 小程序功能页面就是扫码之后进入的页面，根据业务配置

• 测试范围即当前要跳转的版本（开发、体验、线上）

• 测试链接最多五个，是测试的时候生成的完整二维码链接,必须符合已填写的二维码规则

配置完成后如下

我们利用测试链接在草料生成一个二维码即完成前提配置

外部扫码逻辑处理

演示代码为uniapp+vue3

<script setup>
import { ref } from "vue";
import utils from "@/utils/utils";

//获取登录状态
const isLogin = ref(false);

const cabNo = ref("");

onLoad((opt) => {
  const q = decodeURIComponent(opt.q || ""); // 获取到二维码原始链接内容
  const scancode_time = parseInt(opt.scancode_time); // 获取用户扫码时间 UNIX 时间戳
  const params = utils.urlToObj(q);
  if (params.cabNo) {
    cabNo.value = params.cabNo;
    setTimeout(() => {
      handleFunCmd();
    }, 1000);
  }
});

const handleFunCmd = () => {
  // 处理业务逻辑
  if (!isLogin.value) {
    uni.showToast({
      title: "请先登录",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateTo({
        url: utils.toLogin(),
      });
    }, 600);

    return;
  }
  // TODO ...
};

watch(
  () => isLogin.value,
  (newVlaue, oldVale) => {
    newVlaue && handleFunCmd();
  }
);
</script>

在opt里面拿到q参数并获取到编号如：cabNo，然后调用handleFunCmd方法去处理后续逻辑。

小程序内部扫码逻辑

<script setup>
uni.scanCode({
  onlyFromCamera: true,
  scanType: ["qrCode"],
  hideAlbum: true,
  success: (res) => {
    if (res.errMsg !== "scanCode:ok") {
      uni.showToast({
        title: "识别失败",
        icon: "none",
      });
      return;
    }
    // TODO ...
  },
  fail: (err) => {
    uni.showToast({
      title: "识别失败",
      icon: "none",
    });
  },
});
</script>

公众号文章地址

公众号文章地址