? ? 有了前兩節(jié)的哆哩哆嗦的鋪墊，相信有些同學已經懵逼了睹耐，有些同學可能已經心有所悟。不管是哪種情形部翘，建議你還是接著頭皮發(fā)麻的向下看硝训，看的同時，涉及到代碼的新思，你必須全程跟著敲一遍代碼窖梁，動一下手。否則你這純粹是耍流氓夹囚，不是來學習的纵刘，而是來打發(fā)時間的。
? ?本講時荸哟，博主使用的是微信開發(fā)者工具 1.02.2003250版本假哎，后續(xù)的版本不能保證新建項目時，界面是否會發(fā)生變化鞍历。
打開微信開發(fā)者工具舵抹，會要求你通過微信掃碼登錄，登錄后左側選擇"小程序項目"下選擇小程序劣砍，右側選擇"新建項目"標簽卡惧蛹，輸入?項目名稱、選擇項目路徑、AppID,其他保持不變香嗓。AppID如果沒有迅腔，可以點擊AppID行下方的"測試號"按鈕以繼續(xù)進行項目的新建。完成后靠娱，點擊界面右下角的"新建"按鈕沧烈，生成項目。
現在我們來仔細觀察項目目錄及結構饱岸，明白哪些文件是做什么用的掺出。
1、?目錄
這個目錄下苫费，正如單詞意思汤锨，頁面！就是我們根據需求功能點開發(fā)的所有頁面百框，增放在此目錄下闲礼。比如登錄頁面、商品列表頁面铐维、商品詳情頁面柬泽、訂單頁面等，都在此目錄下進行陳放嫁蛇。
2锨并、?目錄
你可以打開看到，里面有一個util.js文件睬棚，不出意外 第煮，你能看到里面有一個函數，是處理日期的函數抑党！是的包警，就是實用工具的目錄。這里放的就是我們抽出來的公共的函數底靠、數據處理害晦、頁面渲染(很少，比如微信的wxs文件)的公共的東西暑中，即這個目錄下的文件主要是為pages下的頁面文件進行服務的壹瘟。
3、?
app開頭的文件鳄逾，app.js俐筋、app.json、app.wxss,我們來單獨一個一個的講严衬。
3.1?app.js文件，這個文件是小程序啟動加載的第一個處理文件笆呆，里面實例化了一個App類请琳，這個類是全局存在 粱挡，并且只能初始化一個！它的功能俄精，根據你的使用及業(yè)務場景可以進行擴展询筏，比如獲取授權登錄相關的數據、獲取設備信息數據竖慧，你可以體會到嫌套，這些數據，全部都是小程序要用到的基本數據圾旨，所以放在一開始就獲取并處理相應的業(yè)務踱讨。其他頁面如果要用到這些數據，就可以通過全局函數 getApp()來獲取這個單例砍的，讀取里面已經保存的數據痹筛。
3.2?app.json，是小程序全局頁面管理廓鞠、窗體樣式管理的配置文件帚稠，你打開后，可以看到床佳，它里面定義了一個字典數據而已滋早。不同的是這些字典的鍵是特定的，服務于不程序的砌们，而不是普通的數據字典隨便定義鍵值杆麸！具體鍵值及釋義，可以參考微信小程序開發(fā)文檔怨绣，這里就不一一列舉角溃。這里重點說說，pages節(jié)點篮撑，是所有頁面的管理器减细，類似于windows的注冊表，所有要顯示的業(yè)務頁面赢笨，都必須在這個節(jié)點里面以字符串的形式存在未蝌，否則你跳轉到頁面時，就會顯示白屏或者是報錯茧妒，不會正確顯示你已經開發(fā)的頁面萧吠，當你對于某個頁面文件進行重命名的時候，一定要注意此節(jié)點中的命名也同時被改過來桐筏。
3.3?app.wxss纸型，wxss即css樣式文件，在此文件中定義的樣式，具有全局可用性狰腌。即公共的樣式除破，可以定義在此文件中，當然你要是認為這樣只是提高了開發(fā)效率并沒有降低維護成本琼腔，你仍然可以選擇寫在你的頁面中的wxss文件中瑰枫。
對于project.config.json及sitemap.json文件，讀者朋友暫時先不必理會丹莲，如果你非得要現在知道那是什么玩意光坝，你可以先打開看看，查看官方的文檔釋義甥材，此處因為不是核心的開發(fā)文件盯另，不進行講解。
對于項目結構擂达，我們就已經探索的差不多了土铺，現在我們來看默認生成的頁面，認真觀察領悟板鬓，將非常有利于我們的實戰(zhàn)開發(fā)及以后的提升悲敷。整個頁面視覺感覺相對簡單，顯示的內容也并不復雜俭令。
我們仍然以APP的眼光來看頁面的構成后德。
navigationbar有個標題叫做wechat、有兩個按鈕?抄腔。
界面中意有個“獲取頭像昵稱”的button有展示了一個程序萬有定力：helloword!你學習任何語言瓢湃，第一個寫的程序都會讓你重新打開這個世界，認知這個世界赫蛇∶嗷迹可能你已經打開見過很多世界了，但這些世界并沒有給你帶來什么的什么悟耘。落蝙。。我們再來看看這個頁面組成暂幼。
view你把它理解來div筏勒，專業(yè)用來包裹其他組件的，比如包裹button旺嬉、text管行、image等組件，當然也可以不包裹邪媳，直接用捐顷。但是為了后面的閱讀及維護 荡陷，建議還是包裹，形成明確的層級迅涮，將會很有用亲善。
wx:if="{{!hasUserInfo?&&?canIUse}}"
你看到了，if就是特定的小程序的語法逗柴，它就是這樣用的，你記下就行了顿肺。wx:if="{{}}",雙大括號里面寫你的邏輯戏溺，在什么樣的條件下顯示這個button，如果條件不滿足屠尊，則不顯示這個button,而顯示下面緊跟著的wx:else的image與text組合旷祸。與wx:else作判斷分支的還有wx:elif.
wx:if="{{}}"
wx:elif
wx:else
這三個難兄難弟被設計為條件控制流語句，人家就是宋這樣設計的讼昆，你記下就行了托享。與其他語言相同，如果出現浸赫，他們也是同時出現闰围，并行出現。
!hasUserInfo?&&?canIUse既峡，
這兩個參數就是定義在頁面對應的js文件中變量羡榴，你可以去找找，改改它的值运敢，倒騰倒騰校仑，看看頁面表現。
{{motto}}
<text?></text?>被設計用來顯示簡單的文字传惠，何為簡單的文字迄沫，就是普通的文本。這里不引申富文本(html文件文本)卦方，后面用到的時候再講羊瘩。{{motto}}，也許你已經注意到了愿汰，{{}}的特定意義：就是將js文件中的定義的變量進行使用時困后，必須放在{{}}中!是的，你很聰明衬廷，就是樣子摇予，你在js文件看到了motto的初始值為Hello?World，它則被正確的顯示到了屏幕上吗跋。如果你用的文本顯示不是js文件中定義的侧戴，那不必使用{{}}進行包裹宁昭，你將上面的改為：
motto
按下ctrl+S你可以看到motto被作為字符串直接顯示出來了。而使用{{}}包裹的motto則被稱為字面量酗宋，即不顯示組成它的字符积仗，而是顯示它指向的字符。
index.wxml對應的頁面樣式當然是index.wxss,看到沒蜕猫，這里的頁面布局就是我們第二講中講到的flex布局寂曹，會這一種布局，走遍前端的天下回右！
雖然這個簡單的頁面隆圆，可以有很多需要講到的東西及知識點，但是我還是想要以循序漸進的方式進行講解翔烁，合適的時候講合適的東西渺氧，而不需要一股腦兒的把所有東西搬出來給你灌輸進去，那樣學習太累蹬屹。你也未必能吸收多少侣背。。
至此慨默，我應該結束這一節(jié)時的內容講解贩耐，留給大家在這個骨架頁面中倒騰研究，做筆記业筏，溫故實習憔杨。
