uni-app的使用笔记

什么是ubi-app

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

优点一：

​ uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

优点二：

​ uni-app对前端开发人员比较友好，学习成本比较低，首先uni-app是基于vue.js的。其次封装的组件和微信小程序的组件一毛一样，所以对于现在的主流前端人员来说学习几乎0成本，如果你作为一个前端，没有接触过vue和微信小程序的话那建议你多去加加油了。

优点三：,

​ uni-app使用HBX进行开发，HBX对于vue语法等支持可以说是比较完备了。使用HBX进行开发可以说是速度杠杠的。开发速度比较快，ps：虽然我是一个vscode党，但是也还是不得不说HBX做的也很不错了。个人挺喜欢的。

优点四：

uni-app拓展能力强，封装了H5+,支持nvue，也支持原生Android，ios开发。可以将原有的移动应用和H5应用改成uni-app应用。

优点五：

uni-app是DCloud出品的，属于国产，对于国产我们当然要支持一下啦！

缺点一：

uni-app问世的时间还比较短，有很多地方还不是完善，坑很多，如果不喜欢爬坑的朋友那就少用uni-app吧。

缺点二：

对于使用中的一些bug及问题，官方回应的不是很及时。不过可以加一下qq群或者去社区和其他uni-app开发者一起讨论呀。

开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

模板内引入静态资源

template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

注意

• @开头的绝对路径以及相对路径会经过base64转换规则校验
• 引入的静态资源在非h5平台，均不转为base64。
• H5平台，小于4kb的资源会被转换成base64，其余不转。
• 自HBuilderX 2.6.6起template内支持@开头路径引入静态资源，旧版本不支持此方式
• App平台自HBuilderX 2.6.9起template节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致
• 支付宝小程序组件内 image 标签不可使用相对路径

js文件引入

js文件或script标签内（包括renderjs等）引入js文件时，可以使用相对路径和绝对路径，形式如下

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

注意

• js文件不支持使用/开头的方式引入

css引入静态资源

css文件或style标签内引入css文件时（scss、less文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6）

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

注意

• 自HBuilderX 2.6.6起支持绝对路径引入静态资源，旧版本不支持此方式

css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端css文件不允许引用本地文件（请看注意事项）。

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

Tips

• 引入字体图标请参考，字体图标
• @开头的绝对路径以及相对路径会经过base64转换规则校验
• 不支持本地图片的平台，小于40kb，一定会转base64。（共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）
• h5平台，小于4kb会转base64，超出4kb时不转。
• 其余平台不会转base64

生命周期

应用生命周期

uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数，详情请参考应用生命周期

页面生命周期

uni-app 支持 onLoad、onShow、onReady 等生命周期函数，详情请参考页面生命周期

路由

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

路由跳转

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

页面栈

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

运行环境判断

开发环境和生产环境

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

• 在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境
• cli模式下，是通行的编译环境处理方式。

if(process.env.NODE_ENV === 'development'){
console.log('开发环境')
}else{
console.log('生产环境')
}

如果你需要自定义更多环境，比如测试环境：

• 假设只需要对单一平台配置，可以 package.json 中配置，在HBuilderX的运行和发行菜单里会多一个出来。https://uniapp.dcloud.io/collocation/package
• 如果是针对所有平台配置，可以在 vue-config.js 中配置。https://uniapp.dcloud.io/collocation/vue-config

快捷代码块

HBuilderX 中敲入代码块 uEnvDev、uEnvProd 可以快速生成对应 development、production 的运行环境判定代码。

// uEnvDev
if (process.env.NODE_ENV === 'development') {
// TODO
}
// uEnvProd
if (process.env.NODE_ENV === 'production') {
// TODO
}

判断平台

平台判断有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的css与web的css基本一致。本文没有讲解css的用法。在你了解web的css的基础之上，本文讲述一些样式相关的注意事项。

uni-app有vue页面和nvue页面。vue页面是webview渲染的、app端的nvue页面是原生渲染的。在nvue页面里样式比web会限制更多，另见nvue样式专项文档

本文重点介绍vue页面的样式注意事项。

尺寸单位

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

• px 即屏幕像素
• rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx计算配置 。

vue页面支持下面这些普通H5单位，但在nvue里不支持：

• rem 根字体大小可以通过 page-meta 配置
• vh viewpoint height，视窗高度，1vh等于视窗高度的1%
• vw viewpoint width，视窗宽度，1vw等于视窗宽度的1%

nvue还不支持百分比单位。

App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpx

nvue中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中一致。weex 模式目前遵循weex的单位，它的单位比较特殊：

• px:，以750宽的屏幕为基准动态计算的长度单位，与 vue 页面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 逻辑不一样。）
• wx：与设备屏幕宽度无关的长度单位，与 vue 页面中的 px 理念相同

最后

以上就是复杂板凳为你收集整理的uni-app的使用笔记的全部内容，希望文章能够帮你解决uni-app的使用笔记所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。