gitweixin – 第28页 – 精品微信小程序开发门户，代码全部亲测可用

6月 26,2018

事项助手小程序

这次介绍的是一个比较简单的小应用事项助手，其实跟事项也不沾多少边，只是作为辅助功能，只有数据的添加和删除，主要内容是日历这块内容。日历组件在web应用中应用非常广泛，插件也非常丰富，但是小程序不支持传统的插件写法，而是以数据驱动内容。

大部分的日历选择器都是差不多的，能显示当前的年份、月份和天数，可以选择某天、某月或者某年，我们可以打开操作系统中自带的日历观察一番。

日历的布局大同小异，本次案例的布局也是中规中矩，比较传统，头部显示当前年份月份，头部的左右个显示一个翻页按钮，跳转到上一月和下一月，下半部分显示当月的天数列表，由于每月的天数可能不一样，列表的格数是固定的，所以当月的天数显示使用高亮，其余的使用偏灰色彩。

事项助手首页

预备

本次案例用到了ES6，先来了解一下案列中用到的几个写法。本人也是顺带学习顺带编写，可能代码中还存在部分老的写法。

变量

ES6中声明变量可以用let声明变量，用const声明常量，即不可改变的量。

let version = '1.0.0';
const weekday = 7;

version = '2.0.0';
weekday = 8; //错误，用const声明的常量，不能修改值

本习惯用大写字母和下划线的组合方式来声明全局的常量

const CONFIG_COLOR = '#FAFAFA';

对象方法属性

小程序的每一个页面都有一个相对应的js文件，里面必不可少的就是Page函数，Page函数接受的参数是一个对象，我们经常使用的写法就是：

Page({
    data: {
        userAvatar: './images/avatar.png',
        userName: 'Oopsguy'
    },
    onLoad: function() {
        //....
    },
    onReady: function() {
        //....
    }
});

现在换做ES6的写法，我们可以这样：

Page({
    data: {
        userAvatar: './images/avatar.png',
        userName: 'Oopsguy'
    },
    onLoad() {
        //....
    },
    onReady() {
        //....
    }
});

我们可以把以前的键值写法省略掉，而且function声明也不需要了。

类

ES6中拥有了类这一概念，声明类的方式很简单，跟其他语言一样，差别不大：

class Animal {
    constructor() {

    }

    eat() {

    }

    static doSomething(param) {
        //...
    }
}

module.exports = Animal;

class关键字用于声明类，constructor是构造函数，static修饰静态方法。不能理解？我们看一下以前的js的简单写法：

var Animal = function() {

};

Animal.prototype.eat = function() {

};

Animal.doSomething = function(param) {

};

module.exports = Animal;

简单的调用示例

let animal = new Animal();
animal.eat();
//静态方法
Animal.doSomething('param');

这里只是简单的展示了一下不同点，更多的只是还是需要读者自己翻阅更多的资料来学习。

解构

其实本人对结构也不太懂怎样解释，简单的来说就是可以把一个数组的元素或者对象的属性分解出来，直接获取，哈哈，解释的比较勉强，还是看看示例吧。

let obj = {
    fullName: 'Xiao Ming',
    gender: 'male',
    role: 'admin'
};

let arr = ['elem1', 1, 30, 'arratElem3'];

let {fullName, role} = obj;
let [elem1, elem2] = arr;

console.log(fullName, role, elem1, elem2);

大家可能猜出了什么，看看输出结果：

> Xiao Ming admin elem1 1

我们只要把需要获取的属性或者元素别名指定解构体中，js会自动获取对应的属性或者下标对应的元素。这个新特性非常有用，比如我们需要在一个Pages data对象中一个属性获取对了属性值：

let year = this.data.year,
    month = this.data.month,
    day = this.data.day;

但是用解构的写法就很简洁：

let {year, month, day} = this.data;

再比如引入一个文件：

function getDate(dateStr) {
    if (dateStr) {
        return new Date(Date.parse(dateStr));
    }
    return new Date();
}

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)
}

module.exports = {
    getDate: getDate,
    log: log
};

现在引入并调用外部文件的方法：

import {log} from '../../utils/util';

log('Application initialized !!');

import...from...是ES6的引入模块方式，等同于小程序总的require，但import可以选择导入哪些子模块。

箭头函数（Arrow Function）

刚开始我也不知道js的箭头函数到底是什么东西，用了才发现，这特么就是lambda表达式么。箭头函数简化了函数的写法，但是还是跟普通的function有区别，主要是在作用域上。

比如我们需要请求网络：

