微信小程序前端开发学习笔记

小程序框架

在进行微信小程序开发的时候开发工具有一个新建项目的按钮，按下之后就会新建一个项目模板之类的项目，会有完整的项目文件结构，之后我们开发项目基本上是基于这一个文件结构：

其中app.json是对整个项目进行布局，包括导航栏的位置颜色，有多少个页面等，app.js相当于全局js文件，在小程序启动的时候调用，里面有一个全局数据结构，可以方便我们获取全局数据。

关于工具类的使用

可以看到，在项目文件结构中有一个工具类utils，用于处理js文件中的时间戳转换等事件，这里有一个工具类的定义，是用于时间戳转成时间：

//数据转化
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

/**
 * 时间戳转化为年 月 日 时 分 秒
 * number: 传入时间戳
 * format：返回格式，支持自定义，但参数必须与formateArr里保持一致
*/
function formatTime(number, format) {

  var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
  var returnArr = [];

  var date = new Date(number * 1000);
  returnArr.push(date.getFullYear());
  returnArr.push(formatNumber(date.getMonth() + 1));
  returnArr.push(formatNumber(date.getDate()));

  returnArr.push(formatNumber(date.getHours()));
  returnArr.push(formatNumber(date.getMinutes()));
  returnArr.push(formatNumber(date.getSeconds()));

  for (var i in returnArr) {
    format = format.replace(formateArr[i], returnArr[i]);
  }
  return format;
}
module.exports = {
  formatTime: formatTime
}

最后需要模块的导出，在使用的时候和node.js很像，都需要require对应模块，然后调用里面定义的方法。

const time = require('../../utils/util.js');
obj.deadline = time.formatTime(obj.deadline, 'Y/M/D h:m:s')

关于数据通信

页面之间需要数据的通信和交流，这就需要传递数据，一种直接粗暴的方式是通过全局变量传递，在app.js的globalData数据结构中定义一个变量，然后在每个页面中使用app = getApp（）方法就可以获得globalData这一数据结构和里面存储的数据内容，但是当数据量多起来的时候就需要定义很多变量，很麻烦。
另一种数据传递的方式是通过缓存：

var delegationIDs = new Array();
delegationIDs = wx.getStorageSync("delegationIDs") || [];
delegationIDs.unshift(e.target.dataset.id);
wx.setStorageSync("delegationIDs", delegationIDs);

使用setSorageSync和getStorageSync的方法来同步存储数据，这样可以通过缓存进行数据的交流，不需要在全局变量里面维持一个变量。