微信小程序结构和配置

⼩程序结构⽬录

⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP验的服务。

⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

⼩程序⽂件结构和传统web对⽐

结构	传统web	微信⼩程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	⽆	JSON

通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json

基本的项⽬⽬录

pages：页面文件夹

• index：首页
  • index.js
  • Index.json
  • Index.wxml
  • Index.wxss
• logs：日志页面
  • logs.js
  • logs.json
  • logs.wxml
  • logs.wxss

utils：第三方工具

app.js：项目全局文件 人口文件

app.json：全局配置文件

app.wxss：全局样式文件

project.onfig.son：项目配置文件 appid

stemap.json：微信索引配置文件

⼩程序配置⽂件

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和 ⻚⾯⾃⼰的 page.json

注意：配置文件中不能出现注释

全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。

普通快速启动项⽬⾥边的 app.json 配置

pages: [
  'pages/game/index',
  'pages/user/index',
  'pages/knapsack/index',
  'pages/login/index',
  'pages/favourite/index',
],
window: {
  backgroundTextStyle: 'dark',
  navigationBarBackgroundColor: '#000',
  navigationBarTitleText: '魔熊潮玩',
  navigationBarTextStyle: 'white',
  backgroundColor: '#000',
}

字段的含义

1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序

⻚⾯定义在哪个⽬录。

2. window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。

3. 完整的配置信息请参考 app.json配置

tabBar底部 tab 栏的表现

• backgroundColor：背景色
• selectedColor：选中的元素的字体颜色
• color：元素的字体颜色
• borderStyle：边框颜色（black/white）
• position：位置（top/bottom）
• list：tab 的列表
  • pagePath：跳转地址
  • text：名称
  • selectedIconPath：选中的元素的icon图标地址
  • IconPath：元素的icon图标地址

⻚⾯配置page.json

这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。

开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。

⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json 的 window 中相同的配置项。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜⾊，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜⾊，仅⽀持 black / white
navigationBarTitleText	String		导航栏标题⽂字内容
backgroundColor	HexColor	#ffffff	窗⼝的背景⾊
backgroundTextStyle	String	dark	下拉 loading 的样式，仅⽀持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新。 详⻅ Page.onPullDownRefresh
onReachBottomDistance	Number	50	⻚⾯上拉触底事件触发时距⻚⾯底部距离，单位为px。 详⻅ Page.onReachBottom
disableScroll	Boolean	false	设置为 true 则⻚⾯整体不能上下滚动；只在⻚⾯配置中有

sitemap 配置-了解即可

⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引