uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
详细的 uni-app 官方文档，请翻阅https://uniapp.dcloud.net.cn
uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：
当然你也可以根据自己的喜好，选择使用VSCode、Sublime、…等自己喜欢的编辑器
访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html
点击首页的 DOWNLOAD 按钮
选择下载 正式版 -> App 开发版
为了方便编写样式（例如：），建议安装 scss/sass 编译 插件。插件下载地址：https://ext.dcloud.net.cn/plugin?name=compile-node-sass
进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，截图如下：
操作步骤：工具 -> 预设快捷键方案切换 -> VS Code
操作步骤：HBuilderX -> 偏好设置 -> 打开 Settings.json 按需进行配置
Scss 在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，实现更高效地开发网站前端。
Sass 官方中文文档：https://www.sass.hk/docs/
在VSCode中使用sass，我们需要先安装两款插件分别是easy sass（编译） 和 sass（代码提示）插件
在VSCode的setting.json中配置如下内容：
"easysass.formats":[
{"format": "expanded",
"extension": ".css"},
{"format": "compressed",
"extension": ".min.css"}
],
"easysass.targetDir": "./",// 这个是配置.css文件生成的路径
可以使用不同的选择器进行嵌套，可更方便与直观的产看与管理选择器的父子关系：
添加符号”&“表示在该父容器后面添加相应的后缀，可是该元素的某个行为或其它等
属性名称前都具有相同的字符时，可使用属性嵌套的方法。注：font: {}，冒号后与花括号中间需有空格进行隔开
有时候需要定义一套样式，但并不给某个元素使用，必须在需要调用的时候才能启用此样式库，使用“%foo”占位，通过@extend进行调试。%foo名称可以自定义，前面需要加上符号%
支持标准的 Css 的注释语法，单行注释 “//” 与多行注释 “/* */”。注释在 .scss 中的规则：
// 单行注释
/*
* 多行注释 */
/*!
* 版权声明
* 作者: #{#author} */
使用@import进行文件的导入
导入.scss文件的方式，使用@import进行导入，文件名可以有.scss后缀，也可以省略
注意：导入的 .scss 文件，由于该文件内的代码会重新在发生导入的文件中生成，所以无需再单独生成一个被导入的文件的 .css 文件，解决的方法是在被导入的文件名前增加一个下划线 “_” 的符号，这样可以保证该文件不会被重新生成 .css 文件，而在导入该文件时，前面的下划线可以写入也可以省略：
// 以下代码表示将导入一个名为 “_main.scss” 的文件
// 方法1
@import "main";
// 方法2
@import "_main";
导入文件同样也可以写入选择器中，写入选择器后，导入的文件中的所有变量将只适用于该选择器，同时导入的文件中的所有选择器前也会增加发生导入的选择器前的名称：
.container {
@import "main";
color: $color;
}
以下几种方式，只会将文件作为普通的css语句进行引入：
.css
http://或https://开头url()的形式引入media queries
@import "main.css";
@import "http://puji.design/main.css";
@import url(main);
@import "landscape" screen and (orientation: landscape);
注：采用 @import ‘main.css’ 这种形式引入文件，编译后，文件地址将为计算机的绝对地址，这样的引入形式慎用，建议采用 @import url(main) 的方式。
使用符号 “$” 定义变量，变量名称可自己命名，赋值方法与 css 相同。如：”$color: red;”
变量的定义与使用需有先后顺序，即先定义变量，然后再使用变量，书写的顺序则是将定义变量写在前面，使用变量写在后面。
$开头，后面跟随变量名称；如果多个单词的链接，可以使用横线-、下划线_或驼峰式的命名形式，需要注意的是，如果同样的单词，分别采用横线与下划线来连接，此名称相当于是同一个名称，在解析时，会采用最后一个声明的变量来解析。因此在命名的时候建议统一使用一个符号。
可以使用 “!default” 为每个变量设置一个默认值，如果该变量没有被重新定义过，则会将该变量解析为默认值，如果已经有过定义，则会取其以定义过的值。以下代码已经有定义过该变量，因此获取的是定义过的值，默认值不会覆盖之前已经定义过的值。
局部变量：在选择器中定义的变量，只能在该选择器或该选择器的子选择器中使用
全局作用域：定义后的变量，可以在全局范围内使用，全局变量的定义有两种形式：
!global,注意，!global需要添加在分号前，与变量值使用空格分割。
Scss支持以下几种主要的数据类型：
判断数据类型的方式：type-of($value)
$layer-index: 10;
$font-base-family: "Open Sans", Helvetica, sans-serif;
$top-bg-color: rgba(0,0,0,.1);
$block-base-padding: 6px 10px 6px 10px;
$blank-mode: true;
$var: null //值null是其类型的唯一值。他表示缺少值，通常由函数返回以指示缺少结果
$color-map: (color1: #f00, color2: #0f0, color3: #00f);
$fonts: (serif: "Helvetica Neue", monospace: "Consolas");
支持有引号的字符串与无引号的字符串，有引号的字符串，无论单引号还是双引号，编译后都为双引号，无引号的字符串编译后同样没有引号。如果一段话由多个单词组成，并且包含空格，需要将引号加上。
$number1: 30;
$number2: 6.9;
$number3: 16px;
$number4: 32a; // 不规范，但不会报错
// 注：数字后接的任何字母都会视为单位，单位会和数字当作一个整体进行计算
css 原有颜色类型，包括十六进制、RGB、RGBA、HSL、HSLA和色彩单词
只有两个值 “true” 和 “false”，只有自身是 false 或 null 才会返回 false，其他一切都会返回 true，主要用于逻辑判断。
只有一个值 “null”，如 “$name: null;”。由于他为空，因此不能使用它与任何类型进行运算，主要用于逻辑判断
通过空格或半角逗号分割的一系列的值，数组中还可以包含子数组，如下方的 “ l i s t 2 ”和“ list2” 和 “ list2”和“list3″，当数组被编译为 css 时，圆括号不会被添加
$list1: 1px 2px 3px 4px; //一维数字
$list2: 1px 2px, 3px 4px; //二维数字
$list3: (1px 2px) (3px 4px); //二维数字
// 指定数组中的某个值进行调用
nth( $list, 2);
Maps 必须被圆括号包裹，可以映射任何键值对：
$map: (
key1: value1,
key2: value2,
key3: value3
)
映射函数：返回 Map 中 key 所对应的值( value )。如没有对应的 key，则返回 null 值。
map-get(map, key)
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-get($font-sizes, "small")
结果: 12px
判断 map 是否有对应的 key，存在返回 true，否则返回 false：
map-has-key(map, key)
实例:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-has-key($font-sizes, "big")
结果: false
返回 map 中所有的 key 组成的队列：
map-keys(map)
实例:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-keys($font-sizes)
结果: "small", "normal, "large"
合并两个 map 形成一个新的 map 类型，即将 map2 添加到 map1的尾部：
map-merge(map1, map2)
实例:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
$font-sizes2: ("x-large": 30px, "xx-large": 36px)
map-merge($font-sizes, $font-sizes2)
结果: "small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px
移除 map 中的 keys，多个 key 使用逗号隔开：
map-remove(map, keys...)
实例:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-remove($font-sizes, "small")
结果: ("normal": 18px, "large": 24px)
map-remove($font-sizes, "small", "large")
结果: ("normal": 18px)
返回 map 中所有的 value 并生成一个队列：
map-values(map)
实例:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-values($font-sizes)
结果: 12px, 18px, 24px
所有数据类型都支持等号运算符，等于使用 “==” 表示，不等于使用 “!=” 表示
关系运算符只支持数字，使用的符号分别是大于号 “>”，小于号 “<“，大于等于号 “>=” 与小于等于号 “<=” ，返回值 “true” 或 “false”，主要应用于条件判断
$a: 1 > 2; //false
$a: 1 < 2; //true
$a: 1 >= 2; //false
$a: 1 <= 2; //true
布尔运算符包含三种形式，分别是与 “and”、 或”or”、 非”not”。
数字运算符包含加”+”，减”-“，乘”*”，除”/”与取模”%”，取模即是两个数字相除取余数。
基本用法：
// 纯数字相加
$plus1: 30 + 30; //60
$plus2: 30px + 30; //60px
$plus3: 30% + 30%; //60%
$plus4: 30px + 30pt; //70px
$plus5: 30px + 30pt + 30pc; //550px
//纯数字相减
$minus1: 60 - 30; //30
$minus2: 60px - 30; //30px
$minus3: 60% - 30%; //30%
$minus4: 60px - 30pt; //20px
$minus5: 60px - 30pt - 30pc; //-460px
//纯数字相乘
$multipl1: 60 * 30; //1800
$multipl2: 60px * 30; //1800px
$multipl3: 60% * 30; //1800%
$multipl4: 60px * 30 * 30; //54000px
//纯数字相除
$division1: (
