微信小程序中目錄結(jié)構(gòu)的示例分析

這篇文章主要為大家展示了“微信小程序中目錄結(jié)構(gòu)的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序中目錄結(jié)構(gòu)的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開發(fā)人員和項(xiàng)目經(jīng)理組成的專業(yè)建站團(tuán)隊(duì)，負(fù)責(zé)網(wǎng)站視覺設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站易于使用并且具有良好的響應(yīng)性。

前言

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

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

• ① 以.json為后綴的JSON配置文件；

• ② 以.wxml為后綴的WXML模板文件，其可以看做是一個(gè)簡潔的HTML頁面，略有不同的則是文件后綴以及其中的部分標(biāo)簽不同；

• ③ 以.wxss為后綴的WXSS樣式文件，也可以看做一個(gè)CSS樣式文件；

• ④ 以.js為后綴的JS腳本文件。

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

由此可以看出這四類文件在小程序中負(fù)責(zé)不同的功能，它們在不同的目錄下扮演不同的角色。接下來，我們將詳細(xì)說明四類文件的作用。

1JSON配置

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

①、app.json配置文件

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

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

{
 /**
  * 頁面路徑列表
  * 用于指定小程序由那些頁面組成，每一項(xiàng)都對應(yīng)一個(gè)頁面的路徑。
  * 數(shù)組列表中的第一項(xiàng)代表小程序的首頁。
 */ 
 "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"//導(dǎo)航欄標(biāo)題顏色，僅支持black/white
 },
 //底部tab欄
 "tabBar": {
  "list": [//tab的列表，最少2個(gè)，最多5個(gè)
   {
    "pagePath": "pages/index/index",//頁面路徑
    "text": "首頁"//tab上按鈕文字
   },
   {
    "pagePath": "pages/index/index",
    "text": "第二個(gè)首頁"
   }
  ]
 },
 //配置小程序及其頁面是否允許被微信索引，若沒有該配置，則默認(rèn)所有頁面都允許被索引
 "sitemapLocation": "sitemap.json"
}

②、project.config.json工具配置

通常我們在使用各類開發(fā)工具時(shí)，都會(huì)根據(jù)自己的喜好做一些簡單的配置，如界面配置成護(hù)眼模式等。但我們更換電腦后，需要重新配置或?qū)胍郧暗呐渲梦募?，?a href="http://muchs.cn/xiaochengx.html" target="_blank">小程序開發(fā)者工具使用project.config.json來統(tǒng)一管理，我們在不同的電腦上導(dǎo)入同一個(gè)項(xiàng)目的代碼包后，不需要再進(jìn)行配置。

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

③、sitemap配置

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

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

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

④、index.json頁面配置

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

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

2WXML模板

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

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

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

多了一些wx:if這樣的屬性以及表達(dá)式，在web頁面開發(fā)中，我們通過使用JS來控制DOM，以及響應(yīng)用戶操作。而小程序通過{{}}的語法將數(shù)據(jù)綁定到界面，同時(shí)也可以通過wx:開頭的屬性來控制數(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ā)者自己換算，而是由小程序底層來完成。
提供全局樣式和局部樣式。在app.wxss中可以設(shè)置全局樣式，而在具體的頁面.wxss中可以設(shè)置當(dāng)前頁面的樣式。
此外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來控制與用戶的交互行為，而小程序中也是使用JS來處理用戶的操作。如先前，我們在頁面上顯示“Hello World！”。我們只需要在頁面的JS文件中，對其進(jìn)行設(shè)置值即可。

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

以上是“微信小程序中目錄結(jié)構(gòu)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：微信小程序中目錄結(jié)構(gòu)的示例分析
本文URL：http://muchs.cn/article28/gesdjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、建站公司、自適應(yīng)網(wǎng)站、定制開發(fā)、商城網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)