微信小程序系列2(目录结构了解)

hello world生成了,我们可以来看一下项目结构,点左边menu编辑,进入代码开发状态,项目结构图如下

从整体来看,可以分成5块,分别为pages,utils,app.js,app.json,app.wxss pages

所有页面功能的存放目录,所有页面都需要在app.json的路由中声明,路由下的第一个页面代表入口页面

utils

一些全局js工具类

app.js

可以处理小程序生命周期、声明全局变量等,如图,当小程序启动时会调用小程序onLaunch生命周期函数(加载小程序),另外声明了一个全局方法getUserInfo获取用户信息,还有一个globalData全局对象数据.

app.json

小程序的全局配置,包括路由声明,window属性,网络超时,tabbar,调试开关等配置

pages目录详细介绍,属性react native的朋友发现开发模式可谓异曲同工啊,只是把结构分得更细一些,这里每创建一个目录代表一个页面(以index为例),目录下包括四个文件分别为index.js,index.json,index.wxml,index.wxss index.js

与布局交互的逻辑代码,这里首先获取全局app.js的实例.然后接下来page中声明了data对象,官方定义为页面的初始数据,这个对象直接和布局刷新关系甚大,只要调用了setData方法页面就会进入渲染生命周期.基本上和react native中的state用法一致,后面有机会再详细解释.接下来自定义了一个函数bindViewTap,供布局点击促发,这里做了个跳转到logs日志页面的操作.最后还有个onLoad的生命周期函数(页面加载,在渲染之前)

index.json

该页面配置文件,与app.json全局配置文件类似,但这里只能配置window属性,可不配置,默认用全局window属性,配置后优先级高于全局window属性配置

index.wxml

布局文件,这里用的是xml布局格式,这里面有一些组件如view,image,text,与之交互的有index.js中data的数据,用的{{}}来解析,只要相关setData触发就会引起页面重新渲染,具体渲染diff机制看小程序内部处理,暂时先不深入.另外就是class样式引用,当然也可以写行内样式.

index.wxss

样式文件,既类似css样式,又不同于css样式,既有扩展也有摒弃

参考: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html