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

关注

原创最新推荐文章于 2026-04-15 11:34:40 发布 2.6k 阅读 AI 写同款· GEO 优化 ›

小程序开发如此简单~【前端篇】注意：有时点击完之后没识别出第三方模拟器的位置，可能需要填写本地模拟器位置，我这好像不需要，可能是最新版的微信开发者工具吧。第一次需要安装一下pnpm工具【注意:若想执行npm前提安装了nodejs，如何安装请自己去看教程，这里不详说】原因很简单，模拟器没开放端口，报错日志也写清楚如何解决。因为在官网下载解压有问题，无法使用，我直接在第三方下载了。点击一下命令行【第一次会提示安装命令行插件，安装即可】若是压缩包直接解压，若是clone改一下项目名字就行。以上方式因为受网络限制，很容易失败，可以使用b方案。阅读详情

小程序框架

在进行微信小程序开发的时候开发工具有一个新建项目的按钮，按下之后就会新建一个项目模板之类的项目，会有完整的项目文件结构，之后我们开发项目基本上是基于这一个文件结构：
在这里插入图片描述
其中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的方法来同步存储数据，这样可以通过缓存进行数据的交流，不需要在全局变量里面维持一个变量。