当前位置: 博客 /  WeChatMP  / 微信小程序前端文件结构分析

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

我的第一个小程序上线了,点击查看,在此分析一下我的小程序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

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

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

- END -