小程序「项目架构」

weChat

一、微信小程序

.js 脚本文件
.json 配置文件
.wxss 样式表文件

二、文件结构

主体组成:

文件	说明	备注
app.js	小程序逻辑
app.json	小程序公共设置
app.wxss	小程序公共样式表	.

页面组成:

必须具有相同的路径与文件名

文件	说明	备注
js	页面逻辑
wxml	页面结构
wxss	页面样式表
json	页面配置	.

三、配置

使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

app.json

字段	类型	必填	说明	备注
pages	String Array	是	页面路径
window	Object	否	默认页面的窗口
tabBar	Object	否	底部tab
networkTimeout	Object	否	网络超时时间
dubug	Boolean	否	是否开启debug模式	.

pages

指定页面组成。

//1.每一项代表对应页面的【路径+文件名】信息
//2.数组的第一项代表小程序的初始页面
//3.小程序中新增/减少页面，都需要对 pages 数组进行修改
//4.文件名不需要写文件后缀

{
  "pages":[
    "pages/index/index"
    "pages/logs/logs"
  ]
}

window

设置小程序的状态栏、导航条、标题、窗口背景色。

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

属性	类型	默认值	说明	备注
navigationBarBackgroundColor	HexColor	#000000	导航栏背景�色
navigationBarTextStyle	String	white	导航栏标题样式	black/white
navigationBarTitleText	String		导航栏标题
backgroundColor	HexColor	#ffffff	窗口背景颜色
backgroundTextStyle	String	dark	下拉背景字体loading样式	dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新	.

tabBar

指定标签栏组成,以及切换时显示的页面

页面跳转（wx.navigateTo）

页面重定向（wx.redirectTo）

//只能配置最少2个、最多5个 tab

"tabBar":{
    "color": "#ffffff",
    "selectedColor": "#ffffff",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "",
        "selectedIconPath": ""
      },{
        "pagePath": "pages/logs/logs",
        "text": "我的",
        "iconPath": "",
        "selectedIconPath": ""
      }],
    "position": "bottom"
 }

属性	类型	必填	默认值	说明	备注
color	HexColor	是		标题默认颜色
selectedColor	HexColor	是		标题选中颜色
backgroundColor	HexColor	是		背景色
borderStyle	String	否	black	边框的颜色	black/white
list	Array	是		标签配置	最少2个、最多5个
position	String	否	bottom	可选值 bottom、top	bottom/top

list

数组中的每个项都是一个对象

属性	类型	必填	说明	备注
pagePath	String	是	页面路径
text	String	是	标题
iconPath	String	是	默认图片	40KB, 81x81px
selectedIconPath	String	是	选中图片	40KB, 81x81px

networkTimeout

设置网络请求的超时时间

属性	类型	必填	默认值	说明	备注
request	Number	否	60000	wx.request 超时时间	毫秒
connectSocket	Number	否	60000	wx.connectSocket 超时时间	毫秒
uploadFile	Number	否	60000	wx.uploadFile 超时时间	毫秒
downloadFile	Number	否	60000	wx.downloadFile 超时时间	毫秒

debug

设置开发者工具中开启 debug 模式

Page的注册，页面路由，数据更新，事件触发

page.json

设置本页面的窗口

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

属性	类型	默认值	说明	备注
navigationBarBackgroundColor	HexColor	# 000000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色	black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字体、loading 图的样式	dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
disableScroll	Boolean	false	页面整体不能上下滚动	只在 page.json 中有效

小程序 「项目架构」