框架介绍

开发规范

目录结构

生命周期

应用生命周期

页面生命周期

路由

路由跳转

页面栈

运行环境判断

开发环境和生产环境

页面样式与布局

尺寸单位

样式导入

内联样式

选择器

全局样式与局部样式

CSS变量

固定值

Flex布局

背景图片

字体图标

框架介绍

开发规范

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

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

目录结构

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

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

提示：

static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。
HbuilderX 1.9.0+ 支持在根目录创建 ext.json 、sitemap.json 文件。

生命周期

应用生命周期

注意因为表格显示有问题，这里我就直接截的图，表格中的链接请看官方文档：uni-app官方文档

uni-app 支持如下应用生命周期函数：

注意

应用生命周期仅可在App.vue中监听，在其他页面监听无效
onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942

页面生命周期

uni-app 支持如下页面生命周期函数

onPageScroll 参数说明：

onTabItemTap 参数说明：

注意

onTabItemTap常用于点击当前tabitem，滚动或刷新当前页面。如果是点击不同的tabitem，一定会触发页面切换。
如果想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap，可以使用plus.nativeObj.view放一个区块盖住原先的tabitem，并拦截点击事件。
onTabItemTap在App端，从HBuilderX 1.9 的自定义组件编译模式开始支持。

onNavigationBarButtonTap 参数说明：

onBackPress 回调参数对象的说明

路由

uni-app路由全部交给框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式，不支持 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('生产环境')
}

快捷代码块

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

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

判断平台

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

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

// #ifdef H5alert("只有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 单位包括 px、rpx

px即屏幕像素
rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大

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

rem 默认根字体大小为屏幕宽度/20 (微信小程序、头条小程序、App、H5)
vh viewpoint height，视窗高度，1vh等于视窗高度的1%
vw viewpoint width，视窗宽度，1vw等于视窗宽度的1%

nvue还不支持百分比单位。

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

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

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

下面对 rpx 详细说明：

设计师在提供设计图时，一般只提供一个分辨率的图。

严格按设计图标注的 px 做开发，在不同宽度的手机上界面很容易变形。

而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求。

微信小程序设计了 rpx 解决这个问题，uni-app 在 App 端、H5 端都支持了 rpx。

rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。

开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

换言之，页面元素宽度在 uni-app 中的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例来说：

若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。
若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。
若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。

Tips

注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。
如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用 px 。
rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向
设计师可以用 iPhone6 作为视觉稿的标准。
如果设计稿不是750px，HBuilderX提供了自动换算的工具，详见：https://ask.dcloud.net.cn/article/35445。
App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。
早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了，详见

样式导入

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

示例代码：

<style>@import "../../common/uni.css";.uni-card {box-shadow: none;}
</style>

内联样式

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

style:静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。

<view :style="{color:color}" />

class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上，样式类名之间用空格分隔

<view class="normal_view" />

选择器

目前支持的选择器有：

注意：

在uni-app中不能使用 * 选择器。
page 相当于 body 节点，例如：

<!-- 设置页面背景颜色 -->
page {background-color:#ccc;
}

全局样式与局部样式

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

注意：App.vue中通过@import语句可以导入外联样式，一样作用于每一个页面

CSS变量

uni-app提供内置CSS变量

注意：

var(--status-bar-height)此变量在微信小程序环境为固定 25px ，在5+App里为手机实际状态栏高度
当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置，此时可以使用一个高度为 var(--status-bar-height) 的view放在页面顶部，避免页面内容出现在状态栏
由于在H5端，不存在原生导航栏和tabbar，也是前端div模拟。如果设置了一个固定位置的居底view，在小程序和App端是在tabbar上方，但在H5端会与tabbar重叠。此时可使用--window-bottom，不管在哪个端，都是固定在tabbar上方。
目前nvue还不支持css变量

代码块

快速书写css变量的方法是：在css中敲hei，在候选助手中即可看到3个css变量。（HBuilderX 1.9.6以上支持）

示例：

<template><view><view class="status_bar"><!-- 这里是状态栏 --></view><view> 状态栏下的文字 </view></view>
</template>
<style>.status_bar {height: var(--status-bar-height);width: 100%;}
</style>

<template><view><view class="toTop"><!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px--></view></view>
</template>
<style>.toTop {bottom: calc(var(--window-bottom) + 10px)}
</style>

固定值

uni-app 中以下组件的高度是固定的，不可修改：

Flex布局

为支持跨平台，框架建议使用Flex布局，关于Flex布局可以参考外部文档A Complete Guide to Flexbox、阮一峰的flex教程等。

背景图片

uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目相同，需要注意以下几点：

支持 base64 格式图片。
支持网络路径图片。
使用本地路径背景图片需注意：

图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
图片大于等于 40kb，需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。

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

字体图标

uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

支持 base64 格式字体图标。
支持网络路径字体图标。
网络路径必须加协议头 https。
从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。
uni-app 本地路径图标字体支持情况：

字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
字体文件大于等于 40kb，需开发者自己转换，否则使用将不生效；
字体文件的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。

 @font-face {font-family: test1-icon;src: url('~@/static/iconfont.ttf');}

示例：

