使用uniCloud开发前后端一体化的uniapp项目(一)学习uniCloud
题外话:当前最新版本是HBuilderX(3.0.5.20210107)版本,但是由于其map组件黑屏问题,暂时无法更新至最新版本。而3.0版本作为分界线,前后版本的uniCloud目录和使用做了更新,但是并不影响之前版本对uniCloud的使用。第一步:新建一个Hello uniCloud项目一、Hello uniCloud项目目录简介相比普通的uniapp项目多了一个cloudfunction
题外话:当前HbuilderX版本为2.9.8,3.0之前的版本。
第一步:新建一个Hello uniCloud项目
一、Hello uniCloud项目目录简介
相比普通的uniapp项目多了一个cloudfunctions目录,按照index.vue页面的提示进行配置云Cloud即可。阿里云全部免费,腾讯云提供一个免费额度和其他付费选项。小型项目或者自己搞着玩的免费的完全可以胜任。
cloudfunctions目录简介:
1、add、remove、update、get目录分别表示对数据库表的增删改查的云函数。目录名即为云函数名。
2、common目录下放置公共函数。多个云函数的共享部分,可以抽离为公共模块,然后被多个云函数引用。目录名即为云函数名。
3、use-common目录是使用公共模块的云函数。目录名即为云函数名。
|--cloudfunctions
|--common // 云函数公用模块目录
|--hello-common // 云函数公用模块(在common目录右键创建公用模块目录,会自动创建入口index.js文件和package.json)
|--package.json //不要修改此package.json的name字段
|--index.js // 公用模块代码,可以不使用index.js,修改 package.json 内的 main 字段可以指定此文件名
|--use-common // 使用公用模块的云函数
|--node_modules // 在 use-common 目录执行 npm install 生成
|--package.json // 在 use-common 目录执行 npm init -y 生成
|--index.js // 云函数入口文件
|--package-lock.json // 在 use-common 目录执行 npm install 生成
4、使用公共模块时如果报错: Error: [use-common]: MODULE_NOT_FOUND:Cannot find module 'hello-common'。更新依赖本模块的云函数即可。uniCloud
5、db_init.json文件定义了一个json格式,里面包含了表名、表数据、表索引等表的相关数据。包含三部分:数据内容(data)、数据表索引(index)、数据表结构(schema)。最简单的定义表名即可使用。初始化时系统会自动生成表的ID字段。用户可以在前端随数据一起提交表的其他字段。例如:
add() {//添加一条记录
uni.showLoading({
title: '处理中...'
})
uniCloud.callFunction({
name: 'add',
data: { //表的字段及内容,字段名可以任意多个
name: 'DCloud',//demo默认
title:'this is a test!',//非demo默认,自定义的
subType: 'uniCloud',
createTime: Date.now()
}
}).then((res) => {
uni.hideLoading()
uni.showModal({
content: `成功添加一条数据,文档id为:${res.result.id}`,
showCancel: false
})
console.log(res)
}).catch((err) => {
uni.hideLoading()
uni.showModal({
content: `添加数据失败,错误信息为:${err.message}`,
showCancel: false
})
console.error(err)
})
},
二、阿里云服务空间目录简介
1、云数据库:可以在db_init.json文件中创建数据表,也可以在服务空间可视化创建。
2、云函数:存储前端创建的云函数,亦可可视化配置超时时间、函数执行内存、定时器触发等。
3、云储存:上传文件使用uniCloud.uploadFile()函数。上传成功后即在云储存中显示,阿里云单文件大小限制为100M。比如存储用户头像,图片就存储在云存储中,用户表里存储头像的fileID(即下载地址)。
更多推荐
所有评论(0)