微信小程序前端文件结构分析

我的第一个小程序上线了，点击查看，在此分析一下我的小程序BigDays的前端文件夹存储的结构。

pages

• pages 存储了所有的页面，每个页面又分为.js, .json, .wxml, .wxss四个文件。

  • .wxml相当于.html文件，但是具体的标签换成微信定义的一套，比如常使用<view></view>标签表示显示内容，并且显示数据的地方使用{ {}}来绑定，与react和vue相似，控制是否显示使用wx:if ，与vue相似

  • .wxss相当于.css文件，用法也与.css文件相同，注意，从外部引入.css文件，记得改后缀为.wxss后再使用。

  • .js 当前页面的js方法，可使用const app = getApp()来获取全局实例，然后使用app.globalData或app.functionName()来获取定义在app.js中的全局数据或方法，所以如果多页面都有的方法可提取出来放在app.js方便复用。当前页内部设置数据的地方使用的是this.setData({key:value})，与react相似（react设置用this.setState()，使用是this.state.key），可以得到this.data.key，前端用的时候是直接使用{ {key}}

  • .json当前页面的一些设置，比如开启下拉刷新功能，给当前页命名等。

utils

• 存储工具类方法

app.js

• 全局可以使用的数据和方法等，子页面使用const app = getApp()获取实例后可以访问这里定义的数据和方法。app.js的globalData功能类似于react中使用redux的store存储全局数据，但在react中写起来复杂很多，但优点是每次的变动都可以监测到。

app.json

• 全局配置，包括存储了全部页面的地址，底部tab菜单的名字，连接，icon等，顶部导航栏的样式等

app.wxss

• 全局样式，所有页面可以用的css

project.config.json

• 工具配置，比如配置了自己喜欢的样式或工具，换其他电脑了直接复制这个文件即可恢复相同的开发环境。

开发小程序前端的时候是蛮爽的，文档清晰，逻辑清楚简单，很快就能制作好前端。