微信小程序目錄結(jié)構(gòu)

一個(gè)小程序的主體部分由3個(gè)文件組成：app.js、app.json和app.wxss，必須放在項(xiàng)目的根目錄。其中app.js和app.json文件是必需的，作用分別是小程序邏輯和小程序公共配置，而app.wxss的作用是小程序公共樣式表。

app.js小程序邏輯：用來(lái)定義全局?jǐn)?shù)據(jù)和函數(shù)的使用，它可以指定微信小程序的生命周期函數(shù)。app.js中還可以定義一些全局的函數(shù)和數(shù)據(jù)，其他頁(yè)面引用app.js文件后就可以直接使用全局函數(shù)和數(shù)據(jù)。

app.json小程序公共配置：可以對(duì)5個(gè)功能進(jìn)行設(shè)置，配置頁(yè)面路徑，配置窗口表現(xiàn)，配置標(biāo)簽導(dǎo)航，配置網(wǎng)絡(luò)超時(shí)，配置debug模式。

app.wxss小程序公共樣式表：對(duì)css樣式進(jìn)行了拓展，和css的使用方式一樣，只要頁(yè)面有全局樣式的class，就都可以渲染全局樣式的效果。

另外一個(gè)小程序頁(yè)面由四個(gè)文件組成：js、wxml、json和wxss，用于指定小程序由哪些頁(yè)面組成，每一項(xiàng)都對(duì)應(yīng)一個(gè)頁(yè)面的路徑+文件名信息。文件名不需要寫(xiě)文件后綴，框架會(huì)自動(dòng)去尋找對(duì)于位置的 .json, .js, .wxml, .wxss 四個(gè)文件進(jìn)行處理。

注意：為了方便開(kāi)發(fā)者減少配置項(xiàng)，描述頁(yè)面的四個(gè)文件必須具有相同的路徑和文件名。

在小程序開(kāi)發(fā)前了解了其目錄結(jié)構(gòu)后，創(chuàng)建項(xiàng)目時(shí)就非常方便了，參考微信小程序開(kāi)發(fā)工具代碼編輯教程。

微信小程序項(xiàng)目目錄結(jié)構(gòu)介紹及搭建最先出現(xiàn)在微信小程序觀察網(wǎng)-微信小程序制作開(kāi)發(fā)、小程序運(yùn)營(yíng)推廣。

說(shuō)到微信小程序開(kāi)發(fā)Wxml模板文件，我們不得不說(shuō)一下網(wǎng)頁(yè)編程，網(wǎng)頁(yè)編程一般用使用到Html+Css+Js等語(yǔ)言。Html是指該頁(yè)面的結(jié)構(gòu)，CSS是用來(lái)描述頁(yè)面的樣子。而JS是交互的，主要是處理頁(yè)面和用戶之間的交互。而在微信小程序中，微信小程序開(kāi)發(fā)Wxml模板文件類似于Html的角色。打開(kāi) pages/index/index.wxml，你會(huì)看到以下的內(nèi)容:

<view class=”container”>

??<view class=”userinfo”>

????<button wx:if=”{{!hasUserInfo && canIUse}}”>獲取頭像昵稱</button>

????<block wx:else>

??????<image src=”{{userInfo.avatarUrl}}”?background-size=”cover”></image>

??????<text class=”userinfo-nickname”>{{userInfo.nickName}}</text>

????</block>

??</view>

??<view class=”usermotto”><text class=”user-motto”>{{motto}}</text></view></view>

　　微信小程序開(kāi)發(fā)Wxml模板文件和html類似的地方在于標(biāo)簽和屬性相似，但還有很多地方不同。

1. 標(biāo)簽名字不同

Html標(biāo)簽名字一般使用到的是div，p,spon.而小程序wxml模板文件標(biāo)簽名字用的是view,button,text等。

2. 開(kāi)發(fā)效率

開(kāi)發(fā)者在使用html的時(shí)候，可以根據(jù)這些標(biāo)簽組成不同的組件使用。需要自己組件開(kāi)發(fā)，開(kāi)發(fā)效率就低些。

wxml模板文件標(biāo)簽就是小程序給開(kāi)發(fā)者包裝好的基本能力，可以使用地圖、視頻等組件能力，大大提高了開(kāi)發(fā)的效率。

3.多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達(dá)式

Wxml怎么寫(xiě)

<text>{{msg}}</text>

JS 只需要管理狀態(tài)即可:

this.setData({ msg: “Hello World” })

以上和大家詳細(xì)了一下微信小程序開(kāi)發(fā)Wxml模板文件，主要和大家說(shuō)了一些html和wxml模板文件有相似之處還有不同的地方，用對(duì)比的方式跟大家說(shuō)明了小程序Wxml模板文件。希望以上的內(nèi)容對(duì)大家有所幫助！想要了解更多的微信小程序開(kāi)發(fā)可以看看微信小程序開(kāi)發(fā)文檔匯總。

微信小程序開(kāi)發(fā)Wxml模板文件是什么最先出現(xiàn)在微信小程序觀察網(wǎng)-微信小程序制作開(kāi)發(fā)、小程序運(yùn)營(yíng)推廣。