手把手教你實現一個微信小程序備忘錄

時間  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教程