前言

在開發(fā)小程序之前，我們首先需要對(duì)其目錄結(jié)構(gòu)進(jìn)行了解，以便于提升開發(fā)效率。

我們使用微信開發(fā)者工具構(gòu)建一個(gè)小程序項(xiàng)目，我們可以看到目錄下生成了件。

• ① 以.json為后綴的JSON配置文件；
• ② 以.wxml為后綴的WXML模板文件，其可以看做是一個(gè)簡(jiǎn)潔的HTML頁(yè)面，略有不同的則是文件后綴以及其中的部分標(biāo)簽不同；
• ③ 以.wxss為后綴的WXSS樣式文件，也可以看做一個(gè)CSS樣式文件；
• ④ 以.js為后綴的JS腳本文件。

在上圖的示例中，我們可以看到根目錄下有JS、JSON、WXSS類型文件，這是作為全局配置；而pages/index目錄下的四類文件是對(duì)具體的頁(yè)面進(jìn)行詳細(xì)設(shè)置。

由此可以看出這四類文件在小程序中負(fù)責(zé)不同的功能，它們?cè)诓煌哪夸浵掳缪莶煌慕巧?。接下?lái)，我們將詳細(xì)說(shuō)明四類文件的作用。

1JSON配置

在小程序中，JSON是一種數(shù)據(jù)格式，其并不是編程語(yǔ)言，它用于配置靜態(tài)的屬性。我們可以看到在根目錄下有app.json、project.config.json、以及sitemap.json，在pages/index下有index.json。前三種是對(duì)整個(gè)小程序的全局配置，而后一種是對(duì)具體頁(yè)面的配置。接下來(lái)，我們對(duì)其做詳細(xì)說(shuō)明。

①、app.json配置文件

其作為當(dāng)前小程序的全局配置，包括配置頁(yè)面路徑列表、全局默認(rèn)窗口表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部tab欄、小程序接口權(quán)限相關(guān)設(shè)置等。

注：在json文件中是不能加注釋的，此處只為了解釋，因此在使用過(guò)程中切勿加注釋，其他相關(guān)屬性查看官方文檔。

{
 /**
  * 頁(yè)面路徑列表
  * 用于指定小程序由那些頁(yè)面組成，每一項(xiàng)都對(duì)應(yīng)一個(gè)頁(yè)面的路徑。
  * 數(shù)組列表中的第一項(xiàng)代表小程序的首頁(yè)。
 */ 
 "pages": [
  "pages/index/index"
 ],
 /**
  * 全局默認(rèn)窗口表現(xiàn)
  * 用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景顏色
 */ 
 "window": {
  "navigationBarBackgroundColor": "#fff",//導(dǎo)航欄背景顏色
  "navigationBarTitleText": "MiniProgrameDemo",//導(dǎo)航欄標(biāo)題文字內(nèi)容
  "navigationBarTextStyle": "black"http://導(dǎo)航欄標(biāo)題顏色，僅支持black/white
 },
 //底部tab欄
 "tabBar": {
  "list": [//tab的列表，最少2個(gè)，最多5個(gè)
   {
    "pagePath": "pages/index/index",//頁(yè)面路徑
    "text": "首頁(yè)"http://tab上按鈕文字
   },
   {
    "pagePath": "pages/index/index",
    "text": "第二個(gè)首頁(yè)"
   }
  ]
 },
 //配置小程序及其頁(yè)面是否允許被微信索引，若沒(méi)有該配置，則默認(rèn)所有頁(yè)面都允許被索引
 "sitemapLocation": "sitemap.json"
}

②、project.config.json工具配置

通常我們?cè)谑褂酶黝愰_發(fā)工具時(shí)，都會(huì)根據(jù)自己的喜好做一些簡(jiǎn)單的配置，如界面配置成護(hù)眼模式等。但我們更換電腦后，需要重新配置或?qū)胍郧暗呐渲梦募?，而小程序開發(fā)者工具使用project.config.json來(lái)統(tǒng)一管理，我們?cè)诓煌碾娔X上導(dǎo)入同一個(gè)項(xiàng)目的代碼包后，不需要再進(jìn)行配置。

一般我們會(huì)對(duì)項(xiàng)目設(shè)置（setting）中的是否啟用es6轉(zhuǎn)es5（es6）、上傳代碼時(shí)樣式是否自動(dòng)補(bǔ)全（postcss）、是否檢查安全域名和TLS版本（URLCheck）等來(lái)進(jìn)行配置。
注：我們可以通過(guò)開發(fā)者工具右上角的【詳情】按鈕來(lái)快速配置。

