2.1 小程序开启云开发模式
本文知识点:
- 小程序切换成云开发模式的简要步骤
hi-face
项目的主要文件结构
小程序项目配置 project.config.json
普通模式
miniprogramRoot
是小程序代码目录,此处写的是Taro编译后的dist目录appid
微信小程序的appid
{
"miniprogramRoot": "taro/dist/",
"appid": "testappid"
}
开通云开发模式
开通云环境
- 在微信开发者工具控制台上,点击“云开发”按钮,就可以新建云开发环境。最多支持两个
- 建好之后,就可以看到你的云环境的名称,如下图
云环境配置说明
cloudfunctionRoot
云开发的云函数所在的目录cloudfunctionTemplateRoot
云开发的云函数测试数据模板所在的目录
{
"miniprogramRoot": "taro/dist/",
"cloudfunctionRoot": "cloud/functions/",
"cloudfunctionTemplateRoot": "cloud/template/",
"appid": "testappid"
}
hi-face
是基于 Taro 的,可以使用其taro-cli
中的云开发模板来初始化一个新的小程序项目,观察里面的文件目录设置来以作为参考。
云开发模式配置及使用
- 小程序启动时,初始化云环境
- 在需要调用云函数或云存储的地方,调用对应的
callFunction
等方法即可
// taro/src/pages/app.js
Taro.cloud.init({
env: 'name-id' // 云开发环境名
})
// taro/src/pages/avatar-edit/avatar-edit.js
Taro.cloud.callFunction({
name: 'analyze-face',
data: {
fileID: '12345'
}
}).then(res => console.log(res))
hi-face
项目的主要文件结构
|- cloud
|- functions 云函数目录
|- template 小程序云函数的调试模板
|- taro Taro 主目录
|- config/ Taro 项目配置
|- src 功能主代码
| |- app.js 项目主入口
| |- config.js 运行时的全局配置
| |- components 通用组件
| | |- taro-cropper 图片裁剪插件
| |- pages 页面
| | |- avatar-edit 头像编辑页
| | |- avatar-poster 头像分享页 / 头像作品页
| | |- theme-list 主题列表页
| | |- self 我的,包含头像列表
| |- utils 通用方法
| | |- common.js 常用的方法,比如判断iPhoneX
| | |- fetch/index.js 接口情况的封装,对云函数调用的 cloudCallFunction 也在其中
| | |- image-utils.js 获取图片、图片转 base64、上传图片等
| | |- face-utils.js 人脸识别的处理方法,包含人脸的头顶中间位置、嘴部最近位置等
头像编辑页主流程
头像编辑页的主流程:
v2 版
常见问题
接口请求体太大,还未接收到请求结果,云函数就返回失败?
将接口请求的返回数据调大一些,如20秒
"networkTimeout": {
"request": 20000,
"downloadFile": 10000
}
云函数容易超时吗?
云函数默认的超时时间为 3 秒,这对于普通的网络请求还算够用。
云函数存在冷启动的情况,并且调用五官分析等也需要 0.5s 到 3s 的时间,需要将云函数的超时时间改为10s ~ 20s。
微信开发者工具上使用云函数本地调试的时候,函数还未发出就报错,并且返回的 result
为 null
我在做“人脸五官分析”功能的时候,曾经调用了约 1Mb 大小的 base64 图片数据,就遇到了这个问题。后来努力将 base64 图片数据降为 150Kb(在图片识别加速的文章中有讲解),或者将这个图片先上传到云存储上,再在云函数环境中再下来下来,这样也达到多次调用,减少网络间数据传递体积。
小结
下一篇文章中,我将介绍如何介绍Hi头像的核心功能“人脸五官分析”的配置以及腾讯云特色的人工智能服务。