一、目錄文件詳解

1.首先看下根目錄下的app.json的文件，可以看到在”pages”的數組裏，裏麵配置了每個(ge) 界麵，且包含了每個(ge) 界麵文件的目錄

2.可以看到每個(ge) 頁麵需要包含兩(liang) 個(ge) 文件，一個(ge) 是js文件，是每個(ge) 界麵的入口，wxml的文件是每個(ge) 界麵的布局文件，那wxss是什麽(me) 呢？它是每個(ge) 界麵的樣式文件。比如：看下圖可以看到，創建新的項目有兩(liang) 個(ge) 界麵，一個(ge) 是index.js界麵，一個(ge) 是logs.js的界麵，且都有對應的布局文件（.wxml）和樣式文件（.wxss）

3.可以看到在logs文件夾中比index文件夾中多出了一個(ge) logs.json的文件，這個(ge) 文件是幹嘛的呢？可見，這個(ge) 文件不是必須的，因為(wei) index界麵的文件夾中就沒有這個(ge) 文件，logs.json這個(ge) 文件配置了一個(ge) 界麵的title的信息

具體(ti) 效果可以看下gif圖

總結

1.根目錄下的app.js是整個(ge) 程序的入口，app.json配置整個(ge) 程序的信息

2.一個(ge) 微信小程序必需包含的文件隻需要有app.js和app.json以及對應界麵的js文件和布局文件（.wxml）就可以了

二、視圖渲染

一：創建一個頁麵

1.首先我們(men) 新建一個(ge) 項目，在新建的項目中有index 頁麵和 logs 頁麵，即歡迎頁和小程序啟動日誌的展示頁，他們(men) 都在 pages 目錄下。微信小程序中的每一個(ge) 頁麵的【路徑+頁麵名】都需要寫(xie) 在 app.json 的 pages 中，且 pages 中的第一個(ge) 頁麵是小程序的首頁。

每一個(ge) 小程序頁麵是由同路徑下同名的四個(ge) 不同後綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js後綴的文件是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件，.wxml後綴的文件是頁麵結構文件。

好了，然後我們(men) 新建一個(ge) 自己的頁麵，首先建一個(ge) 文件夾（myPage），在文件夾下創建對應的布局文件（myPage.wxml）和js文件（myPage.js），最後記得在app.json中配置頁麵信息，在app.json中需要注意了，在pages的數組裏，第一個(ge) 代表著啟動時第一個(ge) 加載的頁麵

2.然後進入調試界麵，點擊重啟按鈕，看下效果，會(hui) 發現在控製台中彈出了報錯的信息，如下：

3.看報錯的信息，很清楚的知道在myPage.js文件中沒有找到Page方法，因此我們(men) 在myPage.js文件中調用Page方法，然後調試，重啟，就會(hui) 發現不報錯了！

4.好了，在第一點中也說到，在app.json中pages的數組裏，第一個(ge) 代表著啟動時第一個(ge) 加載的頁麵，那好我們(men) 把順序調轉一下，就可以驗證我們(men) 的結論了

建議看官方的教程：https://mp.weixin.qq.com/debug/wxadoc/dev/

二、組件的使用和數據的綁定

1.要了解微信小程序組件的使用，最好的方法就是查看微信小程序的API文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

可以看到API文檔詳細的介紹了各種組件的使用，要熟悉組件的使用，最好的方式就是多練了!

2.看著文檔，把官方文檔的例子直接貼進來，然後我們(men) 也創建一個(ge) text組件，看看效果先吧：

結合代碼進行分析：

js代碼：

三、渲染標簽

微信小程序給我提供了兩(liang) 種渲染標簽：

1.判斷標簽wx:if和wx:else

雖然之前沒有接觸過js，可是代碼也挺容易理解的，邏輯思維跟androids還是有點像，不過想學好，還是要學下js的，所以最近我也會(hui) 學下js

最後我們(men) 看下效果圖吧，可以看到當位true的時候就顯示1 false時顯示2

2.循環標簽（wx:for）

看下循環標簽在布局文件中的使用吧

看下效果圖：

四、樣式模板的使用

從(cong) 上麵的代碼就可以看到，一個(ge) 界麵可能會(hui) 用到很多布局的代碼，可是界麵與(yu) 界麵之間可能會(hui) 有很多重複的樣式，然而這些樣式的代碼，每次都要重新寫(xie) 就很麻煩了，而且也浪費資源，微信小程序像其他開發一樣，也有樣式模板的使用方式

1.使用include的方式包含模板樣式 
例如：<include src="../templates/myText" /> 
具體(ti) 的使用看圖片：

使用這種方式引用模板，實際上就是等同於(yu) 把templates中的myText的代碼全部複製到include這裏

2.使用import的方式 
例如：

<!--模板樣式的使用 底部樣式--> <import src="../templates/footer" /> <template is="footer1" />

• 1
• 2
• 3

最後看下效果圖： 

Demo下載地址：Text1.zip