06. 零基础开发小程序——认识原生框架

本章内容我们认识一下小程序原生框架的目录结构。先来看一下基本框架

（一）小程序的目标和组成

1. 小程序的目标
2. 小程序的原生框架——MINA框架
3. 小程序框架的组成

（二）小程序文件结构和传统web对比

（三）小程序基本的项目目录

1. pages：页面文件夹
2. utils：第三方工具文件夹
3. app.js: 全局入口文件
4. app.json: 全局配置文件
5. app.wxss: 全局样式文件
6. project.config.json：项目的配置文件
7. sitemap.json: 微信索引配置文件

点击下方官方网址，了解小程序框架的定义和作用。

https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html

（一）小程序的目标和组成

1、小程序的目标

简言之，微信小程序是在微信中使用的APP

2、小程序的原生框架——MINA框架

MINA框架是小程序提供的开发框架，它类似于淘宝Weex、Vue框架；
MINA框架经过大量底层的优化设计，有着接近原生App的运行速度。
MINA同HTML一样，都是一种标识性语言。
HTML：超文本标记语言(HyperText Markup Language)，包括一系列的标签，通过标签将网上的文档格式统一，使分散的网络资源联结成一个整体。
简言之，一个HTML文件就是一个页面（page）,相当于某浏览器的主页界面；而微信小程序的原生框架就是MINA，所有的页面都是以它为基础进行搭建的。

3、小程序框架的组成

3.1 逻辑层

负责与逻辑层进行数据交互，用WXML与WXSS两种描述语言来编写，由组件来进行展示。

小程序强大的框架系统，会“自动”将视图层和逻辑层进行联结，
可以让程序猿更专注于数据与逻辑，
不再需要考虑“两个层”之间的交互问题。

3.2 视图层

负责与逻辑层进行数据交互，用WXML与WXSS两种描述语言来编写，由组件来进行展示。

其中，WXML是用来描述页面结构的视图层语言；
WXSS则是用来描述页面样式的语言；
组件（component）是视图的基本组成单元。

（二）小程序文件结构 VS 传统web

小程序文件结构 VS 传统web

通过以上对比得出，传统web 是三层结构;
微信小程序是四层结构，多了?层 配置（*.json ）
配置：用于联结小程序的视图层与逻辑层。

（三）小程序基本的项目目录

打开微信开发者工具--资源管理器（目录树）--上节课新建的小程序项目，操作如下：

小程序项目目录分为以下7项，我们逐一分解。

pages：页面文件夹
utils：第三方工具文件夹
app.js: 全局入口文件
app.json: 全局配置文件
app.wxss: 全局样式文件
project.config.json：项目的配置文件
sitemap.json: 微信索引配置文件

1、pages：页面文件夹

pages文件夹包括以下2个子文件夹（index和logs）；
每个子文件夹下又都有4个文件

1.1 index

index: 存放首页页面的文件夹
如下图所示，左侧的小程序界面即为首页页面，相关代码数据存放于index

1.1.1 index.js 

如下图所示， index.js 为首页页面的逻辑文件

 1.1.2 index.json

如下图所示，index.json为页面的配置项文件；
里面的内容在之后的文章中慢慢填充和讲解。

1.1.3 index.wxml

由下图可知，index.wxml的内容，是页面中 标签语句的互相嵌套

1.1.4 index.wxss

由下图可知，index.wxss的内容，是页面中 样式方面的指令

1.2 logs：日志界面文件夹

logs：存放日志界面的文件夹
如下图所示，左侧的小程序的首页页面--点击任意一处（下图为用户头像）出现的页面，即为日志页面

2、 utils文件夹

下拉文件是 utils.js文件
此文件是自己新建的关于javascript的方法公式，是可以删除的。

3、app.js

此文件是小程序的项目文件，也是全局文件，所有小程序的框架，在这里全部显示；
代码可以修改，但是此文件不可删除；

4、app.json

app.json为全局的配置文件，针对小程序项目进行统一配置，不可删除；
如：下图所示的标题名称“查看启动日志”，就是在此文件中进行的。

5、 app.wxss

此文件为全局的样式文件；
与index.wxss 功能一致，只是负责的内容界面不同。

6、 project.config.json

此文件为小程序项目的配置文件；
相当于“工具栏--详情”里各项的内容；
故可在project.config.json文件中修改AppID，操作如下图。

7、 sitemap.json

此文件为微信索引的配置文件

点击sitemap.json 文件中的链接

点击链接--跳转至“微信官方文档-sitemap 配置”网页，如下图

重点看一下这句话，小程序根目录的sitemap.json文件用来配置微信小程序及其页面是否被微信索引。

意为：

小程序中有很多页面，开发者可在sitemap.json 文件中进行改动，来指定某一页面能否在微信中被搜索到。
但是sitemap.json 这一文件只在小程序正式发布的时候使用，发布时再查看sitemap配置即可。

这节课主要介绍了小程序原生框架的基本目录结构及简单用途，下节课我们继续深入了解每一个文件的作用和使用~~

搜索并关注微信公众号：飞寝旺食

获取更多小程序运营干货、免费的开发教程、源代码等！

做小程序我们是认真的！

最后，

哈哈。