wx.request({
  url: 'url', 
  header: {
      'Content-Type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
});

用函数还是可以简化一定的代码量，哈哈哈。

wx.request({
  url: 'url', 
  header: {
      'Content-Type': 'application/json'
  },
  success: (res) => {
    console.log(res.data)
  }
});

注意到那个success指向的回调函数了么，function关键字没了，被醒目的=>符号取代了。看到这里大家是不是认为以后我们写function就用箭头函数代替呢？答案是不一定，而且要非常小心！

function和箭头函数虽然看似一样，只是写法简化了，其实是不一样的，function声明的函数和箭头函数的作用域不同，这是一个不小心就变坑的地方。

Page({
    data: {
        windowHeight: 0
    },
    onLoad() {
        let _this = this;
        wx.getSystemInfo({
            success: function(res) {
                _this.setData({windowHeight: res.windowHeight});
            }
        });
    }
});

一般我们获取设备的屏幕高度差不多是这样的步骤，在页面刚加载的onLoad方法中通过wx.getSystemInfoAPI来获取设备的屏幕高度，由于success指向的回调函数作用域跟onLoad不一样，所以我们无法像onLoad函数体中直接写this.setData来设置值。我们可以定义一个临时变量指向this，然后再回调函数中调用。

哪箭头函数的写法有什么不一样呢？

Page({
    data: {
        windowHeight: 0
    },
    onLoad() {
        let _this = this;
        wx.getSystemInfo({
            success: (res) => {
                _this.setData({windowHeight: res.windowHeight});
            }
        });
    }
});

运行之后好像感觉没什么区别呀，都能正常执行，结果也一样。确实没什么区别，你甚至这样写都可以：

Page({
    data: {
        windowHeight: 0
    },
    onLoad() {
        wx.getSystemInfo({
            success: (res) => {
                this.setData({windowHeight: res.windowHeight});
            }
        });
    }
});

咦？这样写，this的指向的作用域不是不一样么？其实这就是要说明的，箭头函数是不绑定作用域的，不会改变当前this的作用域，既然这样，在箭头函数中的this就会根据作用域链来指向上一层的作用域，也就是onLoad的作用域，所以他们得到的结果都是一样的。

其实我个人的习惯是无论用普通的函数写法还是箭头函数的写法，都习惯声明临时的_this来指向需要的作用域，因为箭头函数没有绑定作用域，写的层次深了，感觉就会很乱，理解起来比较困难，在后面的案例中，我也会延续这个习惯。

Promise

写js经常写的东西除了数组对象就是回调函数，记不记得用jQuery的ajax用得特别爽，如果是多层嵌套调用的话，那些回调函数简直像盖楼梯一样壮观。现在Promise来了，我们再也不用为这些回调地狱发愁，用Promise来解决回调问题非常优雅，链式调用也非常的方便。

Promise是ES6内置的类，其使用简单，简化了异步编程的繁琐层次问题，比较简单的用法是：

new Promise((resolve, reject) => {
    //success
    //resolve();

    //error 
    //reject();
});

实例化一个Promise对象，它接受一个函数参数，此函数有两个回调参数，resolve和reject，如果正常执行使用resolve执行传递，如果是失败或者错误可以用reject来执行传递，其实他们就是一个状态的转换。可以暂时理解为success和fail。

来看一下简单的示例：

let ret = true;
let pro = new Promise((resolve, reject) => {
    ret ? resolve('true') : reject('false');
}).then((res) => {
    console.log(res);
    return 'SUCCESS';
}, (rej) => {
    console.log(rej);
    return 'ERROR';
}).then((success) => {
    console.log(success);
    let value = 0 / 1;
}, (error) => {
    console.log(error);
}).catch((ex) => {
    console.log(ex);
});

或许我们已经看出些什么了，实例化出一个Promise，根据ret的布尔值决定是否resolve执行正常回调流程还是执行reject回调走意外的流程，显然ret是true，当执行resolve时，传递了一个字符串参数true，可以看到实例化出来的Promise对象后面链式调用了很多then方法，其实then方法同样也是有resolve和reject两个回调参数，上层的Promise执行的回调传递到then函数中，Promise的resolve传递到then的resolve，同理reject也一样，之后我们发现最后一个catch函数，这是一个捕抓异常的函数，当流程发生异常，我们可以在catch方法中获取异常并处理。

可能解释的比较羞涩，看看下面例子，发出一个网络请求，获取用户头像，再把用户头像插入DOM中，再睡眠2000ms，再打印出SUCCESS，再睡眠3000ms，在alert出ERROR，再休眠1000ms，最后打印出ERROR。这…看起来有点丧心病狂，但只是举个例子：

$.get('/user/1/avatar', (data) => {
    $('#avatar img').attr('src', data['avatar']);
    setTimeout(() => {
        console.log('SUCCESS');
        setTimeout(() => {
            alert('ERROR');
            setTimeout(() => {
                console.log('ERROR');
            }, 1000);
        }, 3000)
    }, 2000);
});

一共有四个回调函数，也不算多，如果有十几个回调呢？直至是噩梦呀。一层一层的嵌套，看起来已经眼花了。那么Promise能做些什么改变呢？

function sleep(time) {
    return new Promise((resolve) => {
        setTimeout(resolve, time);
    });
}

new Promise((resolve) => {
    $.get('/user/1/avatar', resolve);
}).then((avatar) => {
    $('#avatar img').attr('src', avatar);
}).then(() => {
    return sleep(2000);
}).then(() => {
    console.log('SUCCESS');
    return sleep(3000);
}).then(() => {
    alert('ERROR');
    return sleep(1000);
}).then(() => {
    console.log('ERROR');
});

额…看起来怎么使用Promise代码量比不使用的还多呀。不要介意，嘿嘿，可能是我个人封装不精，但是使用Promise的代码可读性确实比上面的要好很多，而且我们不必写一堆的嵌套回调函数，在享受使用同步写法的待遇，又可以得到异步的功能，两全其美，这样的写法还是比较符合日常的思维方式，哈哈。

看看小程序中怎么应用，在小程序项目的app.js中，我们经常看见这段代码：

App({
    getUserInfo:function(cb){
        var that = this
        if(this.globalData.userInfo){
            typeof cb == "function" && cb(this.globalData.userInfo)
        }else{
            wx.login({
                success: function () {
                    wx.getUserInfo({
                        success: function (res) {
                            that.globalData.userInfo = res.userInfo
                            typeof cb == "function" && cb(that.globalData.userInfo)
                        }
                    })
                }
            })
        }
    }
});

这是个方法是获取当前用户的信息，首先先检查globalData对象中有没有缓存有userInfo对象（存储用户的信息），如果有就返回给用户传进来的回掉函数，否则就请求接口获取用用户信息，获取用户信息之前，微信小程序要求先调用wx.login认证，才能调用wx.getUserInfo接口。

看的出代码的层次已经有点深了，我们可以用Promise来简化一下（-_-|| 说的有点夸张，实际上这点嵌套还是可以的）

wx.getUserInfo和wx.login这两个接口都用共同的属性success和fail，我们可以封装起来：

/**
 * @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);
  });
}

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);
                });
        }
    }
});

可以看出，使用了Promise之后，代码简洁了不少，层次深度也降低了不少，好家伙，很管用！

其实本次代码中的回调嵌套很少的，为了尽量使用到ES6的新特性，少量的回调嵌套也使用了Promise处理。

介绍了那么多，主要了为了还不了解ES6的读者能够预热一下知识，为后面的案例做好准备，当然，肯定有同学已经对ES6了如指掌，本人也是刚刚学习，欢迎指正错误。

思路

在开工之前，我们先理一下思路，一个普通的日历显示功能应该怎么做，该怎样入手。

日期

获取日期相关的信息，肯定用到Date对象。

let date = new Date();
let day = date.getDate(); //当月的天
let month = date.getMonth() + 1; //月份，从0开始
let year = date.getFullYear(); //年份

我们需要知道当前展示月份的天数。

let dayCount = new Date(currentYear, currentMonth, 0).getDate();

得到可当月月份的天数，可以展示出所有的天数列表，但是我们一样要或者上一个页的天数和下一个页的天数，如果当前月份是1月或者12月，我们还需要额外判断上一页是上一年的12月，下一页是下一年的一月份。

我们可能需要获取足够多的日期信息来展示（不仅仅是当前月份，还有上一月或者上一年和下一月或者下一年）

data = {
    currentDate: currentDateObj.getDate(), //当天日期第几天
    currentYear: currentDateObj.getFullYear(), //当天年份
    currentDay: currentDateObj.getDay(), //当天星期
    currentMonth: currentDateObj.getMonth() + 1, //当天月份
    showMonth: showMonth, //当前显示月份
    showDate: showDate, //当前显示月份的第几天 
    showYear: showYear, //当前显示月份的年份
    beforeYear: beforeYear, //当前页上一页的年份
    beforMonth: beforMonth, //当前页上一页的月份
    afterYear: afterYear, //当前页下一页的年份
    afterMonth: afterMonth, //当前页下一页的月份
    selected: selected //当前被选择的日期信息
};

能显示日期之后，当然还没有完，我们需要一个选择日期的功能，即用户可以点击指定那一天，也可以选择哪一年或者哪一个月，选择年份和月份我们可以用Picker组件来展示，选择具体的哪天这就需要在日期列表上的每一天都要绑定一个点击事件来响应用户的点击动作，用户选择具体的日期后，可能会随意翻页，所以必须要保存好当前选择的日期。

存储

示例程序中用到了数据存储，关系到小程序中的数据缓存API，官方提供的API比较多，我只是用了两个异步的数据缓存API。

wx.setStorage({key: KEY, data: DATA});

let allData  =[{id: 1, title: 'title1'}, {id: 2, title: 'title2'}];
wx.setStorageSync({key: Config.ITEMS_SAVE_KEY, data: allData});

参数	说明
KEY	存储数据的键名
DATA	存储的数据

wx.getStorage({key: KEY});

let allData = wx.getStorage({
        key: Config.ITEMS_SAVE_KEY
        success: allData => {
            let obj1 = allData[0];
            console.log(obj1.title);
        }
    });

参数	说明
KEY	存储数据的键名

编码

建立工程的步骤就不讲了，直接进入主题，应用只有两个页面，一个首页，一个详情页，结构清晰，功能简单。

日历

先来看看首页，日历的wxml结构;

结构分为上中下三部分，header为头部，用于展示翻页按钮和当前日期信息。在.week.row和.body.row元素中展示星期和天数列表，这里的布局采用了比较low的百分比分栏，总共有7栏，100/7哈哈，想高逼格的可以采用css的分栏布局和flex布局。

<view class="og-calendar">
    <view class="header">
        <view class="btn month-pre" bindtap="changeDateEvent" data-year="{{data.beforeYear}}" data-month="{{data.beforMonth}}"> 
            <image src="../../images/prepage.png"></image>
        </view>
        <view class="date-info">
            <picker mode="date" fields="month" value="{{pickerDateValue}}" bindchange="datePickerChangeEvent">
                <text>{{data.showYear}}年{{data.showMonth > 9 ? data.showMonth : ('0' + data.showMonth)}}月</text>
            </picker>
        </view>
        <view class="btn month-next" bindtap="changeDateEvent" data-year="{{data.afterYear}}" data-month="{{data.afterMonth}}">
            <image src="../../images/nextpage.png"></image>
        </view>
    </view>
    <view class="week row">
        <view class="col">
            <text>一</text>
        </view>
        <view class="col">
            <text>二</text>
        </view>
        <view class="col">
            <text>三</text>
        </view>
        <view class="col">
            <text>四</text>
        </view>
        <view class="col">
            <text>五</text>
        </view>
        <view class="col">
            <text>六</text>
        </view>
        <view class="col">
            <text>日</text>
        </view>
    </view>
    <view class="body row">  
        <block wx:for="{{data.dates}}" wx:key="_id">
            <view bindtap="dateClickEvent" data-year="{{item.year}}" data-month="{{item.month}}" data-date="{{item.date}}" class="col {{data.showMonth == item.month ? '' : 'old'}} {{data.currentDate == item.date && data.currentYear==item.year && data.currentMonth == item.month ? 'current' : ''}} {  {item.active ? 'active' : ''}}">
                <text>{{item.date}}</text>
            </view> 
        </block>
    </view>
</view>

.btn.month-pre和.btn.month-next翻页按钮，都绑定了changeDateEvent的tap事件，各自都用自己的data-year和data-mont属性，这两个属性是临时存值，当点击按钮翻页的时候，我们需要知道当前的年份和日期，以便可以更加方便地翻到上一页或者下一页。

changeDateEvent事件比较简单：

changeDateEvent(e) {
    const {year, month} = e.currentTarget.dataset;
    changeDate.call(this, new Date(year, parseInt(month) - 1, 1));
}

点击翻页按钮，根据回调进来的event对象来获取元素上的data-*属性，然后调用changeDate这个方法来更新日历数据，这个方法接收一个Date对象，代表要翻页后的日期。

暂且不关心changeDate具体干了些什么，看看.body.row里有一个循环，每一个元素都绑定了dateClickEvent事件，而且每一个元素都附带了自己所属的年份、月份和天数信息，这些信息是非常有用的，当点击了具体的某一天，可以通过获取元素上的data-*信息来知道我们具体选择的日期。除此之外，元素上的class属性包裹了一长串的判断表达式。这些语句最终的目的是为了给元素动态变更，.old代表当前的日期不是本月日期，因为每一版的日期除了当前月份的日期还可能包含上一月和下一月的部分日期，我们给予它灰色的样式显示，.current代表今天的日期，用实心填充颜色的背景样式修饰，.active即代表着当前选中的日期。

dateClickEvent事件其实也是调用了changeDate事件，本质上也是也是改变日期，额外的工作就是保存选中的日期到selected对象中。

dateClickEvent(e) {
    const {year, month, date} = e.currentTarget.dataset;
    const {data} = this.data;
    let selectDateText = '';

    data['selected']['year'] = year;
    data['selected']['month'] = month;
    data['selected']['date'] = date;

    this.setData({ data: data });

    changeDate.call(this, new Date(year, parseInt(month) - 1, date));
}

来看看重中之重的changeDate函数，这个函数的代码比较多，虽然堆砌大量在一个函数中是个不好的习惯，不过里面声明变量和赋值比较多，业务代码比较少：

/**
 * 变更日期数据
 * @param {Date} targetDate 当前日期对象
 */
function changeDate(targetDate) {
  let date = targetDate || new Date();
  let currentDateObj = new Date();

  let showMonth, //当天显示月份
    showYear, //当前显示年份
    showDay, //当前显示星期
    showDate, //当前显示第几天
    showMonthFirstDateDay, //当前显示月份第一天的星期
    showMonthLastDateDay, //当前显示月份最后一天的星期
    showMonthDateCount; //当前月份的总天数

  let data = [];

  showDate = date.getDate();
  showMonth = date.getMonth() + 1;
  showYear = date.getFullYear();
  showDay = date.getDay();

  showMonthDateCount = new Date(showYear, showMonth, 0).getDate();
  date.setDate(1);
  showMonthFirstDateDay = date.getDay(); //当前显示月份第一天的星期
  date.setDate(showMonthDateCount);
  showMonthLastDateDay = date.getDay(); //当前显示月份最后一天的星期  

  let beforeDayCount = 0,
    beforeYear, //上页月年份
    beforMonth, //上页月份
    afterYear, //下页年份
    afterMonth, //下页月份
    afterDayCount = 0, //上页显示天数
    beforeMonthDayCount = 0; //上页月份总天数

  //上一个月月份
  beforMonth = showMonth === 1 ? 12 : showMonth - 1;
  //上一个月年份
  beforeYear = showMonth === 1 ? showYear - 1 : showYear;
  //下个月月份
  afterMonth = showMonth === 12 ? 1 : showMonth + 1;
  //下个月年份
  afterYear = showMonth === 12 ? showYear + 1 : showYear;

  //获取上一页的显示天数
  if (showMonthFirstDateDay != 0)
    beforeDayCount = showMonthFirstDateDay - 1;
  else
    beforeDayCount = 6;

  //获取下页的显示天数
  if (showMonthLastDateDay != 0)
    afterDayCount = 7 - showMonthLastDateDay;
  else
    showMonthLastDateDay = 0;

  //如果天数不够6行，则补充完整
  let tDay = showMonthDateCount + beforeDayCount + afterDayCount;
  if (tDay <= 35)
    afterDayCount += (42 - tDay); //6行7列 = 42

  //虽然翻页了，但是保存用户选中的日期信息是非常有必要的  
  let selected = this.data.data['selected'] || { year: showYear, month: showMonth, date: showDate };
  let selectDateText = selected.year + '年' + formatNumber(selected.month) + '月' + formatNumber(selected.date) + '日';

  data = {
    currentDate: currentDateObj.getDate(), //当天日期第几天
    currentYear: currentDateObj.getFullYear(), //当天年份
    currentDay: currentDateObj.getDay(), //当天星期
    currentMonth: currentDateObj.getMonth() + 1, //当天月份
    showMonth: showMonth, //当前显示月份
    showDate: showDate, //当前显示月份的第几天 
    showYear: showYear, //当前显示月份的年份
    beforeYear: beforeYear, //当前页上一页的年份
    beforMonth: beforMonth, //当前页上一页的月份
    afterYear: afterYear, //当前页下一页的年份
    afterMonth: afterMonth, //当前页下一页的月份
    selected: selected,
    selectDateText: selectDateText
  };

  let dates = [];
  let _id = 0; //为wx:key指定

  //上一月的日期
  if (beforeDayCount > 0) {
    beforeMonthDayCount = new Date(beforeYear, beforMonth, 0).getDate();
    for (let fIdx = 0; fIdx < beforeDayCount; fIdx++) {
      dates.unshift({
        _id: _id,
        year: beforeYear,
        month: beforMonth,
        date: beforeMonthDayCount - fIdx
      });
      _id++;
    }
  }

  //当前月份的日期
  for (let cIdx = 1; cIdx <= showMonthDateCount; cIdx++) {
    dates.push({
      _id: _id,
      active: (selected['year'] == showYear && selected['month'] == showMonth && selected['date'] == cIdx), //选中状态判断
      year: showYear,
      month: showMonth,
      date: cIdx
    });
    _id++;
  }

  //下一月的日期
  if (afterDayCount > 0) {
    for (let lIdx = 1; lIdx <= afterDayCount; lIdx++) {
      dates.push({
        _id: _id,
        year: afterYear,
        month: afterMonth,
        date: lIdx
      });
      _id++;
    }
  }

  data.dates = dates;


  this.setData({ data: data, pickerDateValue: showYear + '-' + showMonth });
  loadItemListData.call(this);
}

虽然这段这段代码有点啰嗦，不过总结下来无非就是获取当前月的信息，上一页的信息和下一页的信息，这些信息包括具体的年月日和星期。

年月选择Picker

既然是日历，必不可少的功能就是让用户可以选择显示指定的年份和月份，用pciker组件来实现最合适不过了，官方更新的api，目前未知，picker组件已经支持mode = date模式的风格，即原生的日期选择。触发选择的区域关联在了日历的header上。

<view class="date-info">
    <picker mode="date" fields="month" value="{{pickerDateValue}}" bindchange="datePickerChangeEvent">
        <text>{{data.showYear}}年{{data.showMonth > 9 ? data.showMonth : ('0' + data.showMonth)}}月</text>
    </picker>
</view>

mode=date指定pciker是日期选择风格，fields=month则显示组件显示日期的精度显示当月份即可，组件初始化的值为pickerDateValue，绑定了datePickerChangeEvent事件，当选择的日期发生变化时，就会触发此事件。

datePickerChangeEvent(e) {
    const date = new Date(Date.parse(e.detail.value));
    changeDate.call(this, new Date(date.getFullYear(), date.getMonth(), 1));
}

Picker

事项存储

此应用还有小小的事项功能，可以添加事项条目，事项包括了标题、内容和等级，说白了其实就是一个功能不全的TODO应用…

既然涉及到存储，肯定需要操作缓存的方法，自己也是刚搞前端那不久，不太明白javascript的封装约定，借鉴之前在java所用的模式，分为了两个文件，一个是仓库类（数据的CURD操作），另一个是业务类（附带处理部分业务），缓存的配置放置于Config文件中，类中用到了异步的缓存操作API，所以使用Promise模式封装。

首先是把Promise封装成通用的方法，顺便封装部分经常用到的函数：

/**
 * 生成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 = {
  guid: guid,
  log: log,
  promiseHandle: promiseHandle
}

guid方法用于生成每一个事项的id，方便查询，log方法用于日志记录，promiseHandle把小程序的大部分异步API封装到了Promise对象中。

具体的Config配置文件：

module.exports = {
    ITEMS_SAVE_KEY: 'todo_item_save_Key',
    //事项等级
    LEVEL: {
        normal: 1,
        warning: 2,
        danger: 3
    }
};

数据操作仓库类 DataRepository：

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; i++) {
                if (allData[i] && allData[i]['_id'] == data['_id']) {
                    allData[i] = 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：

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;

本人的对数组的操作不是很熟悉，代码看起来有点臃肿，仅供参考。

好了，进入正题，每天的事项可以用一个列表来展示，列表方在日历下边，具体结构：

<view class="common-list">
    <view class="header" wx:if="{{itemList.length > 0}}">
        <text>事项信息</text>
    </view>

    <block wx:for="{{itemList}}" wx:key="id">
        <view class="item" bindtap="listItemClickEvent" data-id="{{item._id}}" bindlongtap="listItemLongTapEvent">
        <view class="inner {{isEditMode ? 'with-check' : ''}}">
            <view class="checker" wx:if="{{isEditMode}}">
                <icon type="circle" wx:if="{{!item.checked}}" color="#FFF" size="20" />
                <icon type="success" wx:else color="#E14848" size="20" />
            </view>
            <image wx:if="{{item.level == 1}}" class="icon" src="../../images/success.png" />
            <image wx:if="{{item.level == 2}}" class="icon" src="../../images/notice.png" />
            <image wx:if="{{item.level == 3}}" class="icon" src="../../images/fav-round.png" />
            <view class="content">
            <text class="title">{{item.title}}</text>
            </view>
        </view>
        </view>
    </block> 

    <view class="header text-center" wx:if="{{!itemList || itemList.length <= 0}}">
        <text>当前日期没有事项记录</text>
    </view>
</view>

列表的数据加载全靠这个方法loadItemListData：

/**
 * 加载事项列表数据
 */
function loadItemListData() {
  const {year, month, date} = this.data.data.selected;
  let _this = this;
  DataService.findByDate(new Date(Date.parse([year, month, date].join('-')))).then((data) => {
    _this.setData({ itemList: data });
  });
}

DataService.findByDate这个方法通过传入一个日期来获取指定日期的事项。成功获取数据之后，在模板中遍历数据，根据level属性来显示不同颜色的图标，让事项等级一目了然。

既然有数据列表，数据从哪来？当然是需要一个数据的添加面板。

首页的有下表有FloatAction操作工具按钮，在这里添加一个添加数据按钮，添加的事项的日期属于用户选中的日期，添加面板默认是隐藏起来的，当点击添加按钮，面板就会向上滑动出现，可以用animationAPI实现动画效果，其实本质也是CSS3动画。

<view class="updatePanel" style="top: {{updatePanelTop}}px;height:{{updatePanelTop}}px" animation="{{updatePanelAnimationData}}">
  <input placeholder="请输入事项标题" value="{{todoInputValue}}" bindchange="todoInputChangeEvent" />
  <textarea placeholder="请输入事项内容" value="{{todoTextAreaValue}}" bindblur="todoTextAreaChangeEvent"></textarea>
  <view class="level">
    <block wx:for="{{levelSelectData}}" wx:key="*this">
      <view bindtap="levelClickEvent" data-level="{{item}}" class="item {{item == 1 ? 'border-normal' : ''}} {{item == 2 ? 'border-warning' : '' }} {{item == 3 ? 'border-danger' : ''}} {{item == levelSelectedValue && item == 1 ? 'bg-normal' : ''}} {{item == levelSelectedValue && item == 2 ? 'bg-warning' : ''}} {{item == levelSelectedValue && item == 3 ? 'bg-danger' : ''}}"></view>
    </block>
  </view>
  <view class="footer">
    <view class="btn" bindtap="closeUpdatePanelEvent">取消</view>
    <view class="btn primary" bindtap="saveDataEvent">保存</view>
  </view>
</view>

在我写到这个内容之前，官方还没有textarea组件，现在新增了，完美解决遗憾。

添加面板的动画控制：

/**
 * 显示事项数据添加更新面板
 */
function showUpdatePanel() {
  let animation = wx.createAnimation({
    duration: 600
  });
  animation.translateY('-100%').step();
  this.setData({
    updatePanelAnimationData: animation.export()
  });
}

/**
 * 显示模态窗口
 * @param {String} msg 显示消息
 */
function showModal(msg) {
  this.setData({
    isModalShow: true,
    isMaskShow: true,
    modalMsg: msg
  });
}

/**
 * 关闭模态窗口
 */
function closeModal() {
  this.setData({
    isModalShow: false,
    isMaskShow: false,
    modalMsg: ''
  });
}

/**
 * 关闭事项数据添加更新面板
 */
function closeUpdatePanel() {
  let animation = wx.createAnimation({
    duration: 600
  });
  animation.translateY('100%').step();
  this.setData({
    updatePanelAnimationData: animation.export()
  });
}

主要靠translateY来控制垂直方向的移动动画，刚进入页面的时候获取屏幕的高度，把面板的高度设置与屏幕高度一致，上滑的时候100%就刚好覆盖整个屏幕。

主要的添加事项逻辑：

  // 保存事项数据
  saveDataEvent() {
    const {todoInputValue, todoTextAreaValue, levelSelectedValue} = this.data;
    const {year, month, date} = this.data.data.selected;
    console.log(todoInputValue, todoTextAreaValue);
    if (todoInputValue !== '') {
      let promise = new DataService({
        title: todoInputValue,
        content: todoTextAreaValue,
        level: levelSelectedValue,
        year: year,
        month: parseInt(month) - 1,
        date: date
      }).save();
      promise && promise.then(() => {
        //清空表单
        this.setData({
          todoTextAreaValue: '',
          levelSelectedValue: '',
          todoInputValue: ''
        });
        loadItemListData.call(this);
      })
      closeUpdatePanel.call(this);
    } else {
      showModal.call(this, '请填写事项内容');
    }
  }

获取添加面板上的数据和当前选择的日期直接用DataSerivce对象保存即可。

由于篇幅有限，剩下的数据删除和数据查看逻辑也比较简单，不再细说，本文主要是介绍小程序的ES6开发。

批量编辑

写完这篇文章的时候，小程序已经公测了好久。本人是个人用户，没有资格参与公测，热情也减半了不少，接触小程序也有一个多月了，写了三个例子，感觉还好，至少能够写出点东西来，不枉这番努力。

下载地址：事项助手

作者 east

工具类 6月 26,2018

生成二维码小程序

要实现小程序上的二维码生成器，想想基于jquery的二维码生成插件有很多，但是小程序是不允许操作dom的，所以自己找了一个纯javascript版的二维码生成源码，然后换汤不换药把其中的hmtl5中的canvas改为小程序的canvas；

效果图：

纯javascript版js源码：

qrcode

1、解读源码，修改绘制canvas部分，源代码如下

draw: function (string, canvas, size, ecc) {
            
            ecclevel = ecc || ecclevel;
            canvas = canvas || _canvas;

            if (!canvas) {
                console.warn('No canvas provided to draw QR code in!')
                return;
            }

            size = size || _size || Math.min(canvas.width, canvas.height);

            var frame = genframe(string),
                ctx = canvas.getContext('2d'),
                px = Math.round(size / (width + 8));

            var roundedSize = px * (width + 8),
                offset = Math.floor((size - roundedSize) / 2);

            size = roundedSize;

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#fff';
            ctx.fillRect(0, 0, size, size);
            ctx.fillStyle = '#000';
            for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {
                        ctx.fillRect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
                    }
                }
            }

        },

