2.开发环境搭建后利用开发工具创建自己的Demo项目

1）创建项目

2）添加核心代码countdown.js ，digit.js到index目录下

3.核心代码实现(代码中有详细的开发注释)

1）digit.js（这里实现倒计时数字的排列，是一个3维数组）

// 数字排列 var digit = [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,0,1,1,0], [0,0,1,1,1,0,0] ],//0 [ [0,0,0,1,1,0,0], [0,1,1,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [1,1,1,1,1,1,1] ],//1 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,0,0,1,1], [1,1,1,1,1,1,1] ],//2 [ [1,1,1,1,1,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//3 [ [0,0,0,0,1,1,0], [0,0,0,1,1,1,0], [0,0,1,1,1,1,0], [0,1,1,0,1,1,0], [1,1,0,0,1,1,0], [1,1,1,1,1,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,1,1] ],//4 [ [1,1,1,1,1,1,1], [1,1,0,0,0,0,0], [1,1,0,0,0,0,0], [1,1,1,1,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//5 [ [0,0,0,0,1,1,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//6 [ [1,1,1,1,1,1,1], [1,1,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0] ],//7 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//8 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,1,1,0,0,0,0] ]//9 ]; module.exports = { digit : digit }

2）countdown.js（这里实现倒计时数字的绘图以及倒计时）

var sort = require("./digit.js") , digit = sort.digit; // 接收数字排列数组 var CANVAS_WIDTH = 375 // canvas宽度 , CANVAS_HEIGHT = 500 // canvas高度 , RADIUS = 8 // 小球半径 , MARGIN_TOP = 60 // 图例距离右边距离 , MARGIN_LEFT = 60; // 图例距离左边距离 /** * [render 数字渲染] * @param {[type]} time [倒计时时间] * @param {[type]} cxt [绘制对象] */ function render(time,cxt){ cxt.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT); renderDigit(MARGIN_LEFT , MARGIN_TOP , parseInt(time/10) , cxt ); renderDigit(MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(time%10) , cxt ); } /** * [renderDigit 单独小球的绘制] * @param {[type]} x [每个小球x轴距离] * @param {[type]} y [每个小球y轴距离] * @param {[type]} num [需要绘制出来的数字] * @param {[type]} cxt [绘制对象] */ function renderDigit(x,y,num,cxt){ for(var i=0;i<digit[num].length;i++){ for(var j=0;j<digit[num][i].length;j++){ if (digit[num][i][j]){ cxt.beginPath(); cxt.arc(x+j*2*(RADIUS+1)+(RADIUS+1) , y+i*2*(RADIUS+1)+(RADIUS+1) , RADIUS , 0 ,2*Math.PI); cxt.closePath(); cxt.fill(); } } } } /** * [loopTime 倒计时绘图] * @param {[type]} time [倒计时需要绘制的数字] * @param {[type]} cxt [绘制对象] */ function loopTime(time,cxt){ render(time,cxt); // 获取当前context上存储的绘图动作 wx.drawCanvas({ canvasId:"canvas", actions:cxt.getActions() }); } /** * [init 倒计时实现] * @param {[type]} time [倒计时需要绘制的数字] * @param {[type]} cxt [绘制对象] */ function init(time,cxt){ loopTime(time,cxt) var loop = setInterval(function(){ time--; (time < 1 ) && ( clearInterval(loop) ) loopTime(time,cxt) },1000); } // 将init方法暴露出去 module.exports = { render:render, init:init }

3）index.js

// index.js // 引用倒计时方法 var countdown = require("./countdown.js"); Page({ data: {}, onReady:function(e){ var context = wx.createContext() // 通过小程序提供的接口创建并返回绘图上下文context对象 , loopTime = 60; // 设置倒计时的时间 // 启动倒计时 countdown.init(loopTime,context); } }) 三、Demo源码

1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。