手把手教你实现一个微信小程序备忘录

时间  2019-11-06
标签 手把手 实现 一个 微信 程序 备忘录 繁體版
原文   原文链接 
本文主要讲实现这个微信小程序备忘录的步骤，和其中遇到的一些坑。话很少说，直接上图。
复制代码

一共3个页面，首页，编辑页面和受权页面。
复制代码
  • 首页主要展现当前日历，和备忘录列表
  • 受权页面主要获取用户信息（包括头像，openid，昵称）
  • 编辑页面主要是保存当前用户编辑的内容，同时也提供删除。
- 前端使用wepy框架进行搭建，开发更加顺手，提供打包等功能。
    - 后端使用的就是小程序提供的云函数
    - 主要想要实现增，删，改，查等功能
复制代码

日历组件的实现

目前小程序的官方并为提供日历的官方组件，全部咱们只能本身实现一套日历组件。基本的难点就是在计算日历上面，对应年，月，日。

思路：
- 首先定义1-12个月的数组，对应的是相关的天数。
- 每一年的2月份须要单独计算天数，须要判断是否为闰年
- 日历一共分为7列，周天到周六，行数为5行或者是6行，这个能够用flex布局。
- 计算每月的1号在周几，就能够判断出前面空白的部分有几个，而后依次填入。
- 计算每月的最后一天在周几，就能够判断出后面空白的部分有几个。
复制代码
getList() {
        let year = this.year
        let month = this.month - 1
        let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

        //计算是否在闰年
        if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
            daysInMonth[1] = 29;
        }
        // 计算年月的1号是星期几
        let targetDay = new Date(year, month, 1).getDay();

        let total_calendar_list = [];
        let preNum = targetDay;

        // 这里就是判断在1号的前面有几个空白的部分
        if (targetDay > 0) {
            for (let i = 0; i < preNum; i++) {
                let obj = {
                    type: "pre",
                    content: " "
                };
                total_calendar_list.push(obj);
            }
        }
        for (let i = 0; i < daysInMonth[month]; i++) {
              let obj = {
                  type: "normal",
                  content: i + 1
              };
                  total_calendar_list.push(obj);
          }

        // 这一行代码的意思是计算每月的最后一天后天有几个空白的部分
        // new Date(year, month+1, 0).getDay() 得到每个月的最后一天在周几
        let nextNum = 6 - new Date(year, month+1, 0).getDay()
    
        // 而后依次填入空白
        for (let i = 0; i < nextNum; i++) {
            let obj = {
                type: "next",
                content: " "
            };
            total_calendar_list.push(obj);
        }
        this.list = total_calendar_list
        return total_calendar_list;
      }
    
复制代码
基本上前期的页面工做，就在绘制日历上面，而后还有一些UI部分，能够本身设计。接下来咱们说一说云函数的部分。
复制代码

受权

<template>
  <view class="contain-box">
    <view class="img-box">
      <img src="../assets/img/wechat.png" class="img">
    </view>
    <view class="content-box" v-if="canIUse">
      <view class="frist-title">
        申请获取如下权限:
      </view>
      <view class="sec-title">
        得到您的公开信息（昵称，头像等）
      </view>
      <button class="bottom" type="primary" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
        受权登陆
      </button>
    </view>
    <view v-else>
      请升级微信版本
    </view>
  </view>
</template>

<script>
import wepy from '@wepy/core'
wepy.page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  methods: {
    bindGetUserInfo(e) {
      if (e.$wx.detail.userInfo) {
        wx.navigateBack({
          delta: 1
        })
      } else {
        wx.showModal({
            title: '警告',
            content: '您点击了拒绝受权，将没法进入小程序，请受权以后再进入!!!',
            showCancel: false,
            confirmText: '返回受权',
            success: function(res) {
                if (res.confirm) {
                  return
                }
            }
        });
      }
    }
  }
})
</script>