2、然后愉快的将代码修改如下：

draw: function (string, canvas, cavW, cavH, ecc) {
            ecclevel = ecc || ecclevel;
            canvas = canvas || _canvas;
            if (!canvas) {
                console.warn('No canvas provided to draw QR code in!')
                return;
            }

            var size =  Math.min(cavW, cavH);

            var frame = this.getFrame(string),
                ctx = wx.createContext(),
                px = Math.round(size / (width + 8));

            var roundedSize = px * (width + 8),
                offset = Math.floor((size - roundedSize) / 2);
            size = roundedSize;
            ctx.clearRect(0, 0, cavW, cavW);
            // ctx.setFillStyle('#ffffff');
            // ctx.rect(0, 0, size, size);
            ctx.setFillStyle('#000000');
			// ctx.setLineWidth(1);
            for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {
                        ctx.fillRect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
					}
                }
            }
           
			wx.drawCanvas({
          		canvasId: canvas,
          		actions: ctx.getActions()
    		});
        }
    }

3、哈哈，愉快的运行起来~~~~~~报错！！

WAService.js:3 TypeError: ctx.fillRect is not a function

赶紧看看小程序的api，发现小程序是没有fillRect()方法的，只有rect()方法,所以啪~啪~啪改为如下：

 for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {   
                        ctx.rect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
					}
                }
            }

