微信小程序(二） | 了解页面结构与组件

🔺半个多月就开学了，过年什么的没什么开心的，开学之后就没有假期了，我想开学买个自行车，我一共就那点生活费，我想买好多东西，我想给我爸那里在骗点钱，给我奶骗点钱，因为我有点大了，所以压岁钱不太多了，我得多去串串门，混着我弟的压岁钱，这样开学前就会多一些了，这样想着，我打算这样做。

认识基本结构

 ① pages 用来存放所有小程序的页面

 ② utils 用来存放工具性质的模块(例如：格式化时间的自定义模块)

 ③ app.js 小程序项目的入口文件

 ④ app.json 小程序项目的全局配置文件

 ⑤ app.wxss 小程序项目的全局样式文件

 ⑥ project.config.json 项目的配置文件

 ⑦ sitemap.json 用来配置小程序及其页面是否允许被微信索引

其中，每个页面由4个基本文件组成，以index页面为例，它们分别是:

 ① .js 文件(页面的脚本文件，存放页面的数据、事件处理函数等)

 ② .json 文件(当前页面的配置文件，配置窗口的外观、表现等)

 ③ .wxml 文件(页面的模板结构文件)

 ④ .wxss 文件(当前页面的样式表文件)

JSON配置文件的作用

JSON是一种数据格式，在实际开发中，以配置文件的形式出现，小程序中有4种json配置文件，分别是:

1、项目根目录中的 app.json 配置文件，包括了小程序所有的页面路径、窗口外观、界面表现、底部tab等

2、项目根目录中的 project.config.json 配置文件

3、项目根目录中的 sitemap.json 配置文件

4、每个页面文件夹中的 .json 配置文件

WXML和HTML的区别

1、标签名称不同

·HTML (div,span,img,a)

·WXML (view,text,image,navigator)

2、属性节点不同

·<a href="#">超链接</a>

·<navigator url="/pages/home/home"></navigator>

3、提供了类似于Vue中的模板语法

·数据绑定

·列表渲染

·条件渲染

wxss

1、新增了rpx尺寸单位

2、提供了全局样式和局部样式

3、仅支持部分css编辑器

js

app.js，整个小程序的入口文件，来启动整个小程序

页面的 .js文件 页面的入口文件，来创建并运行页面 

普通的 .js文件 普通的功能模块文件，用来封装公共的函数或属性供页面使用

小程序的宿主环境

宿主环境:程序运行所必须的依赖环境，脱离了宿主环境的软件是没有任何意义的！

对于小程序，手机微信是小程序的宿主环境。

小程序借助宿主环境提供的能力，可以完成普通网页无法完成的功能，例如:微信扫码，微信支付，微信登陆，地理定位，etc

宿主环境提供的支持

1、通信模型

分为渲染层和逻辑层之间的通信(由微信客户端转发)、渲染层和第三方服务器之间的通信(由微信客户端进行转发)  ps：我也不太明白，可能后面写代码就会慢慢理解了

2、运行机制

启动过程

1、把小程序代码包下载到本地

2、解析全局配置文件

3、执行小程序入口文件

4、渲染小程序首页

5、小程序启动完成

3、组件

分类

常用：视图容器、基础内容、表单组件、导航组件

4、API

新建小程序页面

修改项目首页

修改顺序即可