③、sitemap配置

小程序提供了配置小程序及其頁(yè)面是否允許被微信索引的功能，我們可以通過(guò)配置一些索引規(guī)則來(lái)約束頁(yè)面是否能被索引，使其不能被微信索引。若沒(méi)有配置該項(xiàng)，則默認(rèn)所有頁(yè)面都允許被索引。

注：其他相關(guān)配置信息請(qǐng)參照官方文檔設(shè)置。

{
 "rules": [{//索引規(guī)則列表
 "action": "allow",//頁(yè)面是否能被索引，取值僅限allow、disallow
 "page": "*"http://*表示所有頁(yè)面，不能作為通配符使用
 }]
}

④、index.json頁(yè)面配置

如果我們想設(shè)置具體的某個(gè)頁(yè)面的屬性，則可以在相應(yīng)頁(yè)面的JSON文件中自定義配置。

{
 "navigationBarBackgroundColor": "#FF5500",//導(dǎo)航欄背景顏色
 "navigationBarTextStyle": "white",//導(dǎo)航欄標(biāo)題顏色，僅支持black/white
 "navigationBarTitleText": "首頁(yè)",//導(dǎo)航欄標(biāo)題文字內(nèi)容
 "backgroundTextStyle": "dark", //下拉loading樣式，僅支持dark/white
 "enablePullDownRefresh": true,//是否啟用下拉刷新
 "onReachBottomDistance": 50,//頁(yè)面上拉觸底事件觸發(fā)時(shí)距離頁(yè)面底部距離
 "usingComponents": {}//頁(yè)面自定義組件配置
}

2WXML模板

我們?cè)陂_發(fā)web頁(yè)面時(shí)，使用HTML+CSS+JS這樣的組合來(lái)構(gòu)建展示給用戶的頁(yè)面，其中HTML是用來(lái)描述當(dāng)前頁(yè)面的結(jié)構(gòu)，CSS是用來(lái)描述頁(yè)面的樣式，JS通常處理頁(yè)面與用戶之間的交互。

而小程序開發(fā)中，其自己的一套書寫規(guī)范，但與web頁(yè)面也有相似之處，如WXML在其中就充當(dāng)了HTML的角色。和HTML非常相似，WXML也是由標(biāo)簽、屬性等構(gòu)成，但也存在著眾多不一樣的地方：

標(biāo)簽名不一樣，在HTML中我們經(jīng)常會(huì)使用div、p、span等來(lái)組合出不同的效果。而在小程序中，我們會(huì)使用view、button、text等標(biāo)簽，同時(shí)小程序頁(yè)提供了地圖、視頻、音頻等組件供開發(fā)者使用。

多了一些wx:if這樣的屬性以及表達(dá)式，在web頁(yè)面開發(fā)中，我們通過(guò)使用JS來(lái)控制DOM，以及響應(yīng)用戶操作。而小程序通過(guò){{}}的語(yǔ)法將數(shù)據(jù)綁定到界面，同時(shí)也可以通過(guò)wx:開頭的屬性來(lái)控制數(shù)據(jù)的顯示。

<!--index.wxml-->
<view class="container">
<text>{{msg}}</text>
<view wx:if="{{flag}}">當(dāng)前顯示狀態(tài)為true</view>
</view>

3 WXSS樣式

WXSS具有CSS大部分特性，同時(shí)也做了一些擴(kuò)充和修改：

新增了尺寸單位。為了考慮手機(jī)設(shè)備屏幕寬度和設(shè)備像素比的不同，需要換算，小程序提供了新的尺寸單位rpx，其不需要開發(fā)者自己換算，而是由小程序底層來(lái)完成。
提供全局樣式和局部樣式。在app.wxss中可以設(shè)置全局樣式，而在具體的頁(yè)面.wxss中可以設(shè)置當(dāng)前頁(yè)面的樣式。
此外WXSS僅支持部分CSS選擇器。

/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
} 
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}

4 JS交互

在web開發(fā)中，我們使用JS來(lái)控制與用戶的交互行為，而小程序中也是使用JS來(lái)處理用戶的操作。如先前，我們?cè)陧?yè)面上顯示“Hello World！”。我們只需要在頁(yè)面的JS文件中，對(duì)其進(jìn)行設(shè)置值即可。

Page({
 data: {
 msg: 'Hello World',
 flag: false,
 canIUse: wx.canIUse('button.open-type.getUserInfo')
 },
 onLoad: function () {
 },
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論