微信小程序之生成自定义参数小程序二维码

简介: 扫码已经成为一种常见又方便的进入移动应用的途径,可以把线上线下的用户流量带入你的移动应用中来。微信小程序也提供了扫码进入的功能,可以通过扫描二维码或者微信小程序专有的小程序码,进入到相应的小程序页面。

扫码已经成为一种常见又方便的进入移动应用的途径,可以把线上线下的用户流量带入你的移动应用中来。微信小程序也提供了扫码进入的功能,可以通过扫描二维码或者微信小程序专有的小程序码,进入到相应的小程序页面。

微信官方提供了3个不同的REST API用于生成带参数的小程序码或者二维码,可在扫码后进入指定的小程序页面,其中接口A和C能生成的图片总数量有限制(10万张),对于那种需要生成大量二维码的使用场景(比如为每个订单生成一个二维码、餐厅的每张餐桌生成一个二维码等)是远远不能满足需求的。而接口B可以解决这个问题,我们这次主要来看一下如何使用这个接口。

总体的思路是:在我们的后端开发一个API,在其中调用微信的二维码接口,调用成功后会得到二维码图片的二进制流,最后将这个二进制流输出到前台。

以下步骤中的后端代码是基于Node.js进行编写,并使用了Koa 2框架。代码仅供参考。

步骤1:获取重要参数access_token

调用获取小程序二维码的REST API需要一个很重要的参数:access_token,这是用于获取微信公众平台API访问权限的重要参数,做过微信公众号HTML5开发的朋友对其肯定非常熟悉。没接触过的话,可以看一下微信公众平台的文档

调用微信公众平台的API,已经有很多成熟的开源SDK可以使用,从Github上可以搜到很多不同语言实现的SDK。由于我用的是Node.js开发,所以使用了co-wechat-api

以下是使用co-wechat-api来获取access_token的基本用法:

const WechatAPI = require('co-wechat-api')

const wxAppAPI = new WechatAPI('小程序的app id', '小程序的app secret')
const token = await wxAppAPI.ensureAccessToken()

console.log(token.accessToken)

步骤2:拼接url,发送请求获取二维码图片

const fs = require('fs')
const axios = require('axios')

// 拼接url
const url = `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token.accessToken}`

// 发送POST请求
const response = await axios.post(url, {
  page: '小程序中Page的路径',
  scene: '自定义参数,格式你自己决定'
}, { responseType: 'stream' })

// 将请求结果中的二进制流写入到本地文件qrcode.png
response.data.pipe(fs.createWriteStream('qrcode.png'))

在上面的代码中,我们将access_token作为query string参数拼接到url上,然后向这个url发送POST请求,传递的参数主要是pagescene,其中page参数是扫码后进入的小程序页面路径(比如pages/index/index,并且不能携带参数),而scene则传入的是我们的自定义参数。

其实经过这一步,你就已经可以在你的磁盘上找到这张小程序码的图片了,用微信扫一下这张图片,就能进入你的小程序页面。

步骤3:将二维码图片输出

虽然我们已经获取到了小程序码图片,但是现在它还只是躺在我们的服务器端。而通常实际情况是,我们需要在小程序页面上去显示这张图片,让用户去保存和分享它。因此,我们需要把这张图片通过我们的API进行输出。以下是基于koa 2的示例代码:

const fs = require('fs')
const Router = require('koa-router')
const router = new Router()

router.get('/wx/common/qrcode', async (ctx) => {
  const stream = fs.createReadStream(‘qrcode.png’)
  ctx.body = stream
})

步骤4:在小程序中显示

在小程序中显示该图片就非常简单了,直接使用<image>组件来进行展示:

  <image src="https://your-domain.com/wx/common/qrcode" style="width:200px;height:200px"></image>

附录:稍微完备一些的服务端代码

上面4个步骤中给出的示例代码只是为了配合说明各个步骤,代码比较简陋,下面是经过稍微的组织过的代码,供参考:

  • 路由部分的代码:
const Router = require('koa-router')
const PassThrough = require('stream').PassThrough;
const wxapi = require('../services/wxapi')
const router = new Router()

router.get('/wx/common/qrcode', async (ctx) => {
  const stream = await wxapi.getWxaCodeUnlimit({
    page: 'pages/profile/profile',
    scene: 'abc123'
  })
  ctx.body = stream.pipe(PassThrough())
})
  • Service部分的代码:
const fs = require('fs')
const path = require('path')
const crypto = require('crypto')
const bluebird = require('bluebird')
const axios = require('axios')
const WechatAPI = require('co-wechat-api')

const wxAppAPI = new WechatAPI('小程序的app id', '小程序的app secret')

function sha1(message) {
  return crypto.createHash('sha1').update(message, 'utf8').digest('hex')
}

module.exports = {

  async getWxaCodeUnlimit({ page, scene }) {
    // 图片文件名使用page和scene等数据生成Hash
    // 以避免重复生成内容相同的小程序码
    const fileName = sha1(page + scene)
    const filePath = path.join(__dirname, `../../qrcode/${fileName}.png`)

    let readable

    try {
      // 检测该名字的小程序码图片文件是否已存在
      await bluebird.promisify(fs.access)(filePath, fs.constants.R_OK);
      readable = fs.createReadStream(filePath)
    } catch (e) {
      // 小程序码不存在,则创建一张新的
      const token = await wxAppAPI.ensureAccessToken()
      const response = await axios({
        method: 'post',
        url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit',
        responseType: 'stream',
        params: { access_token: token.accessToken },
        data: { page, scene }
      })
      readable = response.data
      readable.pipe(fs.createWriteStream(filePath))
    }

    // 返回该小程序码图片的文件流
    return readable
  }

}

祝大家开发出更好的小程序!

目录
相关文章
|
28天前
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
102 2
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
2月前
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
147 3
|
6月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
125 1
ly~
|
7月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
163 6
|
2月前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
367 8
|
2月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
703 12
|
6月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
1215 1
|
6月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
217 0
微信小程序:自定义关注公众号组件样式
|
6月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
2057 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
8月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
358 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar

热门文章

最新文章

下一篇
oss创建bucket