目录
- 一、uni-app 项目配置
- 1.1 小程序
- 1.2 app真机
- 二、uniCloud基本使用
- 2.1 云服务
- 2.2 页面调用方法
- 接口调用
- 图片上传、删除
- 2.3 聚合操作
- 三、项目开发
- 导航
- 注意事项
一、uni-app 项目配置
1.1 小程序
打开微信开发者工具的服务端口
HBuilderX 中配置微信开发者工具的安装路径
1.2 app真机
二、uniCloud基本使用
2.1 云服务
'use strict';
// 云数据库对象
const db = uniCloud.database()
exports.main = async (event, context) => {
// 获取表'login'的集合对象
const collection = db.collection('login')
// 查询
// where、doc都能执行查询操作
// field 过滤查询数据
let res = collection.where({
name: event.name
}).field({
content: false // true 值返回这个字段，false 表示不返回
}).get()
// 新增数据
let res = await collection.add([{
name: '张三',
}, {
name: '李四',
}])
// 修改数据
/*
* update：更新数据，查询不到数据时，无任何变化
* set：更新数据，查询不到数据时，把更新数据作为新增项。
*/
let res = await collection.doc('5fb37343a93e420001ae366a').update({
name: 'wang'
})
// 删除数据
let res = await collection.doc('5fb37343a93e420001ae366b').remove()
console.log(res)
// 返回调用数据
return {
code: 200,
msg: "操作成功"
}
};2.2 页面调用方法
接口调用
uniCloud.callFunction({
name: 'login', // 云函数
data: { // 传参
name: ''
},
success(res) {
// 成功回调
sonsole.log(res)
},
fail(res) {
// 失败回调
}
})图片上传、删除
// 图片上传云存储
// chooseImage 选择文件弹窗
uniCloud.chooseImage({
count: 1, // 数量限制
success(res) {
// 获取文件路径
const tempFilePath = res.tempFilePaths[0]
// 上传云存储
uniCloud.uploadFile({
filePath: tempFilePath,
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
}
})
},
fail(err) {
console.log(err);
}
})
// 删除云存储中的文件
uniCloud.deleteFile({
fileList: ['url地址'],
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
}
})2.3 聚合操作
'use strict';
// 获取数据库的引用
const db = uniCloud.database()
const $ = db.command.aggregate // 声明聚合操作符
// const dbCmd = db.command
// 数据更新操作
// await db.collection('article').doc(article_id).update({
// comments: dbCmd.unshift(commentObj) // 数组插入数据，更新时插入数据
// })
exports.main = async (event, context) => {
const {
user_id,
name,
page = 1,
pageSize = 10
} = event
// 获取用户表信息
const userinfo = await db.collection('user').doc(user_id).get()
const article_likes_ids = userinfo.data[0].article_likes_ids
// 聚合 ： 更精细化的去处理数据 求和 、分组、指定那些字段
const list = await db.collection('article')
.aggregate() // 聚合操作
// 追加字段
.addFields({ // 添加新字段到输出的记录
is_like: $.in(['$_id', article_likes_ids]) // 关联查询是否存在user表中
})
.match({
classify: name // 使用值准确查询，使用正则迷糊查询new RegExp(name)
})
.project({
content: false // 过滤content不查询出来
})
// 要跳过多少数据
.skip(pageSize * (page - 1))
.limit(pageSize)
.end()
//返回数据给客户端
return {
code: 200,
msg: '数据请求成功',
data: list.data
}
};三、项目开发
导航
// 在pages.json中配置
"tabBar": {
"color": "#666", // 默认字体颜色
"selectedColor": "#f07373", // 选中字体颜色
"backgroundColor": "#fff", // 导航背景色
"list": [{ // 最少2个、最多5个 tab
"pagePath": "pages/tabbar/index/index", // 路由页面
/*
* 图片路径，不支持网络图片，不支持字体图标
* 当 postion 为 top 时，此参数无效
* icon 大小限制为40kb，建议尺寸为 81px * 81px
*/
"iconPath": "static/home.png", // 默认时图片
"selectedIconPath": "static/home-active.png", // 选中时图片
"text": "首页" // 标题
}]
}注意事项
- 在页面中设置全局body样式，在style中使用
page进行标签选择器设置样式 - 自定义
Navbar顶部导航栏组件开发时需要注意小程序（微信、支付宝等）中，导航栏会自动适配导航栏右侧的胶囊位置，避开该区域及顶部状态栏高度 - 在自定义组件中使用
created钩子，在页面内使用onLoad钩子。onLoad接收参数是url后？拼接的参数，此参数适合于页面跳转携带参数 - 自定义组件在
components注册，名字和文件名一致时(components/home/home.vue)，可直接使用home标签，可以不需在引入、注册home组件。 -
ref只能绑定在自定义组件中，在view等便签上使用无效 - 如果
textarea处于一个position:fixed的区域，需要显示指定属性fixed为 true - 非父子组件传值使用
uni.$emit，接收使用uni.$on，类似vue开发中的公共bus使用，只能在打开过的页面中使用。 - 页面布局使用
弹性布局兼容性更好 - 移动端尺寸自适应推荐使用
rpx（响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度；rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向） - 微信小程序页面开发
同级标签先渲染固有的数据，后面条件渲染（for/if）出来的会追加在后面渲染，打乱布局顺序。可使用标签包裹条件渲染内容占位。
<!--
list-card 为自定义组件
list初始是为空数组，后通过接口获取
uni-load-more为uni插件市场提供的loading组件
-->
<!-- 错误写法 -->
<list-card :item="item" v-for="item in list" :key="item._id"></list-card>
<uni-load-more iconType="snow" status="loading"></uni-load-more>
<!-- 在微信小程序 list为空数组不渲染，渲染uni-load-more，当list有数据时，在追加在后，顺序如下 -->
<uni-load-more iconType="snow" status="loading"></uni-load-more>
<list-card :item="item" v-for="item in list" :key="item._id"></list-card>
<!-- 正确写法 -->
<!-- 使用标签占位，正确渲染 -->
<view>
<list-card :item="item" v-for="item in list" :key="item._id"></list-card>
</view>
<uni-load-more iconType="snow" status="loading"></uni-load-more>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
