MINA小程序开发框架

简介: MINA(MINA IS NOT APP) 是在微信中开发小程序的框架。MINA的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。

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地址:阿里云·云小站

相关文章
|
2月前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
304 65
ly~
|
5天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
37 6
|
23天前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
|
5天前
|
JSON 小程序 前端开发
创建一个属于自己的小程序(注册开发账号)
介绍如何创建微信小程序账号,包括注册流程、下载安装微信开发者工具、创建项目以及项目结构介绍。
创建一个属于自己的小程序(注册开发账号)
|
2月前
|
移动开发 小程序 JavaScript
开源的微信小程序框架
【8月更文挑战第22天】开源的微信小程序框架
141 65
ly~
|
5天前
|
开发框架 小程序 前端开发
抖音小程序的开发难度大吗?
抖音小程序的开发难度因人而异,主要取决于开发者经验、技能及功能需求。技术上需掌握前端技术及抖音开发框架,了解平台生态与规则;设计上需符合用户审美和习惯,具备创新性和实用性。此外,严格的审核标准和激烈的市场竞争增加了开发难度,开发者需制定有效推广策略并持续优化小程序以保持竞争力。
ly~
37 4
|
5天前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `<swiper>` 实现,二是利用 Nut UI 的 `<nut-swiper>` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
25天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
57 3
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享