内容简介:小程序云开发已经支持云调用,开放了很多接口,一直想要的获取小程序码也支持了。这下轻量的小程序也可以有自定义小程序码的功能。获得一个带参数的小程序码,传播出去以后,用户扫码进入指定页面,根据参数做不同的处理。本文只讲小程序码生成、存储、展示部分。参数处理不多介绍,可以查看新建小程序可以从开发工具的云开发模板初始化项目,根据
小程序云开发已经支持云调用,开放了很多接口,一直想要的获取小程序码也支持了。这下轻量的小程序也可以有自定义小程序码的功能。
1. 需求
获得一个带参数的小程序码,传播出去以后,用户扫码进入指定页面,根据参数做不同的处理。本文只讲小程序码生成、存储、展示部分。参数处理不多介绍,可以查看 项目代码 了解更多。
2. 开通云开发
新建小程序可以从开发 工具 的云开发模板初始化项目,根据 云开发操作指引 新建项目即可。
但是这里有个问题,已发布小程序的页面才能生成小程序码。如果现有的小程序没有开通云开发,需要做以下几步:
- 开发工具开通云开发,设定云开发的环境;
-
将原来的代码(除了
project.config.json
以外的所有文件)放到新建的miniprogram
目录; -
新增
cloudfunctions
目录; -
app.json
新增配置"cloud": true
; -
project.config.json
配置"miniprogramRoot":"miniprogram/"
和"cloudfunctionRoot":"cloudfunctions/"
; -
修改小程序基础库版本,最低要 2.3.0
"libVersion": "2.3.0"
。
3. 生成小程序码
下面可以开始写代码开发了,开始之前,建议先看完官方教程。特别是开发工具的使用步骤,开发和调试时如果遇到奇怪的问题,可以尝试重启开发工具、重装开发工具,也可以去 微信开放社区 发帖。(重启和重装都是我在社区中发现的答案,能解决各种不应该存在的问题)。
3.1 准备文件
在 cloudfunctions
目录右键 新建Node.js云函数
getqr
。
生成小程序码需要单独指定权限。在 getqr
目录新建 config.json
,里面写以下内容:
{ "permissions": { "openapi": [ "wxacode.getUnlimited" ] } }
小程序码的获取方式有三种,这里只用到了接口 getUnlimited,选择这个接口的原因是漂亮的圆形小程序码,数量无限制。具体区别可以去 获取小程序码官方文档 查看详情。
正常情况下,这个时候云函数可以部署测试了。如果遇到部署不成功、各种权限问题,可以尝试本地部署上传所有文件、重启试试。
3.2 生成小程序码
生成小程序码的代码如下,可以指定页面和页面参数 scene
,还有小程序码的尺寸。
注意这里的 scene
有限制:
1. 最大32个可见字符;
2. 只支持数字,大小写英文以及部分特殊字符: !#$&'()*+,/:;=?@-._~
;
3. 注意参数格式:下面实例代码生成小程序码后,扫码获得 pages/demo/demo?scene=id%3D6
。
try { const result = await cloud.openapi.wxacode.getUnlimited({ page: 'pages/demo/demo', scene: 'id=6', width: 240, }) console.log(result) return result } catch (err) { console.log(err) return err }
直接调用,比服务端调用少了 access_token 参数。
3.3 上传到云存储
返回值中的 buffer 就是图片内容,直接上传到云存储:
const uploadResult = await cloud.uploadFile({ cloudPath: 'shareqr/' + qr_name_hash + '.jpg', fileContent: result.buffer, });
-
我在云存储新建了
shareqr
目录保存小程序码; - 图片名根据参数取md5摘要;
-
getUnlimited
返回的图像是jpeg
格式,后缀硬编码写.jpg
。
3.4 获取图片临时路径
直接上代码
getURLReault = await cloud.getTempFileURL({ fileList: [uploadResult.fileID] }); fileObj = getURLReault.fileList[0] return fileObj
3.5 直接从存云存储获取
生成过以后图片已经保存在云存储,用同样的参数第二次调用没必要再生成一次,去掉一次网络请求,可以节省不少时间。
前面说到文件名使用请求参数摘要,知道了目录和文件名,再加上文件bucket前缀就可以拼出来 fileID
,用 fileID
可以查询云存储的文件。
比如我刚刚生成的 fileID 是 cloud://dev-xxxx.8888-dev-xxxx/qr/44ea42f05091c3bec771123e6e8cd4c2.jpg
, 前缀就是 cloud://dev-xxxx.8888-dev-xxxx/
。再拼上目录、文件名、后缀就是 fileID
。
注:此处的 fileID
拼接方法并不是来自官方文档,只是在使用中发现这个前缀不会变。还需要官方解释说明 fileID
规则。
如果会改变,就需要再用云数据库存储 fileID
,更麻烦一些。
3.6 云函数完整代码
const full_path = event.page + '?' + event.scene; const qr_name_hash = crypto.createHash('md5').update(full_path).digest('hex'); const temp_id = bucketPrefix + qr_name_hash + '.jpg'; // 云函数入口函数 exports.main = async (event, context) => { const full_path = event.page + '?' + event.scene; const qr_name_hash = crypto.createHash('md5').update(full_path).digest('hex'); const temp_id = bucketPrefix + qr_name_hash + '.jpg'; // return { // full_path, // qr_name_hash, // temp_id // } try { // 先尝试获取文件,存在就直接返回临时路径 let getURLReault = await cloud.getTempFileURL({ fileList: [temp_id] }); // return getURLReault; let fileObj = getURLReault.fileList[0]; if (fileObj.tempFileURL != '') { fileObj.fromCache = true; return fileObj; } // 生成小程序码 const wxacodeResult = await cloud.openapi.wxacode.getUnlimited({ scene: event.scene, page: event.page, width: 240 }) // return wxacodeResult; if (wxacodeResult.errCode != 0) { // 生成二维码失败,返回错误信息 return wxacodeResult; } // 上传到云存储 const uploadResult = await cloud.uploadFile({ cloudPath: 'qr/' + qr_name_hash + '.jpg', fileContent: wxacodeResult.buffer, }); // return uploadResult; if (!uploadResult.fileID) { //上传失败,返回错误信息 return uploadResult; } // 获取图片临时路径 getURLReault = await cloud.getTempFileURL({ fileList: [uploadResult.fileID] }); fileObj = getURLReault.fileList[0]; fileObj.fromCache = false; // 上传成功,获取文件临时url,返回临时路径的查询结果 return fileObj; } catch (err) { return err } }
4. 小程序页面调用
调用页面就比较简单了,在小程序新建一个 pages/share/share
在 onLoad
函数调用云函数。
// 使用前记得先初始化云函数,一版放到 app.js onLaunch() 中 // wx.cloud.init({env: 'dev-8888'}) wx.cloud.callFunction({ name: 'getqr', data: { page: 'pages/demo/demo', scene: 'id=6', } }).then(res => { console.log(res.result); if (res.result.status == 0) { _this.setData({ qr_url: res.result.tempFileURL }) }else{ wx.showToast({ icon: 'none', title: '调用失败', }) } }).catch(err => { console.error(err); wx.showToast({ icon: 'none', title: '调用失败', }) })
至此完整的调用过程已经全部完成,详细代码可以到 项目代码 查看。
代码中还对入口页面和share页面的参数做了包装,云函数可以直接使用,小程序可以稍做修改适应自己业务。
写在最后
小程序云开发已经开放了很多功能,除了这次提到的生成小程序码,云调用还可以发送模板消息。有需要的开发者又一个理由可以快速上线新功能了。
云开发还开放了 HTTP API
,也就是用自己的服务器调用云函数。以前看完云开发介绍文章最大的疑问就是,你说的都很好,可是后台数据怎么管理呢?不能跟自己的服务器结合,只能放一些轻量的小程序。有了 HTTP API
以后就可以用自己的服务器做管理后台了。这时候你要问,都用上服务器了,还需要云开发做什么。首先,云开发免费;其次,免费功能已经够强,就差不能做Web管理后台了;最后, 获取access_token
(小程序及小游戏调用不要求IP地址在白名单内。)
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Java WebService接口生成和调用 图文详解
- Kubernetes helm API 客户端文件生成和远程调用
- PHP实现百度、新浪的API接口调用生成短链接网址
- 直观讲解-RPC调用和HTTP调用的区别
- 调用链系列一:解读UAVStack中的调用链技术
- 调用链系列二:解读UAVStack中的调用链技术
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。