小程序-云开发-实现生成小程序码

article/2025/3/18 22:04:00

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

前言

小程序因为传播快,易分享,现已经成为各大小公司的标配,从曾今你有公众号么,变为你有小程序么?可想而知小程序的火爆程度

那么在小程序中,如何生成小程序码?虽然小程序目前可以分享到朋友圈了的,但小程序码的传播无论是直接分享给好友,还是作为图片分享,或是作为线下扫码入口,都是引流的一种重要的入口

实例效果

（点击长按识别扫码）

具体实现

小程序端代码,在view元素上绑定事件

<view bindtap="onViewTap">小程序码</view>

小程序端逻辑代码

Page({data: {},// 绑定的点击事件函数onViewTap() {this.createQrCode(); // 调用生成小程序码},// 生成小程序码createQrCode() {this.showLoading();wx.cloud.callFunction({// 请求云函数// 云函数getQrCodename: 'getQrCode',}).then((res) => {console.log(res);const fileId = res.result;wx.previewImage({// 小程序码,生成后直接预览,前台展示urls: [fileId],current: fileId,});this.hideLoading();});},// toast生成中showLoading() {wx.showLoading({title: '正在生成中...',icon: 'none',});},hideLoading() {wx.hideLoading();},
});

在小程序端就上面几行代码

云函数端实现代码

在cloudFunctions文件夹下创建getQrCode云函数,会默认创建config.json,index.js,package.json三个文件

其中config.json内为

{"permissions": {"openapi": ["wxacode.getUnlimited"]}
}

上面的是利用wxacode.getUnlimited生成小程序码的配置,这个配置是固定的

而index.js中如下代码

// 云函数入口文件
const cloud = require('wx-server-sdk');cloud.init();// 云函数入口函数
exports.main = async (event, context) => {const wxContext = cloud.getWXContext(); // 获取上下文const result = await cloud.openapi.wxacode.getUnlimited({// 调用生成小程序码的接口，携带一些参数,例如:scenescene: wxContext.OPENID,});// console.log(result)const upload = await cloud.uploadFile({// 生成的小程序码上传到云存储中cloudPath: 'qrcode/' + Date.now() + '-' + Math.random() + '.png', // 生成的小程序码存储到云存储当中去，路径fileContent: result.buffer,});return upload.fileID; // 返回文件的fileID,也就是该图片
};

生成小程序码就是上面几行简单的云函数代码就可可以实现,主要是利用wxacode.getUnlimited这个接口

获取小程序码，适用于需要小程序码数量极多的业务场景。通过该接口生成的小程序码，永久有效，数量暂无限制