微信小程序--事务助理

最编程 2024-03-20 16:51:42

...

参考资料：
微信小程序api地址 https://developers.weixin.qq.com/miniprogram/dev/api/open.html#wxgetuserinfoobject

我的github项目地址：https://github.com/Feiyu123/EventAssistant

由于最近小程序比较火, 所以特地研究了一下小程序

一.效果图以及目录：

首页显示日历，
选中日期，点击右下角+号可增加事项，点击右下角铅笔可编辑事项。

微信小程序效果图1.png

新增或者编辑事项，可输入标题和内容以及事项等级，绿色代表一般，黄色代表紧急，红色代表非常紧急。

微信小程序效果图2.png

微信小程序目录结构如下：

微信小程序目录结构.png

每个目录中都有app.js , app.json , app.wxss , project.config.json文件以及pages，utils目录.各个目录的说明如下

二.文件以及目录说明

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。

import { log, promiseHandle } from 'utils/util';

App({
    getUserInfo(cb) {
        if (typeof cb !== "function") return;
        let that = this;
        if (that.globalData.userInfo) {
            cb(that.globalData.userInfo);
        } else {
            promiseHandle(wx.login).then(() => promiseHandle(wx.getUserInfo)).then(res => {
                that.globalData.userInfo = res.userInfo;
                cb(that.globalData.userInfo);
            }).catch(err => {
                log(err);
            });
        }
    },

    globalData: {
        userInfo: null
    },

    //自定义配置
    settings: {
        debug: true, //是否调试模式
        moreLink: 'http://github.com/oopsguy'
    }
});

2.app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。

{
  "pages":[
    "pages/index/index",  //首页目录
    "pages/detail/detail"  // 详情页目录
  ],
  "window":{
    "backgroundTextStyle":"light", //背景文字样式
    "navigationBarBackgroundColor": "#E14848", //导航栏背景颜色
    "navigationBarTitleText": "事项助手", // 导航栏文字标题
    "navigationBarTextStyle":"white" // 导航栏文字样式
  }
}

3.app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

page {
  font-family: 'microsoft yahei ui';
  font-size: 28rpx;
  background-color: #1D1D26;
  color: #FFF;
}

/*float action*/
.float-container {
  position: fixed;
  bottom: 40rpx;
  right: 40rpx;
  overflow: hidden;
}
.float-action {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, .5);
  background: #E14848;
  z-index: 100;
  text-align: center;
  opacity: .5;
  margin-left: 40rpx;
  float: right;
}
.float-action:active {
  opacity: 1
}
.float-action image {
    width: 60rpx;
    height: 60rpx;
    margin-top: 20rpx;
}

.bg-normal {
  background: #46BC62 !important;
}
.bg-warning {
  background: #ECAA5B !important;
}
.bg-danger {
  background: #E14848 !important;
}

.color-primary {
  color: #46BC62 !important;
}
.color-warning {
  color: #ECAA5B !important;
}
.color-danger {
  color: #E14848 !important;
}

.border-normal {
  border: 2rpx solid #46BC62 !important;
}
.border-warning {
  border: 2rpx solid #ECAA5B !important;
}
.border-danger {
  border: 2rpx solid #E14848 !important;
}

.text-center {
  text-align: center !important;
}

4.pages目录是存放首页以及其他详情页信息的目录

存放首页及详情页目录.png

一般每个目录会包含 js, json, wxml 和 wxss等文件
detail.js文件类似于javascript用于处理数据交换和转移，页面初始化和跳转函数
detail.json文件用于控制导航栏的标题，样式，背景颜色等
detail.wxml文件类似于html用于展示页面
detail.wxss文件类似于css文件用于控制页面样式

5.utils目录一般用于放js工具用，可以放js插件或者自制js工具插件

js工具插件.png

bluebird.js是js开源插件，Promise异步代码实现控制流
uitl.js导入开源插件的Promise实现自封装函数

