east – 第91页 – gitweixin

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

6月 26,2018

树芽读书-优秀的书籍朗读小程序

人丑要多读书，碎片化的时间实现高质量地阅读就显得尤为重要，这就是读书类的小程序的市场需求。

树芽读书则是专为帮助孩子们学习而建立，该程序从上千本精选图书、绘本、科普读物、诗歌、散文、古诗词选取精华内容，供家长和孩子们学习，同时增加了大声朗读、角色朗读、亲子朗读和说书点评功能，对于感兴趣的朋友，还可以制作原创电子书

本demo仿照树芽读书，可以学习到怎样利用小程序的媒体相关的API的开发，可以进一步完善成读书类的小程序。

下载地址: 树芽读书demo

作者 east

6月 26,2018

仿网易蜗牛读书小程序

项目地址：杳杳飞花/Reading

项目开发过程：

每一次的开发都是一个成长的过程。在开发过程中，我们会遇到各种问题，这就给了我们一个独立思考的空间，能够锻炼我们解决问题和查询文档的能力。当然，在思考查询之后还可以请教他人、进行探讨，这样往往能够帮助我们快速的找到盲点，甚至能够了解到更多我们忽视的点。和别人的交流也是学习中很重要的一环，所以在此分享了自己小小的一点经验，欢迎一起交流，一起学习。

1、开始项目

在项目开始时，我们首先在 app.json 文件中配置主体界面，设置好tabBar 。在这里我们对小程序设置确定了一个整体的基调。

"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "网易蜗牛读书",
"navigationBarTextStyle":"black"
  },
  "tabBar":{
"color":"#999999",
"selectedColor":"#444444",
"backgroungColor":"#ffffff",
"borderStyle":"#e0e0e0",
"list": [
  {
    "pagePath":"pages/leader/leader",
    "iconPath": "assets/icons/lingdu.png",
    "selectedIconPath": "assets/icons/lingdu_sel.png",
    "text":"领读"
  },
  {
    "pagePath":"pages/stack/stack",
    "iconPath": "assets/icons/stack.png",
    "selectedIconPath": "assets/icons/stack_sel.png",
    "text":"分类"
  },
  {
    "pagePath": "pages/bookdesk/bookdesk",
    "iconPath": "assets/icons/bookdesk.png",
    "selectedIconPath": "assets/icons/bookdesk_sel.png",
    "text":"书桌"
  },
  {
    "pagePath":"pages/mine/mine",
    "iconPath": "assets/icons/mine.png",
    "selectedIconPath": "assets/icons/mine_sel.png",
    "text":"我的"
  }
]
 }

对于 pages 页面，在开发过程中进行过很多次调整。到现在为止觉得还算整洁和便于管理了。在起初，不管是一级页面还是二级页面，我都把它们放在了 pages 目录下。这样一开始还不觉得有什么，可是到后来页面越来越多，要对之前写过的页面进行修改和调整的时候，恍然间发现一堆文件夹，查找起来就觉得眼花缭乱，还要和页面进行配对，非常恼火。于是按照页面不同的级别层次，进行了相应的调整。按照不同的tabBar确定了主体的文件夹，然后各级页面又分别在各自所属层级的目录下。另外对于页面的命名尽量通俗易懂，这样方便自己对各页面进行查看和管理。

"pages":[
"pages/index/index", 
"pages/leader/leader",  // 领读人  
"pages/leader/stories/stories", 
"pages/leader/authors/authors", 
"pages/stack/stack",  // 分类
"pages/stack/booklist/booklist", 
"pages/stack/booklist/bookdetail/bookdetail",
"pages/bookdesk/bookdesk",   // 书桌
"pages/mine/mine",   // 我的
"pages/mine/news/news",    
"pages/logs/logs" 
  ],

在分类页面下具有多层级的一个页面创建展示：

所以在项目开始时首先思考的就是文件的排版问题，一个合理的结构，能够增强项目的可读性，以后操作和维护也更加方便，能够节约一定的时间。

小技巧：在创建pages页面时，如果我们在微信开发者程序的app.json文件中创建，就会自动的生成相应的文件夹，就不用我们一个一个去创建了。

2、页面布局和样式

小程序属于轻量级的应用，所以在忠于原App的基础上，对某些页面进行了一些调整。另外，在这里所有的页面都是我切的，可能会有人说很多页面都可以引用第三方框架，没有必要写原生代码。其实都没有错，要看自己写小程序是为了什么。我做这款小程序是为了学习小程序的开发，另外自己的前端之旅还是刚刚开启，所以为了在 coding 中锻炼自己对各种结构的敏感性，加深自己对样式属性的理解，我选择了自己写原生代码。