<style lang="less">
page{
  background-color: #1F1F1F;
  color: #D6D6D6;
}
.contain-box{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content-box{
  width: 80%;
  margin-bottom: 200px;
  border-top: 0.5px solid #eee;
  padding-top:50px;
  .frist-title{
    font-size: 18px;
  }
  .sec-title{
    font-size: 14px;
    font-weight: 300;
    margin-top: 10px;
  }
  .bottom{
    border-radius: 80px;
    margin-top: 50px;
  }
}
.img-box{
  text-align:center;
  margin-bottom: 30px;
  .img{
    width: 100px;
    height: 100px;
  }
}
</style>
<config>
{
    navigationBarTitleText: '微信受权',
    backgroundColor: '#1F1F1F',
}
</config>

复制代码
微信受权，须要用户点击按钮，才能进行受权
 <button class="bottom" type="primary" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
 
 须要实现bindGetUserInfo方法 用户信息在wx.detail.userInfo,由于我这里使用的是wepy，这样写。
 bindGetUserInfo(e) {
  if (e.$wx.detail.userInfo) {
    wx.navigateBack({
      delta: 1
    })
  } else {
    wx.showModal({
        title: '警告',
        content: '您点击了拒绝受权，将没法进入小程序，请受权以后再进入!!!',
        showCancel: false,
        confirmText: '返回受权',
        success: function(res) {
            if (res.confirm) {
              return
            }
        }
    });
  }
}
复制代码

云函数的实现。

首先明确，咱们须要几个接口，分别作什么用处。
- 须要首页的获取列表的接口 getlist
- 须要详情页面的接口  getdetail
- 须要保存兼更新的接口  save
- 须要删除的接口  delete

基本上这些接口的实现都是对数据库进行操做，增，删，改，查

- 数据库查找
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()

<!--经过参数去查找-->
db.collection('usercontent').where({
    openId: event.openId,
    year: parseInt(event.year),
    month: parseInt(event.month),
    day: parseInt(event.day)
  })
  .get()
  .then(res => {
    return res
  })
  .catch(console.error)
  
<!--经过_id查找-->  
db.collection('usercontent')
.doc(event.id)
.get()
.then(res=>{
  return res
})
.catch(console.error)  

- 数据库增长&&修改
if (event.id) {
    <!--更新操做-->
    return db.collection('usercontent').doc(event.id).update({
      data: payload
    })
    .then(res => {
      console.log('^^^^^^^^^^^^^^^^^'+ res + '^^^^^^^^^^^^^^^^^')
      return {
        code: 200,
        message: '更新成功'
      }
    })
    .catch(console.error)
} else {
    <!--保存操做-->
    return db.collection('usercontent').add({
      data: payload
    })
    .then(res => {
      console.log('^^^^^^^^^^^^^^^^^'+ res + '^^^^^^^^^^^^^^^^^')
      return {
        code: 200,
        message: '保存成功'
      }
    })
    .catch(console.error)
}

 - 数据库删除
 db.collection('usercontent')
    .doc(event.id)
    .remove()
    .then(res => {
      return res
    })
    .catch(console.error)
复制代码

前端调用云函数

切记调用以前须要调用初始化函数，可是仅需在页面初始化的时候，调用一次便可，不须要重复调用
    wx.cloud.init()
    
    wx.cloud.callFunction({
          name: 'getall',
          data: payload,
          success: res => {
            console.log('[云函数] [getalllist] user openid: ', res.result)
            this.flagList = res.result
          },
          fail: err => {
            wx.showModal({
              title: '警告',
              content: '服务异常，请从新调用[getalllist]',
              showCancel: false,
              confirmText: '肯定',
              success: function(res) {
                if (res.confirm) {
                  return
                }
              }
            });
          }
        })
复制代码

问题

- 头像问题，在前一个版本上线的时候，用户已经受权的状况下会出现头像丢失的问题，查了一下，发现是当用户从新打开的时候，页面data中的值会进行初始化，可是全局的用户的信息并不会初始化，因此解决方法。
if (this.$app.$options.globalData.userInfo && this.$app.$options.globalData.userInfo.openid) {
  this.headerImg = this.$app.$options.globalData.userInfo.avatarUrl
  this.getAllList()
  this.getWorkList()
  return
} else {
  this.getUserInfo()
}

- 上传问题，审核过程当中，一直审核不经过，由于我是我的的开发者，不容许发布备忘录相关的小程序，
  其实微信的审核很严，基本上有输入框的小程序，都会审核不经过。因此仍是建议使用企业帐号。
- 若是是在没有企业的帐号，也能够将微信的类别选为我的容许发布的类别，若是仍是不行的，
  也能够在后台加一个开关，审核期间不显示相应的组件就能够了。
复制代码

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程