微信小程序开发系列——4.小程序视图页面基础知识
摘要：本文介绍了小程序的使用的前端语言，以及小程序开发过程中需要知道的页面基础知识。
1. 介绍
搭建后端服务器完毕以后，我们接下来准备小程序前端页面的基础知识。
由于微信前后端是分离的，我们开发时一般可以使用分块开发的模式，即前端和后端代码分离，使用JavaScript编写数据绑定和相关通信代码。由于微信整个框架只有两层：视图层和逻辑层。因此很明显可以看出，视图层的大部分内容为前端页面展示代码，而逻辑层处理前后端的交互。因此，大部分的功能属于比较简单的功能，可以先在前端页面上预留好相应的接口，在完成视图开发以后，继续编写与后端服务器通信的代码。简而言之，表示如下：
| 编号 | 运行位置 | 框架 | 使用的主要语言 | 功能 |
|---|---|---|---|---|
| 1 | 手机客户端 | 视图层 | WXML, WXSS 框架专用语言 | 微信前端页面展示 |
| 2 | 手机客户端 | 逻辑层 | 运行在 JsCore 内核中的 JavaScript | 业务逻辑处理 |
| 3 | 后端服务器 | 后端服务 | Java, Python, PHP, Node.js 等后端语言 | 提供数据、服务、事件响应等 |
只要把这三个层级的所有代码编写好，就能完成一个完整的小程序应用，当然，每一块框架的内容想要掌握核心还是很难的。不过没关系，我们要求不高，凭借以前的开发经验，我想还是能完成这个任务的！
千里之行，始于足下，我们今天来搞定第一块视图层的基础知识。
2.文件结构
通常来说，一个完整的微信小程序文件结构目录是这样的：
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
| 文件类型 | 必填 | 作用 |
|---|---|---|
| app.js | 是 | 小程序逻辑 |
| app.json | 是 | 小程序公共设置 |
| app.wxss | 否 | 小程序的css样式表 |
每个单独的小程序页面由四个文件组成，分别是：
| 文件类型 | 必填 | 作用 |
|---|---|---|
| js | 是 | 页面逻辑 |
| wxml | 是 | 页面结构 |
| wxss | 否 | 页面样式表 |
| json | 否 | 页面配置 |
除此以外，utils.js为自行定义的function, 自行编写的公共函数可以放在这个文件中，然后在每个单独页面的.js文件中，使用require()引用。如果不需要这些一些函数的功能，可以把util.js这个文件删除。
以上就是小程序运行所必须的所有组件。具体的内容，根据详细的开发框架，完成需要制作的程序即可。为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。
3. 深入理解视图层的功能
框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层，也就是说：
| 视图层元素 | 必填 | 作用 |
|---|---|---|
| wxml | 是 | 是视图层的基本语言 |
| 组件 | 是 | 由wxml编写成，实现的基本视图元素 |
| wxss | 否 | 与css类似，控制每个组件的样式 |
4. wxml 功能
数据绑定
首先，在每个页面单独的js文件中Page({ data:{} })中，在data的中括号内定义变量名，在wxml中，用双大括号引用该变量，可以完成视图层和特定数据绑定的功能。
//test.js
Page({
data: {
message: 'MINA!'
}
})//test.wxml
<view> hello world {{message}}! view>
更多知识请看官方文档wxml的介绍。
5. wxss功能
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者， WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序，我们对 CSS 进行了扩充以及修改。
在这里要介绍一个rpx的概念，rpx（responsive pixel）是为了应对不同手机长宽比不同而提出的响应式布局的解决方案，使用rpx作为组件长度和宽度的单位，可以根据手机屏幕宽度进行自适应。无论手机尺寸为多少，总是规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
| 设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。
更多wxss的知识，请看关于wxss官方文档的介绍。
5.组件
框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
什么是组件？
组件是视图层的基本组成单元。
组件自带一些功能与微信风格的相似的样式。
一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
简单来说，组件就是写在wxml中的一系列标签，原来html中使用的 <div> <p> 等标签，用另外的名字来替代，以适应微信小程序中的开发风格。
基础组件分为以下七大类：
- 视图容器
| 组件名 | 说明 |
|---|---|
| view | 视图容器 |
| scroll-view | 滚动视图容器 |
| swiper | 滑块视图容器 |
2. 基础内容
| 组件名 | 说明 |
|---|---|
| icon | 图标 |
| text | 文字 |
| progress | 进度条 |
3. 表单
| 组件名 | 说明 |
|---|---|
| button | 按钮 |
| form | 表单 |
| input | 输入框 |
| checkbox | 多项选择器 |
| radio | 单项选择器 |
| picker | 列表选择器 |
| picker-view | 内嵌列表选择器 |
| slider | 滚动选择器 |
| switch | 开关选择器 |
| label | 标签 |
4. 导航
| 组件名 | 说明 |
|---|---|
| navigator | 导航 |
5. 多媒体
| 组件名 | 说明 |
|---|---|
| audio | 音频 |
| image | 图片 |
| video | 视频 |
6.地图
| 组件名 | 说明 |
|---|---|
| map | 地图 |
7. 画布
| 组件名 | 说明 |
|---|---|
| canvas | 画布 |
8. 客服会话
| 组件名 | 说明 |
|---|---|
| contact-button | 进入客服会话按钮 |
更多关于组件的知识，点这里看官方文档的介绍。
好啦，说了这么多，关于小程序视图页面的基础知识想必也学得差不多了。如果有前端基础的话，只要找几个现有的例子稍作练习，这方面的知识很快就会掌握的。