MINA小程序开发框架

MINA




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


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


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



文件结构




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


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

文件 必填 作用
app.js 小程序逻辑
app.json 小程序公共设置
app.wxss 小程序公共样式表

一个框架页面由四个文件组成,分别是:

文件类型 必填 作用
js 页面逻辑
wxml 页面结构
wxss 页面样式表
json 页面配置

配置


我们使用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 Array 设置页面路径
window Object 设置默认页面的窗口表现
tabBar Object 设置底部 tab 的表现
networkTimeout Object 设置网络超时时间
debug Boolean 设置是否开启 debug 模式

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 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

属性 类型 必填 说明
pagePath String 页面路径,必须在 pages 中先定义
text String tab 上按钮文字
iconPath String 图片路径,icon 大小限制为40kb
selectedIconPath String 选中时的图片路径,icon 大小限制为40kb

networkTimeout

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

属性说明:

属性 类型 必填 说明
request Number wx.request的超时时间,单位毫秒
connectSocket Number wx.connectSocket的超时时间,单位毫秒
uploadFile Number wx.uploadFile的超时时间,单位毫秒
downloadFile Number wx.downloadFile的超时时间,单位毫秒

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"

}

云服务器ECS地址:阿里云·云小站

上一篇:【Elastic Engineering】使用 Elasticsearch 时间点读取器获得随时间推移而保持一致的数据视图


下一篇:如何搭建公司网站?