运行，懵逼了，怎么没有二维码呢，我的二维码呢？好吧接着分析rect语fillRect的区别，其实rect方法只是绘制出轮廓，并不会对路径进行填充，所以紧接其后要对其fill填充。

把代码改为如下：

ctx.setFillStyle('#000000');
			// ctx.setLineWidth(1);
            for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {   
                        ctx.rect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
                        ctx.fill();
                    }
                }
            }

运行~~~噢啦，终于出现期待已久的二维码喽！！

好了，总算完成了，但是怎么生成二维码的时候感觉有点慢呢，于是借用同事的手机（安卓系统）试了一下，输入网址，点击生成~~

崩了，微信直接挂了好吧接着找原因，感觉影响速度的只能是for循环那块代码，于是把ctx.fill()拿到for最外层；

 for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {   
                        ctx.rect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
                        // ctx.fill();
                    }
                }
            }
            ctx.fill();

运行~~这速度，飞快！自己的小7也不卡了，又用同事的试了一把，没问题。原来对绘制路径填充只需要最后填充就Ok了，我还二逼的对每次绘制进行了填充。

下载地址：生成二维码

作者 east

6月 26,2018

手势解锁小程序

手势解锁是app上常见的解锁方式，相比输入密码方式操作起来要方便许多。下面展示如何基于微信小程序实现手机解锁。最终实现效果如下图:

