基于云开发的物业管理小程序（入门级）
技术栈：微信小程序，云开发
项目描述：本小程序是一款基于疫情下的物业管理小程序，有工作人员通讯录查询、消息上报、查看公告等功能
责任描述：在本项目中本人担任负责人，负责全部前端模块以及云端数据库的设计，实现了所有页面的展示效果和使用效果。
技术亮点：
- 基于微信云开发的用户登录信息的缓存优化；
- 利用云储存提高存储空间的利用率；
- 利用云数据库实现展示跳转外部公告页面和通讯录模糊查询
演示：www.bilibili.com/video/BV11x…
基于云开发的物业管理小程序****
一、云开发简介
云开发是云端一体化的后端云服务，采用serverless架构，免去了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
有了云开发后，前端工程师将可以独立实现前端开发、后端开发、接口联调等工作，且无需太多后端知识。
在云开发小程序中，最核心的便是三大组件：云数据库、云存储和云函数。
云开发数据库是由云开发团队提供给云开发用户的数据库服务，开发者可以在小程序、云函数等环境中，通过简洁易懂的函数调用，来获取到对应的数据，方便开发者快速完成业务逻辑中关于数据库的部分。
在开发过程中，可以使用诸如wx.cloud.database().collection('data').where({"age":10}).get() 这样的方法获取到数据库中的信息，而无需再通过服务端提供的 API 完成数据库请求，将数据查询的权力下放到小程序端，加快应用的迭代效率。它既支持小程序前端操作，也支持云函数操作。
云存储提供稳定、安全、低成本、简单易⽤的云端存储服务，⽀持任意数量和形式的⾮结 构化数据存储，如图⽚、⽂档、⾳频、视频、⽂件等；支持云开发控制台可视化管理。
在开发过程中，我们可以使用这样的方法来从云储存中获取图片地址，而不是使用
来从本地路径获取图片。
云函数可以以函数的形式在云上运⾏后端代码，⽀持SDK的调⽤或HTTP请求，微信私有协议天然鉴权。云函数存储在云端，可以根据函数的使⽤情况，⾃动扩缩容。
1. 解放后台。有了云开发后，前端工程师将可以独立实现前端开发、后端开发、接口联调等工作，且无需太多后端知识。
2. 无服务器。借助 CloudBase 云数据库、云存储、云函数等强大的后端能力，无需自行搭建或维护服务器即可开发、上线应用。
3. 跨平台。支持小程序、Web、Flutter、Unity 等多个平台，帮助各平台开发者高效开发应用。
4. 节约成本。CloudBase 天然支持弹性扩缩容，按量计费，灵活管理，极大节约成本。
准备工作：
下载并安装微信开发者工具；
注册微信小程序，获取小程序的 AppID（开发管理-开发设置）；
第一步：
打开并登录微信开发者工具，新建小程序项目，填入 AppID，后端服务选择“微信云开发”并勾选同意"云开发服务条款"
第二步：
每个环境相互隔离，拥有唯一的环境 ID，包含独立的数据库实例、存储空间、云函数配置等资源；获取到环境ID后，就可以进行云开发了。如下：
` const db = wx.cloud.database()
// 将用户信息添加到数据库
db.collection('adminlist').add({
data:{
"avatarUrl":res.userInfo.avatarUrl,
"nickName":res.userInfo.nickName,
"openid":app.globalData.openid,
"hasUserInfo":true
}
}) `
数据库拥有基本的增删改查等功能，上面代码是创建添加云数据库数据，我们也可以获取引用数据库数据，如下：
`// 获取数据库内容——按时间排序
var that=this
db.collection("notice").orderBy('date','desc').get({
success: function(res) {
console.log(res.data)
that.setData({
noticeList:res.data
})
console.log(that.data.noticeList);
}
}) `
以上是在js页面对于云数据库的调用，我们还可以直接在wxml页面使用云开发的云存储功能，如下：
<image wx:if="{{!hasUserInfo}}" bindtap="getuser" class="user-img" src="cloud://yunkaifa001-5gjrdo926965af36.7975-yunkaifa001-5gjrdo926965af36-1312373673/ico/morentouxiang.png">
项目视频地址：
本项目逻辑结构简单、页面简洁、功能单一，是属于云开发入门级别的项目。
本项目共有九个页面，下边导航栏中有三个页面，分别可以直接跳转到首页面、工作人员通讯录界面和用户界面。
功能实现：
1) 使用wx:if实现判断用户有无登录后的头像及昵称切换。
` <view class="user-all">
<image wx:if="{{hasUserInfo}}" class="user-img" src="{{avatarUrl}}">
<image wx:if="{{!hasUserInfo}}" bindtap="getuser" class="user-img" src="cloud://yunkaifa001-5gjrdo926965af36.7975-yunkaifa001-5gjrdo926965af36-1312373673/ico/morentouxiang.png">
<text class="user-name" wx:if="{{hasUserInfo}}">{{nickName}}
<text bindtap="getuser" class="user-name" wx:if="{{!hasUserInfo}}">点击获取用户信息
`
2) 使用data和wx.getUserProfile方法获取用户数据
` data: {
avatarUrl:'',
nickName:'',
hasUserInfo: false,//是否拿到用户信息
},
getuser() {
wx.getUserProfile({
desc: '获取头像昵称',
success: (res) => {
this.setData({
nickName: res.userInfo.nickName,
avatarUrl: res.userInfo.avatarUrl,
hasUserInfo: true
})
// 全局配置昵称和头像
app.globalData.nickName = res.userInfo.nickName,
app.globalData.avatarUrl = res.userInfo.avatarUrl,
app.globalData.hasUserInfo = true,
console.log(res);
// 将用户信息添加到数据库
db.collection('adminlist').add({
data: {
"avatarUrl": res.userInfo.avatarUrl,
"nickName": res.userInfo.nickName,
"openid": app.globalData.openid,
"hasUserInfo": true
}
})
},
})
},`
功能实现：
1) 更改data和云数据库中的用户信息
` data: {
nickName: '请输入用户昵称',
avatarUrl: defaultAvatarUrl,
self_introduction: '请输入您的介绍',
_id: ''
},
// 判断有无更改
btnsub(res) {
console.log(res);
if (res.detail.value.nickName != '') {
var nickName = res.detail.value.nickName
} else {
var nickName = nickName
}
if (res.detail.value.self_introduction != '') {
var self_introduction = res.detail.value.self_introduction;
} else {
var self_introduction = self_introduction
}
// 更新数据库
db.collection("adminlist").doc(id).update({
data: {
nickName: nickName,
self_introduction: self_introduction
}
}).then(res => {
console.log(res);
})
},
// 退出登录
loginout() {
wx.setStorageSync('token', ''); //将token置空
// 删除数据库
db.collection('adminlist').doc(id).remove({
success: function (res) {
console.log(res.data)
}
})
wx.reLaunch({
url: '/pages/personal/personal', //跳去登录页
})
},`
功能实现：
1) 在云数据库中录入员工通讯录，在这个页面可以查找数据库，根据模糊查询查询到相应数据库信息后在此页面遍历出来
` // 获取输入的值
usernickNameInput(e) {
this.setData({
usernickName: e.detail.value,
searchUser: {},
});
},
// 离开输入框时获取该 usernickName 对应的个人资料并展现
getuserProfile() {
var that = this
console.log(this.data.usernickName);
db.collection("workinguser").where({
// work:this.data.usernickName
work: db.RegExp({
regexp: this.data.usernickName,
options: 'i'
})
}).get({
success: function (res) {
console.log(res);
that.setData({
'workList': res.data
})
console.log(that.data);
console.log(that.data.workList);
}
})
// 因为data.user_id变化没那么快，设置一秒后判断
setTimeout(() => {
if (this.data.workList.length > 0) {
console.log(123);
} else {
wx.showToast({
title: '查无此人',
icon: 'none',
});;
}
}, 1000);
} `
物业费用功能因为没有营业执照，所以无法开通收费功能，只有“社区公告”、“公共保修”、“信息采集”功能是完整的。
功能实现：
1) 跳转页面
` // 跳转页面
go_notice() {
wx.navigateTo({
url: '/pages/notice/notice',
})
},
go_repair() {
wx.navigateTo({
url: '/pages/repair/repair',
})
},
go_message() {
wx.navigateTo({
url: '/pages/message/message',
})
},`
功能实现：
1) 相关信息都在数据库中，此页面从数据库中获取数据并遍历展现
`// 获取数据库内容——按时间排序
var that=this
db.collection("notice").orderBy('date','desc').get({
success: function(res) {
console.log(res.data)
that.setData({
noticeList:res.data
})
console.log(that.data.noticeList);
}
})`
2) 点击某公告后，获取公告外部页面链接，系统不能直接跳转到外部页面，所以需要通过传参到内部一个go页面跳转到外部页面
` // 跳转界面_传参
go(e) {
console.log(e.currentTarget.dataset.url);
let url = e.currentTarget.dataset.url
wx.navigateTo({
url: '/pages/go/go?url=' + url
})
},`
Go页面：
`<web-view src="{{url}}">
data: {
url:'123'
},
var url = options.url;
console.log(options.url)
//传过来的值可以，赋值给data里面
this.setData({
'url':url
})`
两者功能相似，以公共保修页面的信息提交功能为例
功能实现：
1) 实时获取用户输入的值并显示在页面上，提交时将信息传入数据库
`data: {
name: '',
phone: '',
thing: '',
place: '',
situation: ''
},
// 获取输入的值
nameinput(e) {
this.setData({
'name': e.detail.value
});
},
phoneinput(e) {
this.setData({
'phone': e.detail.value
});
},
thinginput(e) {
this.setData({
'thing': e.detail.value
});
},
situationinput(e) {
this.setData({
'situation': e.detail.value
});
},
placeinput(e) {
this.setData({
'place': e.detail.value
});
},
// 提交
sumbit() {
var that = this
console.log(this.data);
// 数据库录入
db.collection('repair').add({
data: {
name: that.data.name,
phone: that.data.phone,
thing: that.data.thing,
place: that.data.place,
situation: that.data.situation,
},
success: function (res) {
console.log(res);
wx.showToast({
title: '提交成功',
icon: 'none',
});
that.setData({
name: '',
phone: '',
thing: '',
place: '',
situation: ''
})
}
})
},`
五、总结
本款小程序是我在大二时学习小程序及云开发时的第一个作品，功能简陋、逻辑简单，页面简洁。
同时，首次使用云开发的我也终于明白了云开发的好处：整个项目由我独立实现前端开发、后端开发、接口联调等工作，且无需太多后端知识。这比之以往前端用后台提供的API接口然后不断报错、调试、沟通的开发过程要简便许多。
