1.project.config.json:項(xiàng)目配置文件,含有appid桨嫁、項(xiàng)目名稱projectname等項(xiàng)目配置信息
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:小程序全局配置,配置小程序是由哪些頁面組成的璃吧,還有配置小程序的窗口楣导,如背景顏色、導(dǎo)航的顏色肚逸、導(dǎo)航文章樣式等
????pages:[]//各大頁面路徑
????window:窗口配置
????tabBar:配置導(dǎo)航tab
4.app.js:監(jiān)聽并處理小程序生命周期爷辙,聲明一些全局方法、屬性
????//引入公共功能模塊
????import verify from './pubic/js/verify';//正則匹配驗(yàn)證模塊
????import verify from './pubic/js/localstorage';//本地存儲(chǔ)技術(shù)模塊
????......(至于公共功能模塊放在public還是utils文件夾下還值得探討)
????App({
????????onLaunch(){}//程序初始化執(zhí)行此方法
????})
5.README.md:項(xiàng)目說明文件
6.utils:用于存放全局的一些js文件朦促,公共用到的一些事件處理代碼文件可以放到該文件夾下,用于全局調(diào)用栓始,對于允許外部調(diào)用的方法务冕,用module.exports進(jìn)行暴露,才能在其他js文件中通過require或者import引入幻赚。
????說明:默認(rèn)有個(gè)utils/utils.js
7.public:存放靜態(tài)資源文件禀忆,按資源類型可分為css臊旭、js和images等
????css:存放公共css,按功能模塊新建reset箩退、header离熏、footer等公共css
????js:存放公共js,按功能模塊新建localstorage戴涝、verify等功能性js
????images:圖片多的時(shí)候最好也細(xì)分一下子文件夾
8.pages:主要存放小程序的頁面文件滋戳,每個(gè)文件夾為一個(gè)頁面,文件名須與頁面的文件夾名相同啥刻。
????wxml:結(jié)構(gòu)-----必有
????wxss:表現(xiàn)(獨(dú)立樣式)
????js:行為-----必有
????json:配置文件奸鸯,用于修改導(dǎo)航欄顯示樣式等
????說明:小程序每個(gè)頁面必須要有wxml和js文件,其他兩種類型的文件可以不需要可帽。文件夾按功能模塊分娄涩,pages下直接管轄tab模塊,如home映跟、 goods蓄拣、order、me等努隙,每個(gè)tab下繼續(xù)按功能模塊新建子頁面弯蚜。
9.filter:數(shù)據(jù)過濾(filter)方法
????wxs:作用是增強(qiáng)wxml標(biāo)簽的表達(dá)能力,類似于js剃法,但有所限制碎捺,如es6語法不能使用
????使用步驟:
????????a.新建wxs文件,里面寫一些數(shù)據(jù)過濾方法贷洲,然后通過module.exports暴露
????????b.在業(yè)務(wù)頁面wxml中引用wxs收厨,<wxs module="dateFr" src="../../../../filter/dateFr.wxs"></wxs>
????????c.使用filter,<text>{{dateFr.getTime(item.createdAt,':')}}</text>
????????說明:wxs不同于js优构,很多js的api是不支持的诵叁,所以在實(shí)際開發(fā)中并沒有什么卵用。
10.總結(jié):
????a.基于MVC開發(fā)模式,語法邏輯類似于vue
????b.布局建議采用flex涣狗,局部百分比凑耻,特殊媒體查詢
????c.布局單位采用微信小程序獨(dú)有的rpx單位,rpx可根據(jù)屏幕寬度自適應(yīng)
????原理:rpx以iPhone6為基準(zhǔn)規(guī)定屏幕寬750rpx侥锦,iPhone屏幕寬375px,故1px=2rpx(建議設(shè)計(jì)稿以iphone6尺寸做為視覺標(biāo)準(zhǔn)稿)