微信小程序开发实例（手势解锁）

整个功能基于canvas实现，首先添加画布组件，并设定样式

XML/HTML代码

<!–index.wxml–>

1. <!–index.wxml–>
2. <view class=“container”>

1. <canvas canvas-id=“id-gesture-lock” class=“gesture-lock” bindtouchstart=“onTouchStart”
2. bindtouchmove=“onTouchMove” bindtouchend=“onTouchEnd”></canvas>

1. </view>

1. .gesture-lock {
2. margin: 100rpx auto;

1. width: 300px;
2. height: 300px;

background-color: #ffffff;
}

手势解锁实现代码在gesture_lock.js中(完整源码地址见末尾)。

初始化

JavaScript代码

1. constructor(canvasid, context, cb, opt){
2. this.touchPoints = [];

1. this.checkPoints = [];
2. this.canvasid = canvasid;

1. this.ctx = context;
2. this.width = opt && opt.width || 300; //画布长度

1. this.height = opt && opt.height || 300; //画布宽度
2. this.cycleNum = opt && opt.cycleNum || 3;

1. this.radius = 0; //触摸点半径
2. this.isParamOk = false;

1. this.marge = this.margeCircle = 25; //触摸点及触摸点和画布边界间隔
2. this.initColor = opt && opt.initColor || ‘#C5C5C3’;

1. this.checkColor = opt && opt.checkColor || ‘#5AA9EC’;
2. this.errorColor = opt && opt.errorColor || ‘#e19984’;

1. this.touchState = “unTouch”;
2. this.checkParam();

1. this.lastCheckPoint = null;
2. if (this.isParamOk) {

1. // 计算触摸点的半径长度
2. this.radius = (this.width – this.marge * 2 – (this.margeCircle * (this.cycleNum – 1))) / (this.cycleNum * 2)

1. this.radius = Math.floor(this.radius);
2. // 计算每个触摸点的圆心位置

1. this.calCircleParams();
2. }

this.onEnd = cb; //滑动手势结束时的回调函数
}

