微信小程序開發(fā)經(jīng)驗(yàn)總結(jié)

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)稿)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末德挣,一起剝皮案震驚了整個(gè)濱河市恭垦,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖番挺,帶你破解...
    沈念sama閱讀 211,376評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件唠帝,死亡現(xiàn)場離奇詭異,居然都是意外死亡玄柏,警方通過查閱死者的電腦和手機(jī)襟衰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來粪摘,“玉大人瀑晒,你說我怎么就攤上這事「鲜欤” “怎么了瑰妄?”我有些...
    開封第一講書人閱讀 156,966評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長映砖。 經(jīng)常有香客問我间坐,道長,這世上最難降的妖魔是什么邑退? 我笑而不...
    開封第一講書人閱讀 56,432評論 1 283
  • 正文 為了忘掉前任竹宋,我火速辦了婚禮,結(jié)果婚禮上地技,老公的妹妹穿的比我還像新娘蜈七。我一直安慰自己,他們只是感情好莫矗,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,519評論 6 385
  • 文/花漫 我一把揭開白布飒硅。 她就那樣靜靜地躺著,像睡著了一般作谚。 火紅的嫁衣襯著肌膚如雪三娩。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,792評論 1 290
  • 那天妹懒,我揣著相機(jī)與錄音雀监,去河邊找鬼。 笑死眨唬,一個(gè)胖子當(dāng)著我的面吹牛会前,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播匾竿,決...
    沈念sama閱讀 38,933評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼瓦宜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了搂橙?” 一聲冷哼從身側(cè)響起歉提,我...
    開封第一講書人閱讀 37,701評論 0 266
  • 序言:老撾萬榮一對情侶失蹤笛坦,失蹤者是張志新(化名)和其女友劉穎区转,沒想到半個(gè)月后苔巨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,143評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡废离,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,488評論 2 327
  • 正文 我和宋清朗相戀三年侄泽,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蜻韭。...
    茶點(diǎn)故事閱讀 38,626評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡悼尾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出肖方,到底是詐尸還是另有隱情闺魏,我是刑警寧澤,帶...
    沈念sama閱讀 34,292評論 4 329
  • 正文 年R本政府宣布俯画,位于F島的核電站析桥,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏艰垂。R本人自食惡果不足惜泡仗,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,896評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望猜憎。 院中可真熱鬧娩怎,春花似錦、人聲如沸胰柑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽柬讨。三九已至崩瓤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間姐浮,已是汗流浹背谷遂。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留卖鲤,地道東北人肾扰。 一個(gè)月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像蛋逾,于是被迫代替她去往敵國和親集晚。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,494評論 2 348

推薦閱讀更多精彩內(nèi)容