uni-app框架简单介绍

一、什么是uni-app？

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

 

uni-app的优点

 

跨平台发行，运行体验更好

与小程序的组件、API一致；

兼容weex原生渲染，增加了开发效率高，但是由于weex坑比较多，建议还是使用局部渲染优化；

通用前端技术栈,学习成本更低

支持vue语法，微信小程序API

内嵌mpvue

开发生态,组件更丰富

支持通过npm安装第三方包

支持微信小程序自定义组件及JS SDK

兼容mpvue组件及项目(内嵌mpvue开源框架)

App端支持和原生混合编码

插件丰富,DCloud将发布插件到市场

 

二、功能框架

在这里插入图片描述

 

三、创建项目

在点击工具栏里的文件 -> 新建 -> 项目：

在这里插入图片描述

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

 

uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

在这里插入图片描述

 

运行uni-app

 

浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。

在这里插入图片描述

真机运行：连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。

在这里插入图片描述

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

在这里插入图片描述

**注意：**如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。

uni-app默认把项目编译到根目录的unpackage目录。

在这里插入图片描述

其他支付宝小程序、百度小程序、字节跳动小程序、360等运行方式都是差不多的，感兴趣的话可以去官网查看

 

四、目录结构

一个uni-app工程，默认包含如下目录及文件：

 

┌─uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）

│─components 符合vue组件规范的uni-app组件目录

│ └─comp-a.vue 可复用的a组件

├─hybrid App端存放本地html文件的目录，详见

├─platforms 存放各平台专用页面的目录，详见

├─pages 业务页面文件存放的目录

│ ├─index

│ │ └─index.vue index页面

│ └─list

│ └─list.vue list页面

├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此

├─uni_modules 存放[uni_module](/uni_modules)规范的插件。

├─wxcomponents 存放小程序组件的目录，详见

├─main.js Vue初始化入口文件

├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期

├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见

└─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见

五、生命周期

应用生命周期

uni-app 支持 onLoad、onShow、onReady 等生命周期函数

 

组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期

 

六、路由

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同，如仍希望采用 Vue Router 方式管理路由，可在插件市场搜索 Vue-Router。

 

路由跳转

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。

 

页面栈

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

 

路由方式 页面栈表现 触发时机

初始化 新页面入栈 uni-app 打开的第一个页面

打开新页面 新页面入栈 调用 API uni.navigateTo 、使用组件

页面重定向 当前页面出栈，新页面入栈 调用 API uni.redirectTo 、使用组件

页面返回 页面不断出栈，直到目标返回页 调用 API uni.navigateBack 、使用组件 、用户按左上角返回按钮、安卓用户点击物理back按键

Tab 切换 页面全部出栈，只留下新的 Tab 页面 调用 API uni.switchTab 、使用组件 、用户切换 Tab

重加载 页面全部出栈，只留下新的页面 调用 API uni.reLaunch 、使用组件

七、判断平台

平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。

编译期判断 编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。详见：

条件编译

 

// #ifdef H5

    alert("只有h5平台才有alert方法")// #endif

如上代码只会编译到H5的发行包里，其他平台的包不会包含如上代码。

运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用uni.getSystemInfoSync().platform判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用uni.getSystemInfoSync().platform返回值均为 devtools）。

 

switch(uni.getSystemInfoSync().platform){

    case 'android':

       console.log('运行Android上')

       break;

    case 'ios':

       console.log('运行iOS上')

       break;

    default:

       console.log('运行在开发者工具上')

       break;}

如有必要，也可以在条件编译里自己定义一个变量，赋不同值。在后续运行代码中动态判断环境。

 

其他环境变量

其他环境变量的定义方式参考 环境变量。

八、uni-app 开发的注意事项

html标签

uni-app的tag同小程序的tag，和HTML的tag不一样，比如p要改成view，span要改成text、a要改成navigator。

CSS

推荐使用flex布局模型

单位方面，uni-app 支持的通用 css 单位包括 px、rpx

(早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了)

JS

只有H5端可使用浏览器内置对象，比如document、window、localstorage、cookie等，以及jquery等依赖。

 

九、页面样式与布局

（1）尺寸单位

uni-app支持以下css单位：

在这里插入图片描述

 

注意问题： 动态绑定的 style 不支持使用 upx，因为upx是编译器处理的，在手机端动态修改样式赋值时，无法直接使用 upx。

解决方案： 使用 uni.upx2px(Number) 转换为 px 后再赋值。

 

this.cWidth = uni.upx2px(750);

（2）样式导入

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

示例代码：

 

（3）内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

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 组件后边插入内容，仅 vue 页面生效

::before view::before 在 view 组件前边插入内容，仅 vue 页面生效

注意：

 

在 uni-app 中不能使用 * 在这里插入代码片选择器。

微信小程序自定义组件中仅支持 class 选择器

page 相当于 body 节点，例如：

page {

  background-color:#ccc;}

（5）背景图片 和 字体图标

 

支持 base64 格式图片。

支持网络路径图片。

使用本地图片或字体图标需注意：

图片小于 40kb，uni-app 会自动将其转化为 base64 格式；

图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。

本地引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。

/* 背景图片 */

 .bgImg {

     background-image: url('~@/static/logo.png');

 }/* 字体图标 */

 @iconImg {

     font-family: test1-icon;

     src: url('~@/static/iconfont.ttf');

 }