小程序一：小程序的框架_小程序制作框架-CSDN博客

 
 MINA 

 
 MINA(MINA IS NOT APP) 是在微信中开发 
 小程序 
 的框架。 

 
 MINA的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。 

 
 MINA提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。 

 
 文件结构 

 
 框架程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 

 
 一个框架程序主体部分由三个文件组成，必须放在项目的根目录，如下： 

 
 一个框架页面由四个文件组成，分别是： 

 
 配置 

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

 
 以下是一个包含了所有配置选项的简单配置 
 app.json 
  ： 

{

 
 "pages": [ 

 
 "pages/wechat/wechat", 

 
 "pages/note/note", 

 
 "pages/find/find", 

 
 "pages/mine/mine", 

 
 "pages/message/message", 

 
 "pages/audio/audio", 

 
 "pages/info/info", 

 
 "pages/newfriend/newfriend", 

 
 "pages/moments/moments", 

 
 "pages/picker/picker", 

 
 "pages/upload/upload", 

 
 "pages/ws/ws", 

 
 "pages/index/index", 

 
 "pages/logs/logs" 

],

 
 "window":{ 

 
 "navigationBarBackgroundColor": "#000", 

 
 "navigationBarTextStyle": "white", 

 
 "navigationBarTitleText": "", 

 
 "backgroundColor": "#eee", 

 
 "backgroundTextStyle": "dark" 

},

 
 "tabBar": { 

 
 "backgroundColor":"#333", 

 
 "selectedColor":"red", 

 
 "list": [{ 

 
 "pagePath": "pages/wechat/wechat", 

 
 "iconPath":"image/wechat.png", 

 
 "selectedIconPath":"image/wechat_2.png", 

 
 "text": "微信" 

 
 }, { 

 
 "pagePath": "pages/note/note", 

 
 "iconPath":"image/note.png", 

 
 "selectedIconPath":"image/note_2.png", 

 
 "text": "通讯录" 

 
 }, { 

 
 "pagePath": "pages/find/find", 

 
 "iconPath":"image/find.png", 

 
 "selectedIconPath":"image/find_2.png", 

 
 "text": "发现" 

 
 }, { 

 
 "pagePath": "pages/mine/mine", 

 
 "iconPath":"image/mine.png", 

 
 "selectedIconPath":"image/mine_2.png", 

 
 "text": "我" 

}]

},

 
 "networkTimeout": { 

 
 "request": 10000, 

 
 "downloadFile": 10000 

},

 
 "debug": true 

}

 
 app.json 配置项列表 

 
 pages 

 
 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息， 
 数组的第一项代表小程序的初始页面 
 。小程序中新增/减少页面，都需要对 pages 数组进行修改。 

 
 文件名不需要写文件后缀，因为框架会自动去寻找路径 
 .json 
 , 
 .js 
 , 
 .wxml 
 , 
 .wxss 
 的四个文件进行整合。 

 
 window 

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

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如"#000000"
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	下拉窗口的背景色
backgroundTextStyle	String	dark	下拉背景字体、loading 图的样式，仅支持 dark/light

 
 tabBar 

 
 如果我们的小程序是一个多 tab 应用（客户端窗口的底部有tab栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。 

 
 tabBar 是一个数组， 
 只能配置最少2个、最多5个 tab 
 ，tab 按数组的顺序排序。 

 
 属性说明： 

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

 
 其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下： 

 
 networkTimeout 

 
 可以设置各种网络请求的超时时间。 

 
 属性说明： 

 
 debug 

 
 可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 
 Page的注册 
 ， 
 页面路由 
 ， 
 数据更新 
 ， 
 事件触发 
  。 可以帮助开发者快速定位一些常见的问题。 

 
 每个页面的配置文件（.json） 

 
 每一个小程序页面也可以使用 
 .json 
 文件来对本页面的窗口表现进行配置。 页面的配置比 
 app.json 
 全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。 

 
 页面的 
 .json 
 只能设置  
 window 
  相关的配置项，以决定本页面的窗口表现，所以无需写  
 window 
  这个键，如： 

{

"navigationBarBackgroundColor":"#ffffff",

"navigationBarTextStyle":"black",

"navigationBarTitleText":"微信接口功能演示",

"backgroundColor":"#eeeeee",

"backgroundTextStyle":"light"

}