小程序中为每篇文章生成小程序码!

简介: 小程序中为每篇文章生成小程序码!

需求

为博客的每一篇文章生成分享海报,每张海报上需要一个带文章id的小程序码,微信官方提供三种方式生成小程序码。

api

api名 区别
wxacode.createQRCode 获取小程序二维码,适用于需要的码数量较少的业务场景。通过该接口生成的小程序码,永久有效,有数量限制
wxacode.get 获取小程序码,适用于需要的码数量较少的业务场景。通过该接口生成的小程序码,永久有效,有数量限制
wxacode.getUnlimited 获取小程序码,适用于需要的码数量极多的业务场景。通过该接口生成的小程序码,永久有效,数量暂无限制。

具体方法

这里主要用的第三种方法,api支持https和云调用,因为之前项目已经使用了云开发,所以这里直接使用云调用的方式。

接口名:++openapi.wxacode.getUnlimited++ :
// 需要在配置文件 project.config.json 配置如下代码
"permissions": {
"openapi": [
"wxacode.getUnlimited"  // api名
    ]
},
创建云函数调用,代码如下:
// 云调用依赖 wx-server-sdk
const cloud = require('wx-server-sdk')
// 项目的云环境
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
exports.main = async (event, context) => {
try {
// 方法调用
const result = await cloud.openapi.wxacode.getUnlimited({
      page: event.page, // 页面路径
      width: 430,   // 生成二维码的宽度
      scene: event.scene, // page后面跟的参数写在scene中
      autoColor: event.autoColor, // 生成的二维码是否智能取色
      isHyaline: event.isHyalin  // 二维码背景色透明
    })
    console.log(result)
return result
  } catch (err) {
    console.log(err)
return err
  }
}
在使用的地方调用
wx.cloud.callFunction({
name: 'createQRCode', // 函数名
data: {
page: 'pages/article/article',  // 传入的参数
scene: _this.data.articleId,
autoColor: true,
isHyaline: true
  },
})
.then(res => {
_this.setData({
// 注意 api请求返回的数据是一个 buffer数据流,这里我们可以用
// 官方提供的wx.arrayBufferToBase64(res.result.buffer)方法直接
// 转成base64 在拼接 「data:image/png;base64」就可以在页面渲染了
tempImg: 'data:image/png;base64,' + wx.arrayBufferToBase64(res.result.buffer)
    })
  })
.catch(console.error)


实现效果

image.png

相关文章
|
30天前
|
编译器 C语言 C++
程序翻译过程详解
程序翻译过程详解
|
7月前
|
存储 SQL 缓存
如何使用 ST05 事物码,快速找到访问指定数据库表的 ABAP 代码试读版
如何使用 ST05 事物码,快速找到访问指定数据库表的 ABAP 代码试读版
64 0
A2021-A2022年度总结项目内容(三)(三)
A2021-A2022年度总结项目内容(三)
51 0
A2021-A2022年度总结项目内容(三)(一)
A2021-A2022年度总结项目内容(三)
52 0
A2021-A2022年度总结项目内容(三)(四)
A2021-A2022年度总结项目内容(三)
59 0
A2021-A2022年度总结(项目内容四)(二)
A2021-A2022年度总结(项目内容四)
54 0
A2021-A2022年度总结项目内容(三)(二)
A2021-A2022年度总结项目内容(三)
73 0
|
JavaScript 前端开发
A2021-A2022年度总结(项目内容四)(一)
A2021-A2022年度总结(项目内容四)
87 0
A2021-A2022年度总结(项目内容四)(三)
A2021-A2022年度总结(项目内容四)
56 0
|
前端开发
前端知识学习案例5vs code-搜索和替换全局内容
前端知识学习案例5vs code-搜索和替换全局内容
63 0
前端知识学习案例5vs code-搜索和替换全局内容