主要设置一些参数，如canvas的长宽，canvas的context，手势锁的个数(3乘3, 4乘4)，手势锁的颜色，手势滑动结束时的回调函数等。并计算出手势锁的半径。

计算每个手势锁的圆心位置

JavaScript代码

1. calCircleParams() {
2. let n = this.cycleNum;

1. let count = 0;
2. for (let i = 0; i < n; i++) {

1. for (let j = 0; j < n; j++){
2. count++;

1. let touchPoint = {
2. x: this.marge + i * (this.radius * 2 + this.margeCircle) + this.radius,

1. y: this.marge + j * (this.radius * 2 + this.margeCircle) + this.radius,
2. index: count,

1. check: “uncheck”,
2. }

1. this.touchPoints.push(touchPoint)
2. }

}
}

绘制手势锁

JavaScript代码

1. for (let i = 0; i < this.touchPoints.length; i++){
2. this.drawCircle(this.touchPoints[i].x, this.touchPoints[i].y, this.radius, this.initColor)

}
this.ctx.draw(true);

接下来就是识别用户的滑动行为，判断用户划过了哪些圆圈，进而识别出用户的手势。

在touchstart和touchmove事件中检测触发并更新画布

JavaScript代码

1. onTouchStart(e) {
2. // 不识别多点触控

1. if (e.touches.length > 1){
2. this.touchState = “unTouch”;

1. return;
2. }

1. this.touchState = “startTouch”;
2. this.checkTouch(e);

1. let point = {x:e.touches[0].x, y:e.touches[0].y};
2. this.drawCanvas(this.checkColor, point);

1. }

1. onTouchMove(e) {
2. if (e.touchState === “unTouch”) {

1. return;
2. }

1. if (e.touches.length > 1){
2. this.touchState = “unTouch”;

1. return;
2. }

1. this.checkTouch(e);
2. let point = {x:e.touches[0].x, y:e.touches[0].y};

this.drawCanvas(this.checkColor, point);
}

检测用户是否划过某个圆圈

JavaScript代码

1. checkTouch(e) {
2. for (let i = 0; i < this.touchPoints.length; i++){

1. let point = this.touchPoints[i];
2. if (isPointInCycle(e.touches[0].x, e.touches[0].y, point.x, point.y, this.radius)) {

1. if (point.check === ‘uncheck’) {
2. this.checkPoints.push(point);

1. this.lastCheckPoint = point;
2. }

1. point.check = “check”
2. return;

1. }
2. }

}

更新画布

JavaScript代码