<template><view><view><text class="test"></text><text class="test"></text><text class="test"></text></view></view>
</template>
<style>@font-face {font-family: 'iconfont';src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');}.test {font-family: iconfont;margin-left: 20rpx;}
</style>

<template/>和</block>

uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用来进行列表渲染和条件渲染。

<template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

代码示例

<template><view><template v-if="test"><view>test 为 true 时显示</view></template><template v-else><view>test 为 false 时显示</view></template></view>
</template>

<template><view><block v-for="(item,index) in list" :key="index"><view>{{item}} - {{index}}</view></block></view>
</template>

小程序组件支持

uni-app 支持在 5+App 和小程序中使用小程序组件。

平台差异说明

此文档要求开发者对各端小程序的自定义组件有一定了解，没接触过小程序自定义组件的可以参考：

微信小程序自定义组件
百度小程序自定义组件
支付宝小程序自定义组件
头条小程序自定义组件

目录结构

使用方式

在 pages.json 对应页面的 style -> usingComponents 引入组件：

{"pages": [{"path": "index/index","style": {"usingComponents": {// #ifdef APP-PLUS || MP-WEIXIN"custom": "/wxcomponents/custom/index"// #endif// #ifdef MP-BAIDU"custom": "/swancomponents/custom/index"// #endif// #ifdef MP-ALIPAY"custom": "/mycomponents/custom/index"// #endif}}}]
}

在页面中使用

<!-- 页面模板 (index.vue) -->
<view><!-- 在页面中对自定义组件进行引用 --><custom name="uni-app"></custom>
</view>

注意事项

小程序组件需要放在项目特殊文件夹 wxcomponents（或 mycomponents、swancomponents）。
HBuilderX 建立的工程 wxcomponents 文件夹在项目根目录下。
vue-cli 建立的工程 wxcomponents 文件夹在 src 目录下。
注意数据和事件绑定的差异，使用时应按照 vue 的数据和事件绑定方式
- 属性绑定从 attr="{{ a }}"，改为 :attr="a"；从 title="复选框{{ item }}" 改为 :title="'复选框' + item"
- 事件绑定从 bind:click="toggleActionSheet1" 改为 @click="toggleActionSheet1"
- 阻止事件冒泡从 catch:tap="xx" 改为 @tap.native.stop="xx"
- wx:if 改为 v-if
- wx:for="{{ list }}" wx:key="{{ index }}" 改为`v-for="(item,index) in list"
- 原事件命名以短横线分隔的需要手动修改小程序组件源码为驼峰命名，比如：this.$emit('left-click') 修改为 this.$emit('leftClick')（HBuilderX 1.9.0+ 不再需要修改此项）

详细的小程序转uni-app语法差异可参考文档https://ask.dcloud.net.cn/article/35786。

uni-app入门(一)--介绍相关推荐

uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
物联网控制APP入门专题（二）---阿里云iot studio移动可视化功能基本操作
微信小程序连接阿里云物联网平台云端API实现物联操控 03-25 其中包含cryptojs.uuid生成模块,还有用于微信小程序连接阿里云物联网平台云端API的专属sdk,已结实现效果demo,只需填 ...
Docker新手入门详细介绍
Docker新手入门详细介绍 Docker 起源于 dotCloud 公司的内部项目,于 2013 年 3 月以 Apache 2.0 授权协议开源,主要项目代码在 GitHub 上进行维护,2013 ...
java类安卓app 简介_android.app.Activity 的介绍
文章可随意转载,但务必注明源地址发现当前Android的资料不是很多,而且对于Activity的介绍也很少,所以把官方文档的android.app.Activity的介绍翻译了一下,加入了一些自己的 ...
UI设计APP图标设计规范介绍
UI设计所涉及的内容是比较多的,其中关于APP图标的设计就是常见的一种,UI设计师需要掌握不同的UI设计规范.今天小编就帮助大家了解下移动端APP图标设计规范: 很多设计师以为UI设计就是设计图标 ...
微信小程序 app.json 详细介绍
微信小程序 app.json 详细介绍 {// 写各个页面的路径 (新增页面或者减少页面都要对其进行修改)"pages": ["pages/index/index&quo ...
cordova打开文件_Cordova开发App入门（四）打开及下载第三方App
前言在开发app时经常会碰到这种需求:我要在A应用中打开B应用,那么用Cordova如何实现呢? 欲知后事如何,且听下回分解...... ... 大大大大佬,别,别打我,我继续写还不行了吗. 本文涉 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
java开发和基于asp.net开发有什么优越性?_java语言的入门开始介绍
java编程语言是目前世界最流行的编程语言,它是在c++的基础上开发出来的语言,它取其精华去其糟粕让java语言具有功能强大和简单易用的特征. java具有:面对对象.分布式.健壮性.安全性.平台独立 ...

uni-app入门(一)--介绍

框架介绍

开发规范

目录结构

生命周期

应用生命周期

页面生命周期

路由

路由跳转

页面栈

运行环境判断

开发环境和生产环境

页面样式与布局

尺寸单位

样式导入

内联样式

选择器

全局样式与局部样式

CSS变量

固定值

Flex布局

背景图片

字体图标

<template/>和</block>

uni-app入门(一)--介绍相关推荐

最新文章

热门文章