微信小程序---生日管家项目及云函数的基本使用

最新推荐文章于 2022-10-28 13:56:23 发布
最新推荐文章于 2022-10-28 13:56:23 发布
阅读量1.6k 收藏 11
点赞数
分类专栏： 笔记 文章标签： javascript css node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ELSA001/article/details/109564756
版权

一：生日管家项目

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()
}
钟良堂
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
生日管家源代码
04-23
生日管家以生日记录提醒为切入点，帮助用户增强与亲友的情感维系，围绕各类社交场景解决用户的消费需求。
微信小程序生日当天提醒
10-23
微信小程序的生日祝福提醒，组件封装，可传入自己需要的数据，样式已写好，下载即用，谢谢大家支持！
微信小程序-关于日期选择器（input）
weixin_33928467的博客
06-29 6956
小程序并没有input带有日期组件（只有picker组件带日期），要不自创，要不就用picker把选中的值放入input当中      wxml   js       因为会触发input，所以禁用它就可以了    ...
基于android的生日小助手,毕业答辩-基于Android的生日管家App的设计与实现
weixin_31110189的博客
05-29 705
基于Android的生日管家软件 绪论 总结 软件设计和实现 目录 数据库 后台设计和实现 课题要解决的问题 课题来源和价值 我的App与市面上App对比 随着社会的发展 生活节奏加快 工作繁忙的商务人士经常忘记商业伙伴或亲友的生日 以致于错失送上祝福的机会 因此急需一款操作方便 功能实用的提醒软件 目前Android市场上存在类似的提醒软件 但是大部分功能比较单一 用户体验一般 很多生日提醒软件...
用生日便签小程序，帮你记住每一个重要的日子
王永存
03-29 7878
生日便签小程序，提供生日提醒、纪念日提醒、倒数日提醒等服务，帮你记住每一个重要的日子。
uni-app使用微信小程序云函数的步骤示例
10-15
首先，为了使用微信小程序云函数，我们需要在uni-app项目中创建一个云函数目录。例如，可以创建名为`functions`的文件夹，并在其中放入任意文件，如`new_file.css`，确保在编译为小程序时，`cloudfunctions`文件夹会...
微信小程序-校园综合服务平台系统源码.zip
05-28
微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务...
微信小程序-51报名管家小程序源码及项目截图
06-08
通过研究51报名管家小程序的源码，开发者不仅能深入理解微信小程序的开发技术，还能借鉴其设计思路，为自己的项目提供参考。同时，对于希望从事微信小程序开发的初学者来说，这是一个很好的实践案例，有助于快速上手...
【微信小程序-毕设期末大作业】源码电商类微信小程序
最新发布
04-25
【微信小程序-毕设期末大作业】源码电商类微信小程序 【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序...
【微信小程序-毕设期末大作业】仿网易云音乐微信小程序源码.zip
05-05
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
产品经理也需要知道的运营相关知识（上篇）
知识库
10-23 520
一、运营的概念及分类 1.能够进行产品推广、促进用户使用、提高用户认知的手段都是运营。 2.运营分为：内容运营、用户运营、活动运营 内容运营的核心工作包括：1.持续制作、编辑及推荐对用户有价值的内容，保证用户可以在产品中获取这些信息；2.根据KPI的设计，降低或者提高用户获取内容的成本；3.协助网站（产品）获利。 用户运营核心内容即为：开源（拉动新用户）、节流（防止用户流失与流失用户挽回）...
uni-app微信小程序——商城（5）——购物车
徐小硕—心之所向，素履以往
08-12 3591
基于Vue语法，使用uni-app框架来实现微信小程序中的购物车功能。 实现购物车的全选，多选，计算总价，删除商品等功能。 结合使用VantWeapp微信小程序前端框架来搭建购物车页面。 效果图如下： 效果视频如下： 微信小程序购物车录屏 百度云视频，链接：https://pan.baidu.com/s/1QQHIIT58woini-ggPmrzIA 提取码：xzs8 其中单个的商品可以使用左滑进行删除，视频没有体现出来，但是功能还是齐全的。 下面是代码部门： <temp..
微信小程序云开发函数处理时间日期总是出问题
Ximerr的博客
05-12 2155
问题描述：云函数测试时输出的时间和前端请求得到的时间不一样，相差8个小时，数据库使用date类型的对象。 解决方法： 云函数中的时区为 UTC+0，不是 UTC+8，在云函数中使用时间时需特别注意。如果需要默认 UTC+8，可以配置函数的环境变量，设置TZ为asia/shanghai。（https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/notice.html） 在时间后面加上Z是...
小程序开发常见的功能函数
serserse的博客
10-28 691
小程序，微信小程序，js，常用函数，前端
修改微信小程序官方picker-view日期选择器
moyan的博客
11-28 4207
项目需求截图，选择出生日期的时候需要用到微信的picker-view日期选择器  然后就发现官方picker-view组件有一些问题：  1、初始化日期不是当前日期  2、选择不同月份，日期都是从1-31号（其实不同月份 天数不同）  3、项目要求所选日期不能大于当前日期（既不能选择未来的日期）  在官方代码上，根据项目需求做了些修改 wxml部分 &lt;view class="birth...
Vant 在微信小程序中的坑 Cell
12-14 8233
官方文档中的使用插槽 如以上用法不能满足你的需求，可以使用插槽来自定义内容 <van-cell value="内容" is-link> <!-- 使用 title 插槽来自定义标题 --> <template slot="title"> <span class="custom-title">单元格</span> ...
thumb指令和arm指令
吾生也有涯，而知也无涯
10-12 5097
参考https://www.embedded.com/introduction-to-arm-thumb/ 一、为什么一个芯片需要thumb和arm两套指令集 许多复杂的功能在复杂指令集（CISC）处理器上执行只需要单一的一条指令，即可，虽然可能有点慢，在精简指令集处理器上可能需要多条指令，所以在精简指令集（RISC）CPU上为了减少额外的指令对内存的消耗，考虑引入thumb指令集到处理器。 现在最受欢迎的32位微处理器许多都使用RISC技术，不像CISC处理器，RISC引擎每一个时钟周期（个人感觉应
thumb长跳转指令（BL）机器码详解
一个程序员的自我修炼
09-21 6680
最近因为工作的原因，经常接触到长跳转指令，但是总是弄不明白，跳转的目标地址怎么得来的 经过多方面的资料查找，和自己的反复推算，现在总算弄明白了 先上例子： 下面是几个实际遇到的机器码机器对应的反汇编 示例一 3950a4: f13d feaa =>bl 4d2dfc 示例二 395082: f13d fe40 =>bl 4d2d06 示例三 395044: F7FF FFAc =>bl
vant 修改 placeholder 样式
小糖穿越火线
08-07 8148
::-webkit-input-placeholder { color: #ffffff; font-weight: 400; } /* Firefox 4-18 */ :-moz-placeholder { color: #ffffff; font-weight: 400; } /* Firefox 19-50 */ ::-moz-placeholder { color: #ffffff; font-weight: 400; } /* - Internet Explorer
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值