首页 > 编程语言 >短信/h5页面打开微信小程序实现方案

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

时间:2023-01-05 23:46:16浏览次数:67  
标签:res 程序实现 微信 程序 h5 URL token 跳转

实现方式

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>

标签:res,程序实现,微信,程序,h5,URL,token,跳转
From: https://www.cnblogs.com/mynl/p/17029144.html

相关文章

  • 集成微信登录
     1. 前期准备网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。在进行微信OAuth2.0授权登录接入之前,在微信开放平台(https://open.weixin......
  • 解决uniapp微信小程序拉伸有白色背景
    在pages.json内对相应页面设置"style":{"backgroundColor":"当前页面颜色","backgroundColorTop":"当前页面颜色","backgroundColorBottom":"当前页面颜色......
  • 【快应用】H5网页弹出软键盘后页面没有上移
    ​ 现象描述:使用快应用web组件加载某H5网页时,比如帐号登录、帐号注册等带有输入框的页面,当输入框获取焦点,弹出的软键盘挡住了H5网页的部分内容。问题代码如下:<templat......
  • 【快应用】H5网页弹出软键盘后页面没有上移
     现象描述:使用快应用web组件加载某H5网页时,比如帐号登录、帐号注册等带有输入框的页面,当输入框获取焦点,弹出的软键盘挡住了H5网页的部分内容。问题代码如下:<template><web......
  • uni-app 打包H5时,访问index.html页面白屏报错net::ERR_ABORTED 404
    uni-app打包H5后,访问index.html页面,页面却是白屏,Console控制台报错404,报错图如下:    原因:  解决方法:  配置文件manifest.json文件中H5配置里面,一开始......
  • h5代码模板
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metaname="......
  • 微信小程序安装vant
    1、初始化npm并安装npminit-ynpminstall2、修改project.config.json{"setting":{"packNpmManually":true,"packNpmRelationList":[{......
  • a标签跳转微信小程序
    <adata-miniprogram-appid="wx88ed27696de5b9a1"data-miniprogram-path="pages/tabs/home"data-miniprogram-nickname="精品店"data-miniprogram-type="svg-404"clas......
  • 微信小程序canvas验证码生成及使用
    先看效果:  wxml:<canvasclass="v-code"bindtap="changeImg"style="width:100px;height:40px;"canvas-id="canvas"></canvas>js:constMCAP=require('.......
  • uni-app跨平台开发(微信小程序为主线)
    一. 说明 官网:https://uniapp.dcloud.net.cn/     二.        三.目录        !作       者:Yaopengf......