微信小程序新手教程目錄文件詳解視圖渲染詳解，本篇默認(rèn)已經(jīng)成功安裝微信小程序工具，來(lái)和小編一起看看吧

一、目錄文件詳解

1.首先看下根目錄下的app.json的文件，可以看到在”pages”的數(shù)組里，里面配置了每個(gè)界面，且包含了每個(gè)界面文件的目錄

2.可以看到每個(gè)頁(yè)面需要包含兩個(gè)文件，一個(gè)是js文件，是每個(gè)界面的入口，wxml的文件是每個(gè)界面的布局文件，那wxss是什么呢?它是每個(gè)界面的樣式文件。比如：看下圖可以看到，創(chuàng)建新的項(xiàng)目有兩個(gè)界面，一個(gè)是index.js界面，一個(gè)是logs.js的界面，且都有對(duì)應(yīng)的布局文件(.wxml)和樣式文件(.wxss)

3.可以看到在logs文件夾中比index文件夾中多出了一個(gè)logs.json的文件，這個(gè)文件是干嘛的呢?可見(jiàn)，這個(gè)文件不是必須的，因?yàn)閕ndex界面的文件夾中就沒(méi)有這個(gè)文件，logs.json這個(gè)文件配置了一個(gè)界面的title的信息

具體效果可以看下gif圖

2.然后進(jìn)入調(diào)試界面，點(diǎn)擊重啟按鈕，看下效果，會(huì)發(fā)現(xiàn)在控制臺(tái)中彈出了報(bào)錯(cuò)的信息，如下：

3.看報(bào)錯(cuò)的信息，很清楚的知道在myPage.js文件中沒(méi)有找到Page方法，因此我們?cè)趍yPage.js文件中調(diào)用Page方法，然后調(diào)試，重啟，就會(huì)發(fā)現(xiàn)不報(bào)錯(cuò)了!

4.好了，在第一點(diǎn)中也說(shuō)到，在app.json中pages的數(shù)組里，第一個(gè)代表著啟動(dòng)時(shí)第一個(gè)加載的頁(yè)面，那好我們把順序調(diào)轉(zhuǎn)一下，就可以驗(yàn)證我們的結(jié)論了

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

二、組件的使用和數(shù)據(jù)的綁定

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

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

2.看著文檔，把官方文檔的例子直接貼進(jìn)來(lái)，然后我們也創(chuàng)建一個(gè)text組件，看看效果先吧：

js代碼：

三、渲染標(biāo)簽

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

1.判斷標(biāo)簽wx:if和wx:else

雖然之前沒(méi)有接觸過(guò)js，可是代碼也挺容易理解的，邏輯思維跟Android還是有點(diǎn)像，不過(guò)想學(xué)好，還是要學(xué)下js的，所以最近我也會(huì)學(xué)下js

最后我們看下效果圖吧，可以看到當(dāng)位true的時(shí)候就顯示1 false時(shí)顯示2

看下效果圖：

四、樣式模板的使用

從上面的代碼就可以看到，一個(gè)界面可能會(huì)用到很多布局的代碼，可是界面與界面之間可能會(huì)有很多重復(fù)的樣式，然而這些樣式的代碼，每次都要重新寫(xiě)就很麻煩了，而且也浪費(fèi)資源，微信小程序像其他開(kāi)發(fā)一樣，也有樣式模板的使用方式

1.使用include的方式包含模板樣式

例如：

具體的使用看圖片：

使用這種方式引用模板，實(shí)際上就是等同于把templates中的myText的代碼全部復(fù)制到include這里

2.使用import的方式

例如：

最后看下效果圖：

以上就是好吧啦網(wǎng)微信小程序新手教程目錄文件詳解視圖渲染詳解了，希望能幫到你