金狮贵宾会

登录
免费开通
产品中心
更多服务

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

—— 2017 ——
12/20
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

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

1. 开篇导言    
  • 本节目的：通过上一节的解说， ，，，相信各人对小程序框架MINA有了起源相识。。。。。接下来将会对其举行深入介绍。。。。。
  • 目的用户：无编程履历， ，，，但对微信小程序感兴趣的同砚。。。。。
  • 学习目的：相识MINA框架的目录结构和设置。。。。。
  • 案例剖析：helloworld小程序。。。。。
  • 代码下载
  • 传送门：

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

  • 备注：有编程履历或看过微信官网浅易教程的同砚， ，，，请酌情略过该章节。。。。。

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

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

  • 营业逻辑部分

关于差别的项目， ，，，凭证其详细的营业逻辑体现， ，，，文件有差别的组织方式， ，，，但基本元素(页面Page)的结构稳固。。。。。
在helloworld项目中， ，，，如上图绿色所示为：pages/utils。。。。。
pages：该文件夹下存放差别的营业逻辑页面， ，，，在这里为index文件夹(主页面)， ，，，logs文件夹(log页面)。。。。。
utils：该文件夹下存下班具类函数， ，，，并通过module.exports导出formatTime来供其他文件挪用。。。。。

  • 程序主体部分

由三个文件组成， ，，，必需放在项目的根目录， ，，，如下图：
微信小程序教程入门篇【3】,MINA框架的目录结构和设置
微信小程序教程入门篇【3】,MINA框架的目录结构和设置
(该图泉源于官网)

3. 设置文件-app.json

  • 名词诠释

app.json是微信小程序的全局设置文件， ，，，决议页面文件的路径、窗口体现、设置网络超时时间、设置多tab等。。。。。本项目app.json如下图：        
微信小程序教程入门篇【3】,MINA框架的目录结构和设置
该文件为json文件， ，，，关于json文件不熟悉的同砚， ，，，请点击传送门， ，，，去相识下。。。。。

  • 设置项列表

微信小程序教程入门篇【3】,MINA框架的目录结构和设置
(该图片来自于官网)     
      
pages：pages接受一个字符串数组， ，，，来指定小程序由哪些页面组成。。。。。每一项代表对应页面的【路径+文件名】信息， ，，，数组的第一项代表小程序的初始页面。。。。。
小程序中新增/镌汰页面， ，，，都需要对pages数组举行修改。。。。。pages中的路径为相对路径。。。。。文件名不需要写文件后缀， ，，，由于MINA会自动去寻找路径.json,.js,.wxml,.wxss的四个文件举行整合。。。。。
本项目pages代码如下：            
  1. "pages":[
  2.     "pages/index/index",
  3.     "pages/logs/logs"
  4.   ],
复制代码
         
window：用于设置小程序的状态栏、导航条、问题、窗口配景致。。。。。详细设置项如下：
微信小程序教程入门篇【3】,MINA框架的目录结构和设置
(该图泉源于官网)                        
注：HexColor（十六进制颜色值）， ，，，如"#000000"， ，，，玄色。。。。。"#ffffff"， ，，，白色。。。。。

本项目window代码如下：
  1. "window":{
  2.     "backgroundTextStyle":"light",
  3.     "backgroundColor":"#000000",
  4.     "navigationBarBackgroundColor": "#ffffff",
  5.     "navigationBarTitleText": "WeChat",
  6.     "navigationBarTextStyle":"black"
  7.   }
复制代码
                          
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代码如下：            
  1. /**app.wxss**/
  2. /** height: 100%   相对父高度100% **/
  3. /** display: flex  多栏多列结构或弹性结构 **/
  4. /** flex-direction: column  flex子项将笔直显示， ，，，正如一个列一样。。。。。**/
  5. /** align-items: center     flex子项位于容器的中心**/
  6. /** justify-content: space-between  flex子项目位于各行之间留有空缺的容器内。。。。。**/
  7. /** padding: 200rpx 0 上内边距为200rpxrpx 右内边距为0rpx **/
  8. /** box-sizing 属性允许您以特定的方式界说匹配某个区域的特定元素。。。。。**/
  9. /** border-box 为元素设定的宽度和高度决议了元素的边框盒。。。。。就是说， ，，，为元素指定的任何
  10.                内边距和边框都将在已设定的宽度和高度内举行绘制。。。。。通过从已设定的宽度
  11.                和高度划分减去边框和内边距才华获得内容的宽度和高度。。。。。**/
  12. .container {
  13.   height: 100%;  
  14.   display: flex;
  15.   flex-direction: column;
  16.   align-items: center;
  17.   justify-content: space-between;
  18.   padding: 200rpx 0;
  19.   box-sizing: border-box;
  20. }
复制代码
        
由于.container(类选择器)在文件app.wxss(小程序公共样式表)中， ，，，以是其可以在多个pages中被挪用。。。。。在本项目中， ，，，我们在index.wxml/logs.wxml中使用。。。。。如下图：微信小程序教程入门篇【3】,MINA框架的目录结构和设置  
微信小程序教程入门篇【3】,MINA框架的目录结构和设置

  • 尺寸单位

rpx（responsive pixel）: 可以凭证屏幕宽度举行自顺应。。。。。划定屏幕宽为750rpx。。。。。
如在iPhone6上， ，，，屏幕宽度为375px， ，，，共有750个物理像素， ，，，则750rpx = 375px = 750物理像素， ，，，1rpx = 0.5px = 1物理像素。。。。。
微信小程序教程入门篇【3】,MINA框架的目录结构和设置
(该图泉源于官网)

  • 选择器

微信小程序教程入门篇【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
换一换相关推荐
精选内容
热门精选
金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫
【网站地图】
微信小程序教程入门篇【3】,MINA框架的目录结构和设置 -