1. drawCanvas(color, point) {
2. //每次更新之前先清空画布

1. this.ctx.clearRect(0, 0, this.width, this.height);
2. //使用不同颜色和形式绘制已触发和未触发的锁

1. for (let i = 0; i < this.touchPoints.length; i++){
2. let point = this.touchPoints[i];

1. if (point.check === “check”) {
2. this.drawCircle(point.x, point.y, this.radius, color);

1. this.drawCircleCentre(point.x, point.y, color);
2. }

1. else {
2. this.drawCircle(this.touchPoints[i].x, this.touchPoints[i].y, this.radius, this.initColor)

1. }
2. }

1. //绘制已识别锁之间的线段
2. if (this.checkPoints.length > 1) {

1. let lastPoint = this.checkPoints[0];
2. for (let i = 1; i < this.checkPoints.length; i++) {

1. this.drawLine(lastPoint, this.checkPoints[i], color);
2. lastPoint = this.checkPoints[i];

1. }
2. }

1. //绘制最后一个识别锁和当前触摸点之间的线段
2. if (this.lastCheckPoint && point) {

1. this.drawLine(this.lastCheckPoint, point, color);
2. }

this.ctx.draw(true);

当用户滑动结束时调用回调函数并传递识别出的手势

JavaScript代码

1. onTouchEnd(e) {
2. typeof this.onEnd === ‘function’ && this.onEnd(this.checkPoints, false);

1. }

1. onTouchCancel(e) {
2. typeof this.onEnd === ‘function’ && this.onEnd(this.checkPoints, true);

}

重置和显示手势错误

JavaScript代码

1. gestureError() {
2. this.drawCanvas(this.errorColor)

1. }

1. reset() {
2. for (let i = 0; i < this.touchPoints.length; i++) {

1. this.touchPoints[i].check = ‘uncheck’;
2. }

1. this.checkPoints = [];
2. this.lastCheckPoint = null;

this.drawCanvas(this.initColor);
}

如何调用

在onload方法中创建lock对象并在用户触摸事件中调用相应方法

JavaScript代码

1. onLoad: function () {
2. var s = this;

1. this.lock = new Lock(“id-gesture-lock”, wx.createCanvasContext(“id-gesture-lock”), function(checkPoints, isCancel) {
2. console.log(‘over’);

1. s.lock.gestureError();
2. setTimeout(function() {

1. s.lock.reset();
2. }, 1000);

1. }, {width:300, height:300})
2. this.lock.drawGestureLock();

1. console.log(‘onLoad’)
2. var that = this

1. //调用应用实例的方法获取全局数据
2. app.getUserInfo(function(userInfo){

1. //更新数据
2. that.setData({

1. userInfo:userInfo
2. })

1. that.update()
2. })

1. },
2. onTouchStart: function (e) {

1. this.lock.onTouchStart(e);
2. },

1. onTouchMove: function (e) {
2. this.lock.onTouchMove(e);

1. },
2. onTouchEnd: function (e) {

this.lock.onTouchEnd(e);
}

下载地址: 手势解锁

作者 east

6月 26,2018

微信小程序源码画布时钟

总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序，通过app.json公共设置来配置入口。

首先来看一下构建这样一个小程序所需要的目录结构

从目录结构就可以看出来这个程序是简单的单层页面，画布渲染在pages下面的index页面上。

其中对程序有实际驱动作用的代码分别在index.js，index.wxml，index.wxss和app.json这几个文件中

Index.js文件里面存放着程序的逻辑层数据，是程序的核心。

1）考虑到适应不同的手机大小，定义了两个变量width和height，当页面加载时（onLoad）获取系统窗口的值作为index页面的大小；

2）页面初次渲染后给index添加时钟函数canvasClock（），并设置定时器，每一秒刷新一次画布，呈现出时钟运动的效果

3）在时钟函数canvasClock（）中进行绘制时钟页面所需的元素以其其运动函数，并对其进行调用drawClock()，通过调用小程序wx.drawCanvas方法来指定index为绘制页面和绘制行为

4）当程序退出时，清除计时器

代码如下：

// 获取应用实例
Page({
data:{
width:0,
height:0
},
//onLoad生命周期函数，监听页面加载
onLoad: function(){
//将全局变量Index保存在that中，里面函数调用
var that = this
//获取系统信息
wx.getSystemInfo({
//获取系统信息成功，将系统窗口的宽高赋给页面的宽高
success: function(res) {
that.width = res.windowWidth
that.height = res.windowHeight
}
})
},
//onReady生命周期函数，监听页面初次渲染完成
onReady: function(){
//调用canvasClock函数
this.canvasClock()
//对canvasClock函数循环调用
this.interval = setInterval(this.canvasClock,1000)
},
canvasClock: function(){
var context = wx.createContext()//创建并返回绘图上下文（获取画笔）
//设置宽高
var width = this.width
var height = this.height
var R = width/2-55;//设置文字距离时钟中心点距离
//重置画布函数
function reSet(){
context.height = context.height;//每次清除画布，然后变化后的时间补上
context.translate(width/2, height/2);//设置坐标轴原点
context.save();//保存中点坐标1
}
//绘制中心圆和外面大圆
function circle(){
//外面大圆
context.setLineWidth(2);
context.beginPath();
context.arc(0, 0, width/2-30, 0, 2 * Math.PI,true);
context.closePath();
context.stroke();
//中心圆
context.beginPath();
context.arc(0, 0, 8, 0, 2 * Math.PI, true);
context.closePath();
context.stroke();
}
//绘制字体
function num(){
// var R = width/2-60;//设置文字距离时钟中心点距离
context.setFontSize(20)//设置字体样式
context.textBaseline = “middle”;//字体上下居中，绘制时间
for(var i = 1; i < 13; i++) {
//利用三角函数计算字体坐标表达式
var x = R * Math.cos(i * Math.PI / 6 – Math.PI / 2);
var y = R * Math.sin(i * Math.PI / 6 – Math.PI / 2);
if(i==11||i==12){//调整数字11和12的位置
context.fillText(i, x-12, y+9);
}else {
context.fillText(i, x-6, y+9);
}
}
}
//绘制小格
function smallGrid(){
context.setLineWidth(1);
context.rotate(-Math.PI/2);//时间从3点开始，倒转90度
for(var i = 0; i < 60; i++) {
context.beginPath();
context.rotate(Math.PI / 30);
context.moveTo(width/2-30, 0);
context.lineTo(width/2-40, 0);
context.stroke();
}
}
//绘制大格
function bigGrid(){
context.setLineWidth(5);
for(var i = 0; i < 12; i++) {
context.beginPath();
context.rotate(Math.PI / 6);
context.moveTo(width/2-30, 0);
context.lineTo(width/2-45, 0);
context.stroke();
}
}
//指针运动函数
function move(){
var t = new Date();//获取当前时间
var h = t.getHours();//获取小时
h = h>12?(h-12):h;//将24小时制转化为12小时制
var m = t.getMinutes();//获取分针
var s = t.getSeconds();//获取秒针
context.save();//再次保存2
context.setLineWidth(7);
//旋转角度=30度*（h+m/60+s/3600）
//分针旋转角度=6度*（m+s/60）
//秒针旋转角度=6度*s
context.beginPath();
//绘制时针
context.rotate((Math.PI/6)*(h+m/60+s/3600));
context.moveTo(-20,0);
context.lineTo(width/4.5-20,0);
context.stroke();
context.restore();//恢复到2,（最初未旋转状态）避免旋转叠加
context.save();//3
//画分针
context.setLineWidth(5);
context.beginPath();
context.rotate((Math.PI/30)*(m+s/60));
context.moveTo(-20,0);
context.lineTo(width/3.5-20,0);
context.stroke();
context.restore();//恢复到3，（最初未旋转状态）避免旋转叠加
context.save();
//绘制秒针
context.setLineWidth(2);
context.beginPath();
context.rotate((Math.PI/30)*s);
context.moveTo(-20,0);
context.lineTo(width/3-20,0);
context.stroke();
}
//调用
function drawClock(){
reSet();
circle();
num();
smallGrid();
bigGrid();
move();
}
drawClock()//调用运动函数
// 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
wx.drawCanvas({
canvasId:’myCanvas’,
actions: context.getActions()
})
},
//页面卸载，清除画布绘制计时器
onUnload:function(){
clearInterval(this.interval)
}
})

index.wxml中存放着canvas标签，并通过canvas-id和class指定了组件标识符和样式选择器

index.wxss设置画布样式

.canvas{

width: 100%;

height: 100%;

position: fixed;

}

这样，整个微信小程序画布时钟就简单的创建完成，看一下效果

guthub下载地址：小程序

作者 east

工具类 6月 26,2018

鱼缸表盘系统小程序

通过本demo,可以学习到微信小程序的Canvas的高级使用，学习怎样用Canvas画图形，怎样设置画笔，怎样画圆，画钟表。

// 所有的canvas属性以及Math.sin,Math.cos()等涉及角度的参数都是用弧度表示
// 时钟
drawClock: function () {
const ctx = wx.createCanvasContext(‘clock’);
var height = this.height;
var width = this.width;
var R = width / 2 – 60;
var value = 75;
console.log(height + ‘…..’ + width)
ctx.clearRect(0, 0, width, height); //清除画布
ctx.beginPath(); //画笔开始
ctx.setLineWidth(5); //设置画笔的线宽
ctx.setStrokeStyle(‘black’); //设置画笔的颜色
ctx.arc(width / 2, height/2, R, 1.5 * Math.PI, 3.5 * Math.PI, false); //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针
ctx.stroke(); //绘图
ctx.closePath(); //结束画布
ctx.setLineWidth(6); //设置画笔的线宽
ctx.beginPath(); //画笔开始
ctx.setStrokeStyle(‘red’); //设置画笔的颜色
ctx.arc(width / 2, height / 2, R, 1.5 * Math.PI, (value * 2 / 100 + 1.5) * Math.PI, false); //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针
ctx.stroke(); //绘图
ctx.closePath(); //结束画布

//分针刻度
for (var i = 0; i < 100; i++) {
ctx.save();
ctx.setLineWidth(3);
ctx.setStrokeStyle(‘red’);
if (i > value) {
ctx.setStrokeStyle(‘black’);
}
ctx.translate(width / 2, height / 2);
ctx.rotate(i * 3.6 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, -(width / 2 – 25));
ctx.lineTo(0, -(width / 2 – 40));
ctx.stroke();
ctx.closePath();
ctx.restore();
}

ctx.setFillStyle(‘red’)
ctx.setFontSize(50)
ctx.setTextBaseline(‘middle’)
ctx.setTextAlign(‘center’)
ctx.fillText(value+’%’, width / 2, height / 2)

ctx.translate(width / 2, height / 2);
ctx.beginPath(); //画笔开始
ctx.setLineWidth(1);
ctx.setStrokeStyle(‘green’); //设置画笔的颜色
ctx.arc(0, -R – 40, 4, 0, 2 * Math.PI, false); //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针
ctx.rotate((360 / (100 / value)) * Math.PI / 180);
ctx.stroke(); //绘图
ctx.closePath(); //结束画布

ctx.beginPath(); //画笔开始
ctx.setLineWidth(1);
ctx.setStrokeStyle(‘green’); //设置画笔的颜色
ctx.arc(0, -R – 15, 4, 0, 2 * Math.PI, false); //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针
//ctx.rotate((360 / (100 / value)) * Math.PI / 180);
ctx.stroke(); //绘图
ctx.closePath(); //结束画布

ctx.draw();
}

下载地址：鱼缸表盘

作者 east

工具类 6月 26,2018

周公解梦境 for 微信小程序

提取组集合

var arr = [];

for (i of dreamsData) {
	arr.push(i.group)
}

[...new Set(arr)];

提取标题集合


var groupArr = [];

for (i of dreamsData) {
    groupArr.push(i.group);
}

groupArr = [...new Set(groupArr)];

var bigTiteList = [];

for (itemGroup of groupArr) {
    var itemTitleList = [];
    for (j of dreamsData) {
        if (j.group == itemGroup) {
            itemTitleList.push(j.title);
        }
    }

    itemTitleList = [...new Set(itemTitleList)];

    bigTiteList.push(itemTitleList);
}

bigTiteList = [...new Set(bigTiteList)];

JSON.stringify(bigTiteList);
 github地址: 下载地址

作者 east

工具类 6月 26,2018

微信小程序倒班日历简洁实用demo完整源码

设计思路

日期选择器,单个View 一共有42个元素当月的日期以及前后月份的部分日期
月份选择器这个简单一年一共12个月
年份选择器这个需要根据当前年份前后生成一系列的年份

日期选择器大致实现思路

当我们需要选择日期的时候，也就是日期选择器出现的时候，我们需要展示当前时间（年月日）的月历视图，所以我们可以根据当前时间来对日历初始化数据来入手。

固定的部分

1. 一周有7天

2. 一年有12个月

3. 1,3,5,7,8,10,12 每月31天，2月 28或29(闰年) 其余的30天

变化部分

1. 当前日历卡中的数据

2. 当前时间年份可选择范围

综上我们可以先设计固定部分的实现

固定部分实现


   //星期数组

  var weeks = ["日", "一", "二", "三", "四", "五", "六",];

   //当前年份中每个月的天数

  var dayCountOfMonth = [31, 28 + util.isLeapYear(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  //一年中月份组数

  var monthCount = 12;

变化部分实现*

当前日历卡数据实现，这里实现比较简单按照 6行 7列来设计，这样既能保证当前月份 Day的数量能够完全显示出来，也方便我们去渲染数据，不用费力去用空格来控制。首先我们取出每月的第一天对应的星期然后记录下来

，根据每月第一天的对应的星期，来填充当前月日历卡的数据例如：当前月第一天对应的日期是星期二，那么就需要在当前日历卡数据中填充 1个上个月最后一天的数据 + 当前月的总数据 + 下个月 (42 – 现有数据)


initMontData: function (dayCountOfMounth, weeksOfTheFirstDayOfEachMonth) {

      var currentYearMonthData = [];

      const cdate = this.data.calenderData.date;

      const lastYearDate = new Date();

      lastYearDate.setFullYear(this.data.calenderData.year - 1);

      var lastYearData = this.initData(lastYearDate);

      var nextYearDate = new Date();

      nextYearDate.setFullYear(this.data.calenderData.year + 1);

      var nextYearData = this.initData(nextYearDate);

      for (var i = 0; i < 12; i++) {

        var currentMonthDayCount = dayCountOfMounth[i];

        var firstDayWeek = weeksOfTheFirstDayOfEachMonth[i];

        var startIndex = firstDayWeek;

        var endIndex = firstDayWeek + dayCountOfMounth[i] - 1;

        var startArray = [];

        var endArray = [];

        var ddd = new Date();

        var cdaycount = dayCountOfMounth[i - 1];

        if (i === 0) {

          ddd.setFullYear(this.data.calenderData.year - 1);;

          ddd.setMonth(11);

          cdaycount = lastYearData.dayCountOfMonth[11];

        } else {

          ddd.setMonth(i - 1);

          cdaycount = dayCountOfMounth[i - 1];

        }

        for (var x = startIndex; x > 0; x--) {

          var temd = new Date();

          temd.setFullYear(ddd.getFullYear());

          temd.setMonth(ddd.getMonth());

          temd.setDate(cdaycount - x + 1)

          var str = util.simpleFormatTime(temd);

          var itemh = {

            date: temd,

            day: temd.getDate(),

            gray: true,

            str: str

          };

          startArray.push(itemh);

        }

        for (var x = 0; x < (42 - endIndex) - 1; x++) {

          var temd = new Date();

          if (i === 11) {

            temd.setFullYear(this.data.calenderData.year + 1);

            temd.setMonth(0);

          } else {

            temd.setFullYear(this.data.calenderData.year);

            temd.setMonth(i + 1);

          }

          temd.setDate(x + 1);

          var str = util.simpleFormatTime(temd);

          var itemh = {

            date: temd,

            day: temd.getDate(),

            gray: true,

            str: str

          };

          endArray.push(itemh);

        }

        var earchMontData = [];

        for (var j = 0; j < startArray.length; j++) {

          earchMontData.push(startArray[j]);

        }

        for (var j = 0; j < currentMonthDayCount; j++) {

          let temd = new Date();

          temd.setFullYear(this.data.calenderData.year);

          temd.setMonth(i);

          temd.setDate(j + 1);

          var str = util.simpleFormatTime(temd);

          var itemh = {

            date: temd,

            day: temd.getDate(),

            gray: false,

            str: str

          };

          earchMontData.push(itemh);

        }

        for (var j = 0; j < endArray.length; j++) {

          earchMontData.push(endArray[j]);

        }

        currentYearMonthData.push(earchMontData);

      }

      return currentYearMonthData;

    }

下载地址: 倒班日历

作者 east

社交	地图定位	O2O	电商	预订
阅读	多媒体	用户系统	布局	读书
图像	开源项目	签到	支付	搜索
UI控件	咨讯	联网	外卖	共享经济

热门分类