一:生日管家项目
1、运行结果展示
2、代码
index.wxml
<!--index.wxml-->
<!-- 添加新朋友 -->
<van-button block type="default" bindtap="addFriend">添加新朋友</van-button>
<!-- 搜索框 -->
<van-search placeholder="请输入搜索关键词" show-action bind:search="onSearch" bind:cancel="onCancel" />
<!-- 好友列表 -->
<block wx:for='{{friendsList}}' wx:key='{{item._id}}'>
<van-card
centered
desc="{{item.date}}"
title="{{item.name}}"
thumb-link = '../detail/detail?id={{item._id}}&n2={{item.n}}'
thumb="{{item.avatar}}">
<view slot="footer">
距离下个生日
<text style="color:red;font-weight:bold;">{{item.n}}天</text>
</view>
</van-card>
</block>
index.js
//index.js
var utils = require('../../utils/utils.js')
const db = wx.cloud.database()
const birthday = db.collection('birthday')
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 自定义函数--添加好友信息
*/
addFriend: function (options) {
let id = 'new'
wx.navigateTo({
url: '../edit/edit?id=' + id
})
},
/**
* 自定义函数--获取好友列表
*/
getFriendsList: function () {
// 查找好友列表,按照出生日期升序排列(从小到大)
birthday.orderBy('date','asc').get({
success:res=>{
// console.log(res.data)
this.processData(res.data)
}
})
},
/**
* 自定义函数--取消搜索
*/
onCancel: function (e) {
// 获取好友列表
this.getFriendsList()
},
/**
* 自定义函数--搜索关键词
*/
onSearch: function (e) {
// 获取搜索关键词
let keyword = e.detail
// 获取正则表达式模糊查询
birthday.where({
name:db.RegExp({
regexp:keyword,
options:'i',
})
}).orderBy('date','asc').get({
success:res=>{
this.processData(res.data)
}
})
},
/**
* 自定义函数--处理数据(计算距离下个生日的天数)
*/
processData: function (list) {
for(var i = 0; i < list.length; i++){
// 获取不带年份的生日
let date = list[i].date
// 计算相差几天
let n = utils.getNextBrithday(date)
list[i].n = n
}
// console.log(list)
this.setData({
friendsList:list
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getFriendsList()
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
index.json
{
"usingComponents": {
"van-button": "/vant-weapp/dist/button/index",
"van-search": "/vant-weapp/dist/search/index",
"van-card": "/vant-weapp/dist/card/index"
}
}
edit.wxml
<!--pages/edit/edit.wxml-->
<form bindsubmit="onSubmit">
<!-- 第一行 -->
<van-row>
<van-col span="6">
<label>姓名</label>
</van-col>
<van-col span="18">
<input name="name" placeholder="请输入姓名" value="{{info.name}}"></input>
</van-col>
</van-row>
<!-- 第二行 -->
<van-row>
<van-col span="6">
<label>性别</label>
</van-col>
<van-col span="18">
<radio-group name="gender">
<radio color="#DE6E6D" value="1" checked="{{info.gender==1}}"/>男
<radio color="#DE6E6D" value="2" checked="{{info.gender==2}}"/>女
</radio-group>
</van-col>
</van-row>
<!-- 第三行 -->
<van-row>
<van-col span="6">
<label>生日</label>
</van-col>
<van-col span="18">
<picker name="birthday" mode="date" bindchange='dateChange' value="{{date}}">
<view>{{date}}</view>
</picker>
</van-col>
</van-row>
<!-- 第四行 -->
<van-row>
<van-col span="6">
<label>电话</label>
</van-col>
<van-col span="18">
<input name="tel" placeholder="请输入联系电话" value="{{info.tel}}"></input>
</van-col>
</van-row>
<!-- 第五行 -->
<van-row>
<van-col span="6">
<label>关系</label>
</van-col>
<van-col span="18">
<input name="relationship" placeholder="描述你们的关系" value="{{info.relationship}}"></input>
</van-col>
</van-row>
<!-- 第六行 -->
<van-row>
<van-col span="18" offset="3">
<button form-type="submit">保存记录</button>
</van-col>
<van-col span="18" offset="3">
<button bindtap="cancelEdit">取消修改</button>
</van-col>
</van-row>
</form>
edit.js
// pages/edit/edit.js
const db = wx.cloud.database()
const birthday = db.collection('birthday')
Page({
/**
* 页面的初始数据
*/
data: {
date:'点击设置生日'
},
/**
* 自定义函数--更新页面上显示的出生日期
*/
dateChange: function (e) {
this.setData({
date:e.detail.value
})
},
/**
* 自定义函数--取消修改并返回上一页
*/
cancelEdit: function () {
wx.navigateBack()
},
/**
* 自定义函数--提交表单
*/
onSubmit: function (e) {
// 获取表单中提交的数据
let info = e.detail.value
// 追加一个不带年份的生日信息
let date = info.birthday.substring(5)
info.date = date
// 获取好友id
let id = this.data.id
// 添加新朋友
if(id=='new'){
// 随机选择应该头像
let i = Math.ceil(Math.random()*9)
info.avatar = '/images/avatar/00' + i + '.jpg'
// 往云端数据库中添加当前好友信息
birthday.add({
data:info,
success:res=>{
wx.showToast({
title: '保存成功',
duration: 1000
})
// 成功后返回首页
wx.navigateBack()
},
fail:err=>{
// 失败提示
wx.showToast({
title: '保存失败',
duration: 3000
})
}
})
}
// 好友已经存在
else{
// 根据好友的id更新
birthday.doc(id).update({
data:info,
success:res=>{
// 成功提示
wx.showToast({
title: '保存成功',
duration: 1000
})
// 成功后返回上一页
wx.navigateBack()
},
fail:err=>{
// 失败提示
wx.showToast({
title: '保存失败',
duration: 3000
})
}
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取好友id
var id = options.id
// 更新id数据
this.setData({
id:id
})
// 如果好友已经存在
if(id!='new'){
// 根据好友id从云数据库获取好友信息
birthday.doc(id).get({
success:res=>{
this.setData({
info:res.data,
date:res.data.birthday
})
}
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
edit.json
{
"usingComponents": {
"van-row": "/vant-weapp/dist/row/index",
"van-col": "/vant-weapp/dist/col/index"
}
}
edit.wxss
/* pages/edit/edit.wxss */
/* 行布局 */
van-row{
/* 上下左右的距离 */
margin:20rpx 20rpx;
/* 文本居中显示 */
text-align:center;
}
/* 文本标签 */
label{
/* 上下左右距离 */
padding: 10rpx;
color: #DE6E6D;
line-height: 80rpx;
}
/* 文本输入框 */
input{
border:1rpx solid #DE6E6D;
width: 480rpx;
height: 80rpx;
/* 数值越大,圆弧的弧度越大 */
border-radius: 20rpx;
}
/* 单选框组 */
radio-group{
width: 480rpx;
line-height: 80rpx;
}
/* 单选框 */
radio{
margin: 0 20rpx;
}
/* 日期选择器 */
picker view{
width: 480rpx;
line-height: 80rpx;
}
/* 按钮特效 */
button{
margin: 20rpx;
color: white;
background-color: #DE6E6D;
}
detail.wxml
<!--pages/detail/detail.wxml-->
<!-- 顶部头像和昵称 -->
<view class="avatarBox">
<image src="{{info.avatar}}"></image>
<view>{{info.name}}</view>
</view>
<!-- 个人信息展示 -->
<van-cell-group>
<van-cell title="性别" value="{{info.gender == 1 ? '男' :'女'}}" />
<van-cell title="生日" value="{{info.birthday}}" />
<van-cell title="电话" value="{{info.tel}}" />
<van-cell title="关系" value="{{info.relationship}}" />
<van-cell title="距离出生已经" value="{{n1}}天" />
<van-cell title="下个生日还有" value="{{n2}}天" />
</van-cell-group>
<!-- 按钮区域 -->
<van-button block type="warning" bindtap="editFriend">修改</van-button>
<van-button block type="danger" bindtap="deleteFriend">删除</van-button>
detail.js
// pages/detail/detail.js
var utils = require('../../utils/utils.js')
const db = wx.cloud.database()
const birthday = db.collection('birthday')
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 自定义函数--编辑好友信息
*/
editFriend: function () {
// 获取当前好友id
let id = this.data.id
// 跳转到编辑页面并携带参数id
wx.navigateTo({
url: '../edit/edit?id=' + id,
})
},
/**
* 自定义函数--删除好友
*/
deleteFriend: function () {
// 获取好友id
let id = this.data.id
// 删除当前好友
birthday.doc(id).remove({
success:res=>{
// 删除成功后返回上一页
wx.navigateBack()
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取从首页传来的参数
// 好友id
let id = options.id
// 距离下个生日的天数
let n2 = options.n2
// 更新页面数据
this.setData({
id:id,
n2:n2
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// 获取当前好友id
let id = this.data.id
// 从云数据库中查找当前好友信息
birthday.doc(id).get({
success:res=>{
// 获取当前日期
let today = utils.getToday()
// 获取生日(带年份)
let b_day = res.data.birthday
// 计算距离出生的天数
let n1 = utils.dateDiff(b_day,today)
// 更新页面数据
this.setData({
info:res.data,
n1:n1
})
}
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
detail.json
{
"usingComponents": {
"van-button": "/vant-weapp/dist/button/index",
"van-cell": "/vant-weapp/dist/cell/index",
"van-cell-group": "/vant-weapp/dist/cell-group/index"
}
}
/* pages/detail/detail.wxss */
/* 头像和姓名区域 */
.avatarBox{
display: flex;
flex-direction: column;
align-items: center;
}
/* 头像图片 */
.avatarBox image{
width: 200rpx;
height: 200rpx;
margin: 20rpx;
}
/* 姓名文本 */
.avatarBox view{
margin-bottom: 50rpx;
}
app.json
{
"pages": [
"pages/index/index",
"pages/edit/edit",
"pages/detail/detail",
"pages/test/test",
"utils/utils"
],
"window": {
"navigationBarBackgroundColor": "#DE6E6D",
"navigationBarTitleText": "生日管家"
},
"sitemapLocation": "sitemap.json"
}
utils.js
// 自定义函数-获取当前格式化日期
function getToday(){
// 获取当前日期对象
var now = new Date()
// 获取4位数年份
var y = now.getFullYear()
// 获取月份
var m = now.getMonth()+1
// 获取日期
var d = now.getDate()
// 格式化日期
var today = y + '/' + m + '/' + d
return today
}
// 自定义函数-获取当前年份(4位数)
function getFullYear(){
// 获取当前日期对象
var now = new Date()
// 获取4位数年份
var y = now.getFullYear()
return y
}
// 自定义函数-计算两个日期之间的天数差
function dateDiff(sDate1,sDate2){
sDate1 = sDate1.replace(/-/g,'/')
sDate2 = sDate2.replace(/-/g,'/')
var oDate1 = new Date(sDate1)
var oDate2 = new Date(sDate2)
// 计算两个日期之间的天数差
var iDays = parseInt((oDate2-oDate1)/1000/3600/24)
return iDays
}
// 自定义函数-计算当前距离下个生日还有多少天
function getNextBrithday(b_day){
// 获取当天的日期
var today = getToday()
// 获取当前的年份(4位数)
var y = getFullYear()
// 计算当前距离生日还有多少天
var n = dateDiff(today,y + '-' + b_day)
// 如果今年生日已经过完
if(n<0){
// 获取明年的年份
y++
// 计算当前距离明年生日还有多少天
n = dateDiff(today,y + '-' + b_day)
}
return n
}
module.exports={
getToday:getToday,
getFullYear:getFullYear,
dateDiff:dateDiff,
getNextBrithday:getNextBrithday
}
二、云函数的使用
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.cloud.callFunction({
name:"getFriendsListMsg",
data:{
num:3
}
})
.then(res=>{
console.log(res.result.data)
})
},
cloudfuntions/getFriendsListMsg/index.js
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database();
const birthday = db.collection('birthday')
// 云函数入口函数
exports.main = async (event, context) => {
var num = event.num
return await birthday.limit(num).get()
}