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

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

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

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

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

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

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

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

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

開發(fā)者開發(fā)微信小程序，需要對小程序的界面進(jìn)行排版，此時就要用到WXML和WXSS了。WXML指定了界面的框架結(jié)構(gòu)，而WXSS起到的作用就是指定界面的框架及元素的顯示樣式。

按照微信官方的介紹，WXSS具有CSS的大部分特性，并且在CSS的基礎(chǔ)上進(jìn)行了擴(kuò)充和修改，以適合廣大的前端開發(fā)者開發(fā)微信小程序。CSS的特性和使用方法想必開發(fā)朋友都清楚，這里就不介紹了。既然官方說WXSS具有CSS的大部分特性，那就說明還是有部分是不同的，小編就來整理一下哪些地方不同。

差別一：沒有body

小程序的每一個page里都沒有body屬性，要想影響整個頁面的樣式可以通過在WXSS中對page進(jìn)行設(shè)置來實(shí)現(xiàn)。

差別二：尺寸變化

在CSS里衡量尺寸的單位有很多，比如px、em等，而WXSS里除了這些外，還新增了一個單位：rpx。它最重要的特性是可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，畢竟小程序作為在移動端展現(xiàn)需要適配各種規(guī)格的移動設(shè)備。官方介紹，規(guī)定屏幕寬為750rpx，如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

差別三：樣式導(dǎo)入

小程序WXSS支持樣式的導(dǎo)入，比如我們使用一些其他庫的時候就可以直接導(dǎo)入第三方的WXSS文件，這是一個相當(dāng)有用的功能。

差別四：內(nèi)聯(lián)樣式

WXSS和CSS一樣支持class和style兩種樣式，但用法上有一些區(qū)別。按照官方的說法概括為：樣式中存在動態(tài)內(nèi)容，就寫道style中，其他的都放到class文件。

差別五：選擇器

如官方介紹，WXSS基本支持CSS中的選擇，而且類似于last-child之類的css的高級屬性，也可以在WXSS中使用。

差別六：全局樣式與局部樣式

在小程序中，一般一個WXSS負(fù)責(zé)一個WXML視圖文件，但一個應(yīng)用難免會有一些共用的屬性，所以小程序?yàn)閼?yīng)用自身提供了一個WXSS—app.wxss，它不用人工引入，會自動的加載到每一個視圖上。

總之，小程序樣式語言WXSS具有了CSS大部分屬性，而且還拓展了尺寸單位和樣式導(dǎo)入等特性，更適合開發(fā)微信小程序。對于熟悉CSS的開發(fā)者來說WXSS上手并沒有太大難度，當(dāng)然更多的細(xì)節(jié)差別還有待開發(fā)朋友們多挖掘探索。

微信小程序WXSS樣式介紹最先出現(xiàn)在微信小程序觀察網(wǎng)-微信小程序制作開發(fā)、小程序運(yùn)營推廣。

Wxss樣式文件是一種樣式語言，主要是用來描述WXMl的組件樣式。它的用途是用來觀察wxml模板組件怎么顯示的。為了廣大開發(fā)者適應(yīng)微信小程序開發(fā)，Wxss樣式文件不僅具有大部分css特性而且還對其特性作出一些擴(kuò)展和修改。

擴(kuò)展的地方：增加了尺寸單位和提供了全局樣式和局部樣式。

1.增加了尺寸單位

Wxss樣式文件新增了底層rpx尺寸單位，主要目的是在于減少開發(fā)者換算的工作難度，直接交給小程序底層來換算就可以了。

Rpx尺寸單位：可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，一般規(guī)定屏幕寬度為750rpx。

舉一個例子：大家都用過 iPhone6手機(jī)，屏幕寬度為375px,一共有750個rpx。

那么1rpx=0.5px

2.提供了全部樣式和局部樣式

我們寫代碼的時候，可以寫app.wxss作為全局樣式，目的是可以了解到當(dāng)前小程序的所有頁面。可以寫page.wxss作為局部樣式，但局部樣式只對當(dāng)面頁面生效。

修改的地方：Wxss樣式文件只支持部分css選擇器。

以上詳細(xì)的介紹了一下什么是微信小程序開發(fā)Wxss樣式文件，相信大家通過以上的內(nèi)容應(yīng)該對wxss樣式有一個初步的認(rèn)知，真正想要了解微信小程序開發(fā)，這些知識是遠(yuǎn)遠(yuǎn)不足的，想要了解更多的微信小程序開發(fā)知識，可以看看微信小程序開發(fā)文檔匯總。這樣對微信小程序開發(fā)有一個深入了解。

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