今天有時間和大家分享下鄙人這段時間對微信小程序的開發(fā)心得矛紫。
首先，微信小程序?qū)τ谛“讈碚f牌里，也沒有想象的那么難颊咬。只要你有JS、HTML牡辽、CSS基礎(chǔ)喳篇，上手真的不難，但是肯定要度娘不離手了态辛，但至少咱可以搞啊麸澜，是吧，啊哈~
此處提供本人的電商類的處女作奏黑，希望能對猿友們起到幫助~
我呢就是從一個小白開始的炊邦，所以剛開始上手的時候编矾，真的是一臉懵逼啊。那怎么辦呢馁害？我先分享下學(xué)習(xí)歷程及一點經(jīng)驗：
1.要有H5基礎(chǔ)窄俏，沒有或者不懂，那真的玩不來碘菜。`先去補補吧凹蜈，推薦imooc，有很多不錯的全套的基礎(chǔ)學(xué)習(xí)資源炉媒。`
2.先安裝好編譯器踪区。然后到官方網(wǎng)上，仔細(xì)的閱讀官方文檔吊骤，真的是很詳細(xì)缎岗，很全面的文檔。`（PS：開發(fā)中各種不論是網(wǎng)絡(luò)請求白粉，還是數(shù)據(jù)存儲传泊，亦或者是UI方面的API全都在文檔里了，而且都有demo）`
3.搜集一些與你要開發(fā)的小程序類別相同的開源項目鸭巴，先備著眷细。`最好找一些比較新的，舊一些的你看起來會比較吃力鹃祖，因為很多東西都過時了`
4.開始準(zhǔn)備上手溪椎，開擼！Ｌ窨凇校读！擼的時候就直接擼項目就好，不要去擼個button啊或者image啊什么的這種控件級的demo了祖能。果斷擼項目歉秫，遇到問題就直接去看你準(zhǔn)備好的開源項目，去參考人家的寫法养铸。
5.這個時候呢雁芙，大體上，一些常規(guī)的UI是都可以的了钞螟。但是呢兔甘，肯定會有一些特別的UI需要實現(xiàn)。這個時候就需要自定義了鳞滨，對~自定義裂明。可以先百度下`<template>`包裹的相當(dāng)于一個組件。后面用就可以直接`<template name='xxx' data='{xxx}'></template>`就好啦闽晦。
6.UI布局方面呢。說實話之前寫OC代碼提岔，搭一個普通的頁面UI部分的代碼也要近百行~~仙蛉，但是用HTML+CSS真的是爽到爆！一個頁面下來可能就十幾行的代碼碱蒙，UI創(chuàng)建+布局就搞定了荠瘪。真的是爽。
7.JS方面赛惩，就是放邏輯代碼的哀墓。和平時的開發(fā)代碼沒太大差別，主要就是一些API的不同而已喷兼±捍拢看下官方文檔，就都懂了季惯，比較簡單~
再分享下項目里的一些代碼片段吠各，及一些心得吧：
1.先明確小程序的幾個文件(.js .json .wxml .wxss)
.js 就是寫js代碼的文件了
.json 就是負(fù)責(zé)控制navigation的一些屬性的，比如title, color, 等勉抓，查看文檔會有相關(guān)的說明
.wxml 類似HTML贾漏。主要寫UI代碼
.wxss 類似于CSS。主要寫布局代碼
2.熟悉.js文件中的Page()函數(shù)內(nèi)的生命周期的相關(guān)方法藕筋。
data:{} 是用來存放成員變量的
onLoad:{} 相當(dāng)于 iOS的ViewDidLoad
onReady:{} 相當(dāng)于 ViewWillAppear
onShow:{} 相當(dāng)于 ViewDidAppear
onHide:{} 相當(dāng)于 ViewDidDisappear
通過介紹纵散，猿友們應(yīng)該知道各個方法內(nèi)，寫什么樣的代碼了吧哈隐圾。
基本上伍掀，網(wǎng)絡(luò)請求，成員變量的賦值翎承，或者接收上一級頁面?zhèn)鬟f的值硕盹，都是在onLoad方法內(nèi)做的。
其他文件就沒什么需要特別說明的了
3.還有比如上拉加載叨咖，下拉刷新瘩例，官方也都有提供相應(yīng)的方法。不需要自定義甸各，除非有特殊需求垛贤，一般是夠用的了。再有比較難一些的就是數(shù)據(jù)傳遞了趣倾。
`比如說網(wǎng)絡(luò)數(shù)據(jù)的展示流程`
`.js(網(wǎng)絡(luò)請求->賦值到成員變量)->.wxml(<view>{{成員變量}}</view>)`
如果是涉及到布局相關(guān)的數(shù)據(jù)的話聘惦，那是不能傳遞到.wxss文件內(nèi)的。這樣就只能將css代碼寫到.wxml文件內(nèi)了儒恋，
比如：`demo中personal文件下的.wxml文件中的login類及unlogin類的替換`
就用到保存狀態(tài)的變量來update頁面狀態(tài)善绎。
可以參考Demo中personal中.wxml的第10行代碼
4.搭建UI的時候經(jīng)常會使用到for循環(huán)來遍歷數(shù)據(jù)黔漂。
微信也很友好的為我們提供了相應(yīng)的函數(shù)。
比如我們想展示商城中的所有鞋子禀酱，那么該數(shù)據(jù)的json格式大概是shopping_list=[{"id":1, "name":"男鞋", "size":40}, {"id":2, "name":"女鞋", "size":40}, {"id":3, "name":"童鞋", "size":40}, ...]這樣炬守。
我們可以這樣寫<block wx:for="{{shopping_list}}" wx:key="your_key">此處寫你的控件</block>
以上可以參考Demo中cart中.wxml第45行處的代碼
最后分享下編譯器的一些常規(guī)使用
1.每次寫完代碼后，編譯的話剂跟，直接使用快捷鍵command+s减途。
2.寫項目如果用的服務(wù)器還是使用的http的話，記得點擊編譯器右上角的詳情曹洽，勾選上不校驗合法域名...這一欄鳍置。
3.當(dāng)項目的頁面層級較深時，每次想要編譯新寫的代碼送淆，就要從頭進(jìn)入一次税产。每次都很浪費時間。這時坊夫，你可以點擊編譯器正上方的普通編譯-->添加編譯模式-->名稱自定義砖第、啟動頁就設(shè)置成你要編譯的那個頁面;剩余的啟動參數(shù)及進(jìn)入場景根據(jù)實際需求來設(shè)置就好
4.說下下方的控制臺console就是輸出一些錯誤警告及打印环凿；sources是用來斷點調(diào)試用的梧兼；network可以查看到網(wǎng)絡(luò)請求獲取的數(shù)據(jù)；storage查看本地緩存的數(shù)據(jù)智听；appdata見名知意羽杰；wxml查看UI層級，更可以動態(tài)調(diào)試(修改數(shù)據(jù)到推，修改css樣式考赛，增加css樣式等等，自己體會哈)
5.真機(jī)調(diào)試的話就需要到微信開發(fā)后臺去配置應(yīng)用的id才可以莉测。配置之后必須使用https域名才可以獲取數(shù)據(jù)颜骤。
最后最后！５仿薄忍抽！
謝謝猿友的閱讀哈~ 也希望這篇文章能幫到想要學(xué)習(xí)微信小程序開發(fā)的朋友們《可能由于鄙人第一次寫小程序鸠项，Demo中寫滿了注釋。編碼格式也很規(guī)范子姜，看起來會很清晰祟绊，如果大家喜歡或者對你有幫助，請留下您的喜歡??~
謝謝！Ｄ脸椤嘉熊！
