短信/h5页面打开微信小程序实现方案

实现方式

h5跳转小程序

需要开启小程序云开发（付费）
非个人主体并且已认证的(微信认证)小程序，使用云开发静态网站托管的网页，可以免鉴权跳转任意合法合规的小程序。即可以在微信内部浏览器的 H5 跳转小程序，也可以在微信外部浏览器或其他部分 App （如企业微信、QQ 等）跳转微信小程序。
静态网站网页在微信客户端打开时，wx.config 可以传入小程序 AppID 并且不需计算签名，也就是免鉴权即可使用跳转小程序的能力。

短信跳转小程序

需要开通静态网站以及短信发送功能（付费）
境内非个人主体的认证的小程序，开通静态网站后，可以免鉴权下发支持跳转到相应小程序的短信。短信中会包含支持在微信内或微信外打开的静态网站链接，用户打开页面后可一键跳转至你的小程序。
使用该能力，具有以下优势：

  1. 无需额外申请短信签名，可自动关联你的小程序产品名称；
  2. 短信正文模板免申请；
  3. 原生云调用支持，方便快捷。

目前只开放给电商类目小程序，具体包含以下一级类目：电商平台、商家自营、跨境电商。

  1. 每天生成 URL Scheme 和 URL Link 总数量上限为50万
  2. 只能生成已发布的小程序的 URL Link
  3. 在微信内或者安卓手机打开 URL Link 时，默认会先跳转官方 H5 中间页，如果需要定制 H5 内容，可以使用云开发静态网站
  4. 针对非个人主体小程序开放

URL Scheme

  1. 每天生成 URL Scheme 和 URL Link 总数量上限为50万
  2. 微信内的网页如需打开小程序请使用微信开放标签 - 小程序跳转按钮，无公众号也可以直接使用小程序身份开发网页并免鉴权跳转小程序，见云开发静态网站跳转小程序。符合开放范围的小程序可以下发支持打开小程序的短信
  3. 该功能基本覆盖当前用户正在使用的微信版本，开发者无需进行低版本兼容
  4. 只能生成已发布的小程序的 URL Scheme
  5. 通过 URL Scheme 跳转到微信时，可能会触发系统弹框询问，若用户选择不跳转，则无法打开小程序。请开发者妥善处理用户选择不跳转的场景
  6. 部分浏览器会限制打开网页直接跳转，可参考示例网页设置跳转按钮

实现方案：

  1. 后台获取微信小程序的access_token
  2. 后台生成URL Scheme
  3. 发短信到手机
  4. 手机点开网页链接打开浏览器调起小程序

后端实现node

初始化项目

npm init -y
npm install express
npm install axios --save-dev

node代码

const express = require('express')
const axios = require('axios')
const app = express()

app.get('/', (req, res) => {
  res.send('hello')
})

app.get('/getUrlScheme', (req, res) => {
  // 获取小程序凭证access_token
  getAccessToken().then((access_token) => {
    getUrlScheme(access_token).then((url) => {
      res.send('get success:' + url)
    })
  })
})

// 获取凭证
function getAccessToken() {
  return new Promise((resolve, reject) => {
    axios
      .get('https://api.weixin.qq.com/cgi-bin/token', {
        params: {
          grant_type: 'client_credential',
          appid: 'xxxxxx',
          secret: 'xxxxxxx',
        },
      })
      .then((res) => {
        if (res.data.access_token) {
          resolve(res.data.access_token)
        }
      })
      .catch(() => {
        reject()
      })
  })
}

function getUrlScheme(access_token) {
  return new Promise((resolve, reject) => {
    axios
      .post(
        `https://api.weixin.qq.com/wxa/generatescheme?access_token=${access_token}`,
        {
          jump_wxa: {
            path: '/pages/index/index',
            query: '?id=11111&name=22222',
          },
          is_expire: true,
          expire_time: new Date().getTime() + 30 * 24 * 60 * 60 * 1000,
        }
      )
      .then((res) => {
        if (res.data.errcode == 0) {
          resolve(res.data.openlink)
        }
      })
  })
}

app.listen(3000, () => {
  console.log('Example app listening on port 3000!')
})

前端跳转页面代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      location.href = "weixin://dl/business/?t=fdRMBLSqOOo1"
    </script>
  </head>
  <body>
    <a href="weixin://dl/business/?t=fdRMBLSqOOo1">打开小程序</a>
  </body>
</html>
posted @   明月南楼  阅读(1832)  评论(0)  编辑  收藏  举报
相关博文：
· h5在其他浏览器打开微信
· 微信小程序支付
· 浅析H5页面跳转小程序的3种实现方案
· H5 跳小程序
· H5跳转到微信小程序
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示