1.project.config.json：项目配置文件，含有appid、项目名称projectname等项目配置信息
2.app.wxss：全局样式
引入公共样式、第三方样式等(按功能模块划分)
@import "pubic/css/reset.wxss";//重置样式
@import "pubic/css/header.wxss";//公共头部
@import "pubic/css/footer.wxss";//公共尾部
@import "pubic/css/commonDom.wxss";//公共dom样式
3.app.json：小程序全局配置，配置小程序是由哪些页面组成的，还有配置小程序的窗口，如背景颜色、导航的颜色、导航文章样式等
pages:[]//各大页面路径
window:窗口配置
tabBar:配置导航tab
4.app.js：监听并处理小程序生命周期，声明一些全局方法、属性
//引入公共功能模块
import verify from './pubic/js/verify';//正则匹配验证模块
import verify from './pubic/js/localstorage';//本地存储技术模块
......(至于公共功能模块放在public还是utils文件夹下还值得探讨)
App({
onLaunch(){}//程序初始化执行此方法
})
5.README.md：项目说明文件
6.utils：用于存放全局的一些js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用，对于允许外部调用的方法，用module.exports进行暴露，才能在其他js文件中通过require或者import引入。
说明：默认有个utils/utils.js
7.public：存放静态资源文件，按资源类型可分为css、js和images等
css：存放公共css，按功能模块新建reset、header、footer等公共css
js：存放公共js，按功能模块新建localstorage、verify等功能性js
images：图片多的时候最好也细分一下子文件夹
8.pages：主要存放小程序的页面文件，每个文件夹为一个页面，文件名须与页面的文件夹名相同。
wxml：结构-----必有
wxss：表现(独立样式)
js：行为-----必有
json：配置文件，用于修改导航栏显示样式等
说明：小程序每个页面必须要有wxml和js文件，其他两种类型的文件可以不需要。文件夹按功能模块分，pages下直接管辖tab模块，如home、 goods、order、me等，每个tab下继续按功能模块新建子页面。
9.filter：数据过滤(filter)方法
wxs：作用是增强wxml标签的表达能力，类似于js，但有所限制，如es6语法不能使用
使用步骤：
a.新建wxs文件，里面写一些数据过滤方法，然后通过module.exports暴露
b.在业务页面wxml中引用wxs，<wxs module="dateFr" src="../../../../filter/dateFr.wxs"></wxs>
c.使用filter，<text>{{dateFr.getTime(item.createdAt,':')}}</text>
说明：wxs不同于js，很多js的api是不支持的，所以在实际开发中并没有什么卵用。
10.总结：
a.基于MVC开发模式，语法逻辑类似于vue
b.布局建议采用flex，局部百分比，特殊媒体查询
c.布局单位采用微信小程序独有的rpx单位，rpx可根据屏幕宽度自适应
原理：rpx以iPhone6为基准规定屏幕宽750rpx，iPhone屏幕宽375px，故1px=2rpx(建议设计稿以iphone6尺寸做为视觉标准稿)
网友评论