import Promise from 'bluebird';

function formatTime(date) {
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()

    let hour = date.getHours()
    let minute = date.getMinutes()
    let second = date.getSeconds()

    return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
}

function getDateStr(date) {
    if (!date) return '';
    return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
}

/**
 * 生成GUID序列号
 * @returns {string} GUID
 */
function guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        let r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

/**
 * 记录日志
 * @param {Mixed} 记录的信息
 * @returns {Void}
 */
function log(msg) {
    if (!msg) return;
    if (getApp().settings['debug'])
        console.log(msg);
    let logs = wx.getStorageSync('logs') || [];
    logs.unshift(msg)
    wx.setStorageSync('logs', logs)
}

/**
 * @param {Function} func 接口
 * @param {Object} options 接口参数
 * @returns {Promise} Promise对象
*/
function promiseHandle(func, options) {
    options = options || {};
    return new Promise((resolve, reject) => {
        if (typeof func !== 'function')
            reject();
        options.success = resolve;
        options.fail = reject;
        func(options);
    });
}

module.exports = {
    formatTime: formatTime,
    guid: guid,
    log: log,
    promiseHandle: promiseHandle,
    getDateStr: getDateStr,
    formatNumber: formatNumber
}

6.images目录用于存放图片

images存放图片.png

7.datas目录用于存放数据model和service

datas目录用于存放数据.png

Config.js是数据模型

module.exports = {
    ITEMS_SAVE_KEY: 'todo_item_save_Key',
    LEVEL: {
        normal: 1,
        warning: 2,
        danger: 3
    }
};

DataRepository.js是数据仓库，类似于dao层，实现增删改查

import Config from 'Config';
import { guid, log, promiseHandle } from '../utils/util';

class DataRepository {

    /**
     * 添加数据
     * @param {Object} 添加的数据
     * @returns {Promise} 
     */
    static addData(data) {
        if (!data) return false;
        data['_id'] = guid();
        return DataRepository.findAllData().then(allData => {
            allData = allData || [];
            allData.unshift(data);
            wx.setStorage({ key: Config.ITEMS_SAVE_KEY, data: allData });
        });
    }

    /**
     * 删除数据
     * @param {string} id 数据项idid
     * @returns {Promise}
     */
    static removeData(id) {
        return DataRepository.findAllData().then(data => {
            if (!data) return;
            for (let idx = 0, len = data.length; idx < len; idx++) {
                if (data[idx] && data[idx]['_id'] == id) {
                    data.splice(idx, 1);
                    break;
                }
            }
            wx.setStorage({ key: Config.ITEMS_SAVE_KEY, data: data });
        });
    }

    /**
     * 批量删除数据
     * @param {Array} range id集合
     * @returns {Promise}
     */
    static removeRange(range) {
        if (!range) return;
        return DataRepository.findAllData().then(data => {
            if (!data) return;
            let indexs = [];
            for (let rIdx = 0, rLen = range.length; rIdx < rLen; rIdx++) {
                for (let idx = 0, len = data.length; idx < len; idx++) {
                    if (data[idx] && data[idx]['_id'] == range[rIdx]) {
                        indexs.push(idx);
                        break;
                    }
                }
            }

            let tmpIdx = 0;
            indexs.forEach(item => {
                data.splice(item - tmpIdx, 1);
                tmpIdx++;
            });
            wx.setStorage({ key: Config.ITEMS_SAVE_KEY, data: data });
        });

    }

    /**
     * 更新数据
     * @param {Object} data 数据
     * @returns {Promise} 
     */
    static saveData(data) {
        if (!data || !data['_id']) return false;
        return DataRepository.findAllData().then(allData => {
            if (!allData) return false;
            for (let idx = 0, len = allData.length; i < len; idx++) {
                if (allData[idx] && allData[idx]['_id'] == data['_id']) {
                    allData[idx] = data;
                    break;
                }
            }
            wx.setStorage({ key: Config.ITEMS_SAVE_KEY, data: data });
        });

    }

