一、uni-app简单介绍
什么是uni-app?
uni-app 是使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。
uni-app的优点
1. 跨平台发行,运行体验更好
2. 兼容weex原生渲染,增加了开发效率高,但是由于weex坑比较多,建议还是使用局部渲染优化;
3. 支持vue语法,微信小程序API
4. 内嵌mpvue
5. 支持通过npm安装第三方包
6. 支持微信小程序自定义组件及JS SDK
7. 兼容mpvue组件及项目(内嵌mpvue开源框架)
8. App端支持和原生混合编码
9. 插件丰富,DCloud将发布插件到市场
二、创建项目
1、安装HBuilderX
HBuilderX内置相关环境,无需配置nodejs、vue等,三秒钟就可以创建一个项目。
2、创建uni-app
3、运行项目
三、学习框架
1、项目结构介绍
2、开发规范
2.1 uni-app 约定的开发规范
1. 页面文件遵循 Vue 单文件组件规范
2. 组件标签靠近小程序规范
3. 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni
4. 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
5. 为兼容多端运行,建议使用flex布局进行开发
2.2 uni-app 开发的注意事项
html标签
uni-app的tag同小程序的tag,和HTML的tag不一样,比如div要改成view,span要改成text、a要改成navigator。
CSS
推荐使用flex布局模型
单位方面,uni-app 支持的通用 css 单位包括 px、rpx
(早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx 了)
JS
只有H5端可使用浏览器内置对象,比如document、window、localstorage、cookie等,以及jquery等依赖。
项目文件
显示页面必须放到pages目录下,页面所在目录的目录名需要放入相同名称的.vue文件。
静态资源如图片,固定放到static目录下。这是webpack、mpvue的规则
echats图表
H5端流行的echart报表因为涉及大量dom操作,无法跨端使用,而wx-chart在跨端和更新方面都不足,推荐使用uChart组件。如仍然坚持使用原版echart,可在web-view组件中内嵌html来使用。
3、页面样式与布局
(1)尺寸单位
uni-app支持以下css单位:
单位 | 介绍 |
---|---|
px | 屏幕像素 |
upx | uni-app提供根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,屏幕变宽,upx实际显示效果会等比放大 |
vh | 是视窗高度的百分比 |
单位换算 | 设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx |
(2)样式导入
<style>
@import "../../common/color.css";
.colorA {
box-shadow: none;
}
</style>
(3)内联样式
支持 style 和 class来控制样式,但建议不要在style中直接使用,影响渲染速度。
(4)所支持的选择器
(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');
}
(6)条件编译
1、用特殊的代码做标记,不同标记里面的代码可以在不同平台里面执行。
2、支持的文件
.vue .js .css pages.json
各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug
3、语法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。
#ifdef:if defined 仅在某平台存在
#ifndef:if not defined 除了某平台均存在
%PLATFORM%:平台名称
<!-- #ifndef APP-PLUS -->
<text class="app-text">text</text>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<text class="weixin-text">text</text>
<!-- #endif -->