微信小程序教程入门[3]，MINA框架目录结构和配置

1. 开篇导言 本节的目标：通过前一节的解释，我相信每个人都对小程序框架MINA有了初步的了解。稍后将对其进行深入描述。目标用户：没有编程经验但对微信小程序感兴趣的学生。学习目标：了解MINA框架的目录结构和配置。案例研究：helloworld小程序。代码下载门户网站：上一篇：微信小程序教程 - 入门[2]下一篇：微信小程序教程 - 入门[4]备注：有编程经验的学生或已经看过微信官方网站的简单教程，请酌情跳过本章。2. 目录结构概述如上图所示，MINA框架的文件结构分为两部分。其中，绿色是业务逻辑部分，蓝色是程序的主要部分，即应用程序部分。业务逻辑部分对于不同的项目是不同的，根据其特定的业务逻辑，文件具有不同的组织，但基本元素（页面页面）的结构不变。在helloworld项目中，上面显示的绿色是：pages/utils。页面：此文件夹存储不同的业务逻辑页面，这里是索引文件夹（主页面），日志文件夹（日志页面）。 Utils：工具类函数存储在此文件夹中，formatTime通过module.exports导出为其他文件。程序的主要部分由三个文件组成，必须放在项目的根目录下，如下图所示：（此图来自官方网站）3. 配置文件-app.json名词解释app.json是全局配置文件微信小程序，它确定页面文件的路径，窗口性能，设置网络超时，设置多个选项卡等。 app.json项目如下：这个文件是json文件。对于不熟悉json文件的学生，请单击门户网站了解相关信息。配置项目列表（此图像来自官方网站）页面：页面接受一个字符串数组，以指定小程序包含哪些页面。每个项目代表相应页面的[路径+文件名]信息，数组的第一项代表小程序的初始页面。在小程序中添加/减少页面，都需要修改pages数组。页面中的路径是相对路径。文件名不需要用文件后缀写，因为MINA会自动找到四个文件.json，js，wxml，wxss进行集成。该项目的页面代码如下：'pages': ['pages/index/index'，'pages/logs/logs']，复制代码窗口：用于设置小程序状态栏，导航栏，标题，窗口背景颜色。具体配置项如下：（此图来自官方网站）注：HexColor（十六进制颜色值），如'＃000000'，黑色。 '#ffffff'，白色。 该项目的窗口代码如下：'window': {'backgroundTextStyle':'light'，'backgroundColor':'＃000000'，'navigationBarBackgroundColor':'＃fffffff'，'navigationBarTitleText':'WeChat'，' navigationBarTextStyle':'Black'复制代码backgroundTextStyle：背景文本样式为[light]。 backgroundColor：背景颜色为[白色]。在两页之间切换时，会显示背景颜色。例如：单击第1页上的按钮，第1页消失，出现背景颜色[白色]，并出现第2页。 navigationBarBackgroundColor：导航栏的背景颜色为[黑色]。 navigationBarTitleText：导航栏标题文本为[WeChat]。 navigationBarTextStyle：导航栏文本样式为[黑色]。4. 配置文件-app.wxss术语解释WXSS（WeiXin Style Sheets）是由MINA设计的一组样式语言，用于描述WXML的组件样式以及确定WXML组件的显示方式。从定位的角度来看，WXSS相当于css。对于不了解CSS的学生，请点击门户网站查找。 该项目的app.wxss代码如下：/**app.wxss**//** height: 100％相对父高100％** //**显示: flex多列多列布局或灵活布局** //** flex-direction: columnflex子项将垂直显示，就像一列。 ** //** align-items: center flex child位于容器的中心** //** justify-content: space-betweenflex子项位于容器之间，行之间有空格。 ** //**填充: 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;} Copy代码可以在多个页面中调用，因为.container位于文件app.wxss（小程序 public stylesheet）中。在这个项目中，我们在index.wxml/logs.wxml中使用它。如下图所示：大小单位rpx（响应像素）:可根据屏幕宽度自适应。指定的屏幕宽度为750rpx。例如，在iPhone 6上，屏幕宽度为375px，总共750个物理像素，然后750rpx=375px=750个物理像素，1rpx=0.5px=1个物理像素。（此图来自官方网站）选择器（此图来自官方网站）5. 小结知识点：了解MINA框架的目录结构和配置（app.json，app.wxss）。 app.json的位置：页面和窗口。 App.wxss：类选择器和大小单位rpx。6. 预告下一节继续了解视图层（View），MINA框架的逻辑层（App Service）以及它们之间的交互。

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。