    /**
     * 获取所有数据
     * @returns {Promise} Promise实例
     */
    static findAllData() {
        return promiseHandle(wx.getStorage, { key: Config.ITEMS_SAVE_KEY }).then(res => res.data ? res.data : []).catch(ex => {
            log(ex);
        });
    }

    /**
     * 查找数据
     * @param {Function} 回调
     * @returns {Promise} Promise实例
     */
    static findBy(predicate) {
        return DataRepository.findAllData().then(data => {
            if (data) {
                data = data.filter(item => predicate(item));
            }
            return data;
        });
    }
}

module.exports = DataRepository;

DataService.js类似于service业务逻辑层，实现具体的逻辑业务

import DataRepository from 'DataRepository';
import { promiseHandle } from '../utils/util';

/**
 * 数据业务类
 */
class DataSerivce {

    constructor(props) {
        props = props || {};
        this.id = props['_id'] || 0;
        this.content = props['content'] || '';
        this.date = props['date'] || '';
        this.month = props['month'] || '';
        this.year = props['year'] || '';
        this.level = props['level'] || '';
        this.title = props['title'] || '';
    }

    /**
     * 保存当前对象数据
     */
    save() {
        if (this._checkProps()) {
            return DataRepository.addData({
                title: this.title,
                content: this.content,
                year: this.year,
                month: this.month,
                date: this.date,
                level: this.level,
                addDate: new Date().getTime()
            });
        }
    }

    /**
     * 获取所有事项数据
     */
    static findAll() {
        return DataRepository.findAllData()
            .then(data => data.data ? data.data : []);
    }

    /**
     * 通过id获取事项
     */
    static findById(id) {
        return DataRepository.findBy(item => item['_id'] == id)
            .then(items => (items && items.length > 0) ? items[0] : null);
    }

    /**
     * 根据id删除事项数据
     */
    delete() {
        return DataRepository.removeData(this.id);
    }

    /**
     * 批量删除数据
     * @param {Array} ids 事项Id集合
     */
    static deleteRange(ids) {
        return DataRepository.removeRange(ids);
    }

    /**
     * 根据日期查找所有符合条件的事项记录
     * @param {Date} date 日期对象
     * @returns {Array} 事项集合
     */
    static findByDate(date) {
        if (!date) return [];
        return DataRepository.findBy(item => {
            return item && item['date'] == date.getDate() &&
                item['month'] == date.getMonth() &&
                item['year'] == date.getFullYear();
        }).then(data => data);
    }

    _checkProps() {
        return this.title && this.level && this.date && this.year && this.month;
    }
}

module.exports = DataSerivce;

而pages/index目录下的detail.js类似于view层，处理和页面交换数据

import DataService from '../../datas/DataService';
import { getDateStr } from '../../utils/util';
import { LEVEL } from '../../datas/Config';

Page({
    data: {
        item: '',
        levelSelectData: [LEVEL.normal, LEVEL.warning, LEVEL.danger],
    },

    onLoad(option) {
        const { id } = option;
        let item = DataService.findById(id).then((item) => {
            item['addDate'] = getDateStr(new Date(item['addDate']));
            console.log(item)
            this.setData({
                item: item
            });
        });
    }
});

上一篇：微信小程序输入法（输入法）添加下划线--方法

下一篇： easyx 移动球

微信小程序--事务助理

一.效果图以及目录：

二.文件以及目录说明

微信小程序开发实践记录

宠物护理师微信小程序 - 开启报告分享

微信小程序转为应用程序并在应用程序市场上架

微信小程序网络视图与小程序通信

开发微信小程序，提供一站式体育服务

安卓应用程序跳转至微信

微信小程序现场认证

微信公众号--小程序实现人脸核身（人脸识别）

微信小程序 - 智能对话开发