分享微信小程式之文件結構目錄解析

在微信開發者工具中新增項目並勾選建立預設小程序，系統給我們自動建立的小實例是第一個頁面顯示我們的頭像、暱稱還有hello world的文本，點擊頭像跳到另外一個頁面顯示啟動日誌，效果如下：

進入【編輯】選項，你會看到如下目錄結構：

在圖中的目錄可以看到幾種檔案格式：.wxml、.js、.json、.wxss、
其中：
.wxml—頁面結構檔;
.js—腳本文件，包含頁面/程式的宣告週期函數，一些wxml頁面的監聽函數的實作也是在這個文件裡面寫的；
.json—設定檔；
.wxss—樣式表；


從大的方向來看，根目錄下包含pages,utils目錄和app.js app.json,app.wxss等內容。
1.pages目錄

      1.1新增頁面並進行設定

pages—包含頁面文件，如要在專案中新增頁面，要在pages目錄先，新建一個子目錄如上圖的index目錄，目錄中要包含.wxml .js 這兩個是必須的，還有.json .wxss是可選的。
             且這幾個檔案的檔案名稱是一致的，後綴名不相同。新建新的頁面檔案之後，還需要在app.json檔案中設定頁面路徑，否則程式是找不到這個頁面的相關檔案的，如我要新建一個叫做myNewPage的頁面，頁面中包含一個圖片，我要這樣做：
新建之後我要在app.json檔案中的pages數組下設定頁面：

#

{ 
"pages":[ 
"pages/newPage/myNewPage", 
"pages/index/index", 
"pages/logs/logs" 
], 
"window":{ 
"backgroundTextStyle":"light", 
"navigationBarBackgroundColor": "#fff", 
"navigationBarTitleText": "WeChat", 
"navigationBarTextStyle":"black" 
} 
}

pages中頁面位址配置的順序決定整個小程式的顯示順序，如我想要第一個顯示我的myNewPage我需要把它放在第一行，其他的頁面可以透過跳轉等方式來使其顯示。所有程式的頁面都需要在app.json中設定。
     1.2 針對單獨的頁面進行設定


#每個小程式頁面也可以使用.json檔案來設定本頁面的視窗表現。只需設定 app.json 中的 window 設定項的內容，頁面中設定項會覆蓋 app.json 的 window 中相同的設定項。
頁面的.json只能設定window 相關的設定項，以決定本頁面的視窗表現，所以無需寫window 這個鍵，如：
[tr]屬性類型預設值描述[/tr]

falsefalse

navigationBarBackgroundColor

HexColor

#000000

導覽列背景顏色，如"#000000"

navigationBarTextStyle

String

white

導覽列標題顏色，僅支援black/white

# navigationBarTitleText

String

導覽列標題文字內容

backgroundColor

#HexColor

#ffffff

視窗的背景色

背景字體、loading 圖表的樣式，僅支援dark/light

enablePullDownRefresh

Boolean

是否開啟下拉刷新，詳見頁面相關事件處理函數。

disableScroll

Boolean

設定為true 則頁面整體不能上下捲動；只在page.json 中有效，無法在app.json 中設定該項目

#

{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}

2.utils目录

utils目录放的是我们工具脚本文件，我们在操作页面或者解析数据的时候常常需要写一些方法，通常是写在我们各自页面.js文件中或者是全局的app.js页面中，我们通常将一些复杂的逻辑代码抽取出来放在一个文件中封装成一个个函数，这样可以实现代码的模块化，也可以大量减少编写重复功能代码这类的工作。
把公共的方法封装起来，然后使用时需要先引入这个工具js文件，例如在系统给我们创建的小实例中，logs页面中的脚本文件logs.js需要引用utils目录下util.js中的formatTime（）方法，使用前他需要使用var util = require('../../utils/util.js')引入util.js文件：

{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}

引入之后直接使用

util.formatTime(new Date(log))

复制代码
来使用这个方法并传入参数即可。

3.app.js
app.js  是微信小程序全局逻辑脚本，小程序启动会执行该文件内的部分方法如onLaunch方法。所以一些全局初始化的工作可以在这个文件中相应的方法中执行。

4.app.wxss
app.wxss 是小程序全局样式文件，在此文件中定义的样式，整个程序都可以直接使用，所以可以把一些公共的样式放在这个文件中，以免编写重复的样式。

默认的，该文件就包含.container样式，

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

该样式一边用于外部容器组件中，在所有页面中都可以直接使用。
如果在pages目录下的指定页面，重写了.container的样式，那么这个页面的样式将会覆盖全局的样式。

5.app.json

app.json是全局的配置文件，

{ 
"pages":[ 
"pages/newPage/myNewPage", 
"pages/index/index", 
"pages/logs/logs" 
], 
"window":{ 
"backgroundTextStyle":"light", 
"navigationBarBackgroundColor": "#fff", 
"navigationBarTitleText": "WeChat", 
"navigationBarTextStyle":"black" 
} 
}

配置项如下边所示：
[tr]属性类型必填描述[/tr]

pages	String Array	是	设置页面路径
window	Object	否	设置默认页面的窗口表现，可以设置小程序的状态栏、导航条、标题、窗口背景色
tabBar	Object	否	设置底部 tab 的表现
networkTimeout	Object	否	设置网络超时时间
debug	Boolean	否	设置是否开启 debug 模式

其中：

window设置列表如下：

[tr]属性类型默认值描述[/tr]

navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如"#000000"
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字体、loading 图的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面相关事件处理函数。

tabBar设置列表如下：
[tr]属性类型必填默认值描述[/tr]

color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上边框的颜色， 仅支持 black/white
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top

其中list 接受一個數組，數組中的每個項目都是一個對象，其屬性值如下：
[tr]屬性類型必填說明[/tr]

pagePath	String	是	#頁面路徑，必須在pages 中先定義
text	String	是	#tab 上按鈕文字
iconPath	#String	是	圖片路徑，icon 大小限制為40kb，建議尺寸為81px * 81px
selectedIconPath	#String	是	選取時的圖片路徑，icon 大小限制為40kb，建議尺寸為81px * 81px

network Timeout:設定各種網路請求的逾時時間。
屬性說明：
[tr]屬性型別說明[/tr]

#request	#Number	否	wx.request的逾時時間，單位毫秒，預設為：60000
connectSocket	#Number	否	wx.connectSocket的逾時時間，單位毫秒，預設為：60000
uploadFile	Number	#否	wx.uploadFile的超時時間，單位毫秒，預設為：60000
downloadFile	Number

#每個小程式頁面也可以使用.json文件來設定本頁面的視窗表現。 頁面的配置比app.json全域配置簡單得多，只是設定 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。 [tr]屬性類型預設值描述[/tr]navigationBarBackgroundColorHexColor#000000導覽列背景顏色，如"#000000"navigationBarTextStyleStringwhite導覽列標題顏色，僅支援black/white# navigationBarTitleTextStringbackgroundColor背景字體、loading 圖表的樣式，僅支援dark/light

		wx.downloadFile的超時時間，單位毫秒，預設為：60000
	頁面的.json只能設定window 相關的設定項，以決定本頁面的視窗表現，所以無需寫window 這個鍵，如：
		導覽列標題文字內容
#HexColor	#ffffff	視窗的背景色

enablePullDownRefresh

Boolean######false######是否開啟下拉刷新，詳見頁面相關事件處理函數。 ############disableScroll######Boolean#######false######設定為true 則頁面整體不能上下捲動；只在page.json 中有效，無法在app.json 中設定該項目########################

以上是分享微信小程式之文件結構目錄解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！