前言
在開發小程序之前，我們首先需要對其目錄結構進行了解，以便于提升開發效率。
我們使用微信開發者工具構建一個小程序項目，我們可以看到目錄下生成了件。
在上圖的示例中，我們可以看到根目錄下有JS、JSON、WXSS類型文件，這是作為全局配置；而pages/index目錄下的四類文件是對具體的頁面進行詳細設置。
由此可以看出這四類文件在小程序中負責不同的功能，它們在不同的目錄下扮演不同的角色。接下來，我們將詳細說明四類文件的作用。
1JSON配置
在小程序中，JSON是一種數據格式，其并不是編程語言，它用于配置靜態的屬性。我們可以看到在根目錄下有app.json、project.config.json、以及sitemap.json，在pages/index下有index.json。前三種是對整個小程序的全局配置，而后一種是對具體頁面的配置。接下來，我們對其做詳細說明。
①、app.json配置文件
其作為當前小程序的全局配置，包括配置頁面路徑列表、全局默認窗口表現、網絡超時時間、底部tab欄、小程序接口權限相關設置等。
注：在json文件中是不能加注釋的，此處只為了解釋，因此在使用過程中切勿加注釋，其他相關屬性查看官方文檔。
{/*** 頁面路徑列表* 用于指定小程序由那些頁面組成，每一項都對應一個頁面的路徑。* 數組列表中的第一項代表小程序的首頁。*/ "pages": ["pages/index/index"],/*** 全局默認窗口表現* 用于設置小程序的狀態欄、導航條、標題、窗口背景顏色*/ "window": {"navigationBarBackgroundColor": "#fff",//導航欄背景顏色"navigationBarTitleText": "MiniProgrameDemo",//導航欄標題文字內容"navigationBarTextStyle": "black"//導航欄標題顏色，僅支持black/white},//底部tab欄"tabBar": {"list": [//tab的列表，最少2個，最多5個{"pagePath": "pages/index/index",//頁面路徑"text": "首頁"//tab上按鈕文字},{"pagePath": "pages/index/index","text": "第二個首頁"}]},//配置小程序及其頁面是否允許被微信索引，若沒有該配置，則默認所有頁面都允許被索引"sitemapLocation": "sitemap.json"}②、project.config.json工具配置
通常我們在使用各類開發工具時，都會根據自己的喜好做一些簡單的配置，如界面配置成護眼模式等。但我們更換電腦后，需要重新配置或導入以前的配置文件，而小程序開發者工具使用project.config.json來統一管理，我們在不同的電腦上導入同一個項目的代碼包后，不需要再進行配置。
一般我們會對項目設置（setting）中的是否啟用es6轉es5（es6）、上傳代碼時樣式是否自動補全（postcss）、是否檢查安全域名和TLS版本（URLCheck）等來進行配置。
注：我們可以通過開發者工具右上角的【詳情】按鈕來快速配置。
③、sitemap配置
小程序提供了配置小程序及其頁面是否允許被微信索引的功能，我們可以通過配置一些索引規則來約束頁面是否能被索引，使其不能被微信索引。若沒有配置該項，則默認所有頁面都允許被索引。
注：其他相關配置信息請參照官方文檔設置。
{"rules": [{//索引規則列表"action": "allow",//頁面是否能被索引，取值僅限allow、disallow"page": "*"//*表示所有頁面，不能作為通配符使用}]}④、index.json頁面配置
如果我們想設置具體的某個頁面的屬性，則可以在相應頁面的JSON文件中自定義配置。
{"navigationBarBackgroundColor": "#FF5500",//導航欄背景顏色"navigationBarTextStyle": "white",//導航欄標題顏色，僅支持black/white"navigationBarTitleText": "首頁",//導航欄標題文字內容"backgroundTextStyle": "dark", //下拉loading樣式，僅支持dark/white"enablePullDownRefresh": true,//是否啟用下拉刷新"onReachBottomDistance": 50,//頁面上拉觸底事件觸發時距離頁面底部距離"usingComponents": {}//頁面自定義組件配置}2WXML模板
我們在開發web頁面時，使用HTML+CSS+JS這樣的組合來構建展示給用戶的頁面，其中HTML是用來描述當前頁面的結構，CSS是用來描述頁面的樣式，JS通常處理頁面與用戶之間的交互。
而小程序開發中，其自己的一套書寫規范，但與web頁面也有相似之處，如WXML在其中就充當了HTML的角色。和HTML非常相似，WXML也是由標簽、屬性等構成，但也存在著眾多不一樣的地方：
標簽名不一樣，在HTML中我們經常會使用div、p、span等來組合出不同的效果。而在小程序中，我們會使用view、button、text等標簽，同時小程序頁提供了地圖、視頻、音頻等組件供開發者使用。
多了一些wx:if這樣的屬性以及表達式，在web頁面開發中，我們通過使用JS來控制DOM，以及響應用戶操作。而小程序通過{{}}的語法將數據綁定到界面，同時也可以通過wx:開頭的屬性來控制數據的顯示。
<!--index.wxml--><view class="container"><text>{{msg}}</text><view wx:if="{{flag}}">當前顯示狀態為true</view></view>3 WXSS樣式
WXSS具有CSS大部分特性，同時也做了一些擴充和修改：
新增了尺寸單位。為了考慮手機設備屏幕寬度和設備像素比的不同，需要換算，小程序提供了新的尺寸單位rpx，其不需要開發者自己換算，而是由小程序底層來完成。
提供全局樣式和局部樣式。在app.wxss中可以設置全局樣式，而在具體的頁面.wxss中可以設置當前頁面的樣式。
此外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開發中，我們使用JS來控制與用戶的交互行為，而小程序中也是使用JS來處理用戶的操作。如先前，我們在頁面上顯示“Hello World！”。我們只需要在頁面的JS文件中，對其進行設置值即可。
Page({data: {msg: 'Hello World',flag: false,canIUse: wx.canIUse('button.open-type.getUserInfo')},onLoad: function () {},})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