其实第三方框架是非常好的轮子，像微信团队开发的 weui 框架就很好用，它提供了很多的组件，能够让你摆脱切页面的繁琐，减少开发时间。对于 weui 的使用我也不是很熟练，所以在后续的学习中，还会继续修改这个小程序，用不同的方法实现页面。另外，在命名时，我使用了BEM规范，这样便于对页面结构的理解，使代码更易读。BEM命名法则给我们提供了一个很好的模板，在命名中就能体现各个元素之间的关系，CSS的命名更加语义化，元素更易读懂。而且独一无二的命名方式，使得代码能够得到更好的复用。

stack.wxml

3、使用 easy-mock 造数据

写完基本样式之后，要思考的就是数据问题。我们开发的页面很少有静态的。我们把数据写在页面中没有任何意义还平白增加了工作量。此时我们就需要模拟后台数据，让这些数据能够通过请求渲染到页面上。easy-mock 就给我们提供了一个很好的平台来造假数据，然后生成URL 通过 wx.request() 方法来获取数据，实现页面加载数据。

另外还可以在本地写假数据。今天在阅读别人文章时有看到用require()方式来请求数据的。对于这个不是很懂，通过查询之后才发现这是CommonJS 中的模块实现。实现一项功能的方法有很多种，我觉得我们不能只满足于一种方法，而应该广泛的涉猎，通过对不同方法的学习，让自己的知识储备更庞大。

项目基本功能：

1、小程序启动页面的实现

在这里我使用了setInterval（）和clearInterval（）方法来实现，然后通过switchTab来实现跳转

Page({
  data: {
    time:3
  },
  onLoad: function () {
    var count = setInterval(()=>{   
      this.setData({
        time : this.data.time -1
      });
      if(this.data.time == 0) {  
        wx.switchTab({
          url:'../leader/leader',
          complete:function(res) {
          }
        })
        clearInterval(count);
      }
    },1000);
  }
})

2、跳转页面时获取id, 获取不同数据

一开始自己对数据获取还不是很熟练，只能进行简单的单页面渲染。后来通过查文档和摸索，逐渐的能够进行复杂一些的数据获取。另外，在setData时，如果不清楚结构，可以使用console.log(); 方法及时的查看数据结构，一层层的剥开找到我们需要的数据层。为了更便于理解，附上两张动图展示，可以发现当我点击不同文章之后，跳转的页面获取的数据也不一样。

领读

分类

在这里分类页面的数据更整齐一些，就以它为例来说一说我是如何通过id来动态选择数据的。首先要清楚的是stack分类页面和跳转到的booklist详情页。在这里是通过navigator来跳转的，我们在url中设置表达式来动态获取id，url=”booklist/booklist?id={{index}}”，然后在 booklist.js 中，通过获取到的id，进行数据的选择。

stack:

stack.wxml

          <view>
              <view class="page-search"></view>
              <scroll-view wx:for="{{stack}}" wx:key="{{index}}" scroll-y="true">
                  <navigator class="stack-view " url="booklist/booklist?id={{index}}">
                      <image src="{{item.typeCover}}" class="stack-image"></image>
                      <text class="stack-name">{{item.bookTypes}}</text>
                      <text class="stack-numb">{{item.bookNumb}} ></text>
                  </navigator>
                  <view class="line"></view>
              </scroll-view>
          </view>
      </view>

stack.js

      Page({
	  data: {
	    stack:[],
	    id: ""
	  }, 
	  onLoad: function () {
	      var that = this;
		wx.request({
		  url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
		  success: function(res) {
		    console.log(res.data.data.stack);
		    console.log(res.data.data.List);              
		    that.setData({
		      stack: res.data.data.stack,
		      id: res.data.data.List
		    })
		  }
		})
	      },   
	})

booklist:

booklist.wxml

<view>
	  <view>
	      <view wx:for="{{bookList}}" wx:key="{{index}}">
		  <view class="book-list-root" bindtap="bindViewTap">  
		      <view class="book-list-child">
			  <view>
			      <text class="book-list-name">{{item.bookName}}</text>
			  </view>
			  <view>
			      <text class="book-list-autor">{{item.authorName}}</text>
			  </view>
			  <view class="book-list-des">
			      <text>{{item.bookDes}}</text>
			  </view>
		      </view>
		  </view>
		  <view class="line"></view>            
	      </view>
	  </view>
      </view>

booklist.js

        Page({
	  data: {
	      bookList:[],
	      stack:[]
	    },
	  onLoad: function (params) {
	    var that = this;
	      wx.request({
		url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
		success: function(res) {
		  that.setData({
		    bookList: res.data.data.stack[params.id].List.bookList,
		  })  
		}
	      })
	      },
	  })

3、对navigationBarTitleText的动态修改

在各个页面的JSON文件中，我们能够设置页面的标题，但是当我们进入不同页面需要获取不同标题时，就需要动态的进行修改。其实实现起来很简单，我们知道通过wx.setNavigationBarTitle() 方法就能够修改页面标题，然后跟第二点所述的方式一样，通过id来达到动态获取的效果。

另外要注意的是，我们要将JSON中的navigationBarTitleText设置为空，这样在跳转的过程中就不会有原始标题和修改标题之间跳转的一个效果，而是直接显示需要的标题。

     .json
	  {
	      "navigationBarBackgroundColor": "#fff",
	      "navigationBarTitleText": " ",
	      "navigationBarTextStyle": "black"
	  }
       .js
	onLoad: function (params) {
	  var that = this;
	    wx.request({
	      url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
	      success: function(res) {
		var bTypes = res.data.data.stack[params.id].bookTypes;
		wx.setNavigationBarTitle({ 
		  title: bTypes,
		},1);
	      }
	    })
	  },

4、两种页面跳转方式

（1）使用 navigator 方式

navigator的跳转能够保留当前页面，可返回

    <navigator class="stack-view " url="booklist/booklist?id={{index}}">
      //  点击部位，触发即可跳转
      </navigator>

      <view class="page__bd-items page-flex" bindtap="tomyNews">
		  <view class="page-items-lt">
		      <image src="../../assets/images/mines/news.png" />
		  </view>
		  <view class="page-items-md">我的消息</view>
		  <view class="page-items-others"></view>
		  <view class="page-items-ft">></view>
      </view>

      tomyNews:function(e) {
	  wx.navigateTo({
	    url:'news/news'
	  })
	},

需要注意的是：程序中要求页面的层级最多只能有五层，因为这种方式保留当前页面，也就是说以这种方式跳转页面，最多只能打开5个页面。

（2）使用 switchTab 方法

该方法能够跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

    wx.switchTab({
              url:'../leader/leader',
              complete:function(res) {
              }
            })

5、swiper实现轮播

通过 swiper 和 swiper-item 实现了书桌页面的轮播效果。

这里的相关属性就直接使用了网上的图片：

<swiper class="swiper" indicator-dots="true" 
interval="5000" duration="1000">
        <swiper-item>
            <view class="page__bd">
                <view class="page__bd-books center">
                   <image
                    src="../../assets/images/book1.png" />
                </view>
                <view class="page__bt">
                    <view class="page__bt-readings">
                    南风知我意</view>
                    <view class="page__bt-items center">
                        <view>1186人在读</view>
                        <image 
                        src="../../assets/images/rg.png" />
                    </view>
                </view>
            </view>
        </swiper-item>
 </swiper>

其中，swiper-item 可以通过 wx:for 来循环。

总结：

这一次的小程序开发，让我学到了很多东西。我们是为了学习而开发项目。因此在coding的时候要沉住气，不要急躁，遇到问题就及时的去查文档或者请教别人，然后多想一想实现的方法，是不是还能够通过其他办法来实现。这样在不断的思考和解决问题中，在不断的踩坑中才能让自己快速的成长起来。

另外，其实还有很多功能和细节没有处理好，这一次的分享并不代表着结束，通过不断的学习，还将不断的对项目功能进行完善和处理各种细节。

作者 east

6月 25,2018

小程序版2048

《2048》是一款比较流行的数字游戏，最早于2014年3月20日发行。原版2048首先在GitHub上发布，原作者是Gabriele Cirulli，后被移植到各个平台。

现在介绍微信小程序开源版的2048，这是很好的小程序入门例子，也是休闲类小游戏很好的模仿例子。

算法

生成4*4棋盘视图
随机生成2或4填充两个单元格
记录用户touch时的起始位置和结束位置，以此判断滑动方向
根据滑动方向移动单元格，并进行相同值合并
用户一次滑动完成后重复执行步骤2
判断游戏是否结束，并根据游戏结果产生不同提示

难点

确定滑动方向
用户滑动时相同格子合并，并移到滑动方向一侧实现

项目链接：下载地址

作者 east