微信小程序教程入门篇【3】,MINA框架的目录结构和配置

—— 2017 ——

12/20

00:00

来源：

作者：未知

栏目：小程序开发

2017/12/20 0:00:00 来源：不详作者：未知

1. 开篇导言

本节目标：通过上一节的讲解，相信大家对小程序框架MINA有了初步了解。接下来将会对其进行深入介绍。
目标用户：无编程经验，但对微信小程序感兴趣的同学。
学习目标：了解MINA框架的目录结构和配置。
案例分析：helloworld小程序。
代码下载
传送门：

上一篇：微信小程序教程-入门篇【2】
下一篇：微信小程序教程-入门篇【4】

备注：有编程经验或看过微信官网简易教程的同学，请酌情略过该章节。

2. 目录结构概述
微信小程序教程入门篇【3】,MINA框架的目录结构和配置

如上图所示，MINA框架的文件结构分为两部分。其中，绿色为业务逻辑部分，蓝色为程序主体部分，即app部分。

业务逻辑部分

对于不同的项目，根据其具体的业务逻辑表现，文件有不同的组织方式，但基本元素(页面Page)的结构不变。
在helloworld项目中，如上图绿色所示为：pages/utils。
pages：该文件夹下存放不同的业务逻辑页面，在这里为index文件夹(主页面)，logs文件夹(log页面)。
utils：该文件夹下存放工具类函数，并通过module.exports导出formatTime来供其他文件调用。

程序主体部分

由三个文件组成，必须放在项目的根目录，如下图：
微信小程序教程入门篇【3】,MINA框架的目录结构和配置

(该图来源于官网)

3. 配置文件-app.json

名词解释

app.json是微信小程序的全局配置文件，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。本项目app.json如下图：
微信小程序教程入门篇【3】,MINA框架的目录结构和配置

该文件为json文件，对于json文件不熟悉的同学，请点击传送门，去了解下。

配置项列表

(该图片来自于官网)

pages：pages接受一个字符串数组，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。
小程序中新增/减少页面，都需要对pages数组进行修改。pages中的路径为相对路径。文件名不需要写文件后缀，因为MINA会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。
本项目pages代码如下：

"pages":[
"pages/index/index",
"pages/logs/logs"
],

复制代码

window：用于设置小程序的状态栏、导航条、标题、窗口背景色。具体配置项如下：
微信小程序教程入门篇【3】,MINA框架的目录结构和配置

(该图来源于官网)
注：HexColor（十六进制颜色值），如"#000000"，黑色。"#ffffff"，白色。

本项目window代码如下：

"window":{
"backgroundTextStyle":"light",
"backgroundColor":"#000000",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}

复制代码

backgroundTextStyle：背景文本样式为【light】。
backgroundColor：背景颜色为【白色】。当切换两个page的时候，显示背景色。比如：点击page1上按钮，page1消失，出现背景色【白色】，page2出现。
navigationBarBackgroundColor：导航栏背景颜色为【黑色】。
navigationBarTitleText：导航栏标题文本为【WeChat】。
navigationBarTextStyle：导航栏文本样式为【black】。

4. 配置文件-app.wxss

名词解释

WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言，用于描述WXML的组件样式，也用来决定WXML的组件的显示方式。
从定位上讲WXSS相当于css，对于css不了解的同学，请点击传送门，去了解一下。

本项目app.wxss代码如下：

/**app.wxss**/
/** height: 100% 相对父高度100% **/
/** display: flex 多栏多列布局或弹性布局 **/
/** flex-direction: column flex子项将垂直显示，正如一个列一样。**/
/** align-items: center flex子项位于容器的中心**/
/** justify-content: space-between flex子项目位于各行之间留有空白的容器内。**/
/** padding: 200rpx 0 上内边距为200rpxrpx 右内边距为0rpx **/
/** box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。**/
/** border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何
内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度
和高度分别减去边框和内边距才能得到内容的宽度和高度。**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}

复制代码

由于.container(类选择器)在文件app.wxss(小程序公共样式表)中，所以其可以在多个pages中被调用。在本项目中，我们在index.wxml/logs.wxml中使用。如下图：微信小程序教程入门篇【3】,MINA框架的目录结构和配置

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
微信小程序教程入门篇【3】,MINA框架的目录结构和配置

(该图来源于官网)

选择器

(该图来源于官网)

5. 小结
知识点：了解MINA框架的目录结构和配置(app.json,app.wxss)。其中app.json：pages和window。app.wxss：类选择器及尺寸单位rpx。

6. 预告
下一节继续了解MINA框架的视图层(View)，逻辑层(App Service)，及其之间的交互关系。

【本站声明】
1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。
KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！

▼点击进入科汛官网了解更多

热门标签

微信小程序 SaaS

上/下篇

微信小程序教程入门篇【4】,MINA框架的视图层逻辑层

本帖最后由狂兔科技于 2016-11-1 18:14 编辑 1. 开篇导言本节目标：通过上一节的讲解，相信大家对小程序框架MINA的目录结构和配置有了一定的了解。接下来将会讲解视图层，逻辑层

微信小程序SaaS 2017/12/20 0:00:00
微信小程序教程入门篇【2】,小程序小游戏2048实战讲解

本帖最后由狂兔科技于 2016-11-5 03:58 编辑 1. 开篇导言本节目标：对于上篇需求分析做减法。目标用户：学习过【入门篇】的同学或有一定编程经验的同学。学习目标：如果2048”就

微信小程序SaaS 2017/12/20 0:00:00