需求
为博客的每一篇文章生成分享海报,每张海报上需要一个带文章id的小程序码,微信官方提供三种方式生成小程序码。
api
具体方法
这里主要用的第三种方法,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)
实现效果