跨平台框架Uni-app入坑笔记(一)

一、介绍

Uni-app是一个前端框架，使用Vue.js开发，继承自Vue.js，提供了完整的Vue.js体验。

Vue文字教程请访问W3Cschool课程

Vue视频教程请访问Bilibili相关视频课程，视频课程使用VS编辑器，讲解较为详细。

提供了条件编译优化，可以为某个平台编个性化代码而不影响其他平台。

打包到APP时使用5+引擎，5+的所有能力都可以在uni-app中使用。

二、开发工具和环境

开发工具使用HbuilderX（内置uni-app项目模板）：下载地址

微信开发者工具（编译调试小程序所用）：下载地址

APP模拟器及配置教程：教程地址

三、开发规范及目录结构

（1）页面规范——Vue单文件组件规范

.vue后缀名文件是自定义文件类型，使用类HTML语法描述vue组件。

每个vue文件包括三种类型的顶级语言块：<template>     <script>    <style>，此外还允许添加自定义块。

vue-loader会解析文件，提取每个语言块，如有必要会通过其他loader处理，最后将他们组装成一个ES Module，它的默认导出是一个Vue.js组件选项的对象。

#语言块、模板

每个.vue文件有且仅有一个<template>块

#脚本

每个.vue文件有且仅有一个<script>块

#样式

每个.vue文件可以有多个<style>标签

#自定义块

可以在.vue文件中添加额外的自定义块来实现项目的特定需求。

#src导入

可以通过src属性导入外部文件

注意：src导入遵循和webpack模块相同的路径解析规则，即（相对路径需要以./开始）

（2）组件标签规范

注意，不能使用标准HTML标签，也不能用JS对dom进行操作。详见uni-app组件规范手册

接口能力（JS API）靠近微信小程序规范，详见uni-app接口规范

数据绑定及事件处理靠近Vue.js规范，同时补充了APP及页面的生命周期

，建议使用Flex布局进行开发以兼容多端运行。flex布局视频教程

（3）目录结构（1.9.2.20190417版本目录）：

pages　　　　：业务页面文件存放目录

static　　　　  ：存放应用引用静态资源（图片，视频等）的地方，注意：惊天资源只能存放于此

APP.vue　　　：应用配置，用来配置APP全局样式以及监听应用的生命周期

main.js　　　  ：Vue初始化入口文件

mainfest.json   ：配置应用名称、appid、logo、版本等打包信息

pages.json       ：配置页面路由、导航条、选项卡等页面类信息

uni.scss　　     ：uni-app内置的常用样式变量，对于APP开发者（插件使用者），可以通过修改这些变量来定制自己的插件，实现自定义主题功能。如果项目使用了scss预处理，可以直接在scss代码中使用其中的变量，同时无需import这个文件。

四、页面样式与布局

重要说明：新版本HBuilderX中已经将app.vue的全局样式删除了，在开发过程中需要flex时使用flex即可

（1）尺寸单位

框架目前仅支持长度单位px和%。uni-app的基准宽度为750px

页面元素宽度在uni-app中的宽度计算公式：750px * （元素在设计稿中的宽度）/（设计稿基准宽度）

（2）样式导入

使用@import语句导入外联样式，后跟需要导入的外联样式表的相对路径，以分号结束

（3）内联样式

框架组件支持style、class属性来空值组件的样式

style：接受动态样式，在运行时会解析，尽量避免将静态的样式写进style中以免影响渲染速度

class：用于指定样式规则，其属性值是样式规则中类选择器名（样式类名）的集合，样式类名前无需加.  ，样式类名之间用空格分隔

（4）选择器

.class .intro　　　　　　　　　　  　　选择多有拥有class="intro"的组件

#id #firstname 　　　　　　　　    　　选择拥有id="firstname"的组件

element view 　　　　　　　　　 　　 选择所有view组件

element，element view，checkbox　　选择所有文档的view组件和所有的checkbox组件

：：after  view：：after　　　　　　　在view组件后面插入内容，（仅微信小程序和5+APP生效）

：：before  view：：before　　　　　 在view组件前面插入内容，（仅微信小程序和5+APP生效）

（5）全局样式与局部样式

定义在App.vue中的样式为全局样式，作用于每个页面。在pages目录下的vue文件中定义的样式为局部样式，制作用在对应的页面，并会覆盖App.vue中相同的选择器。

（6）flex布局

支持跨平台