Uni-app 和 Vue 的区别
文件类型的变化
以前是.html 文件,现在是.vue 文件
文件内代码结构的变化
以前是一个 html 大节点,里面有 script 和 style 节点
现在 template 是一级节点,用于写 tag 组件,script 和 style 是并列的一级节点,也就是有三个一级节点
template 节点下必须且只能有一个根 view 节点,所有内容都写在这个根 view 节点下
以前
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
现在
<template>
<view>
注意必须有一个view,且只能有一个根view。所有内容写在这个view下面。
</view>
</template>
<script>
export default {
}
</script>
<style>
</style>
外部文件引用方式变化
以前通过 script src、link href 引入外部的 js 和 css
现在是 import 引入外部的 js 模块(不是文件)或 css
以前
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
现在
js 要 require 进来,变成对象
<script>
var util = require('../../../common/util.js'); //require这个js模块
var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>
在 util.js 里,要把之前的 function 封装成对象的方法
function formatTime(time) {
return time;//这里没写逻辑
}
module.exports = {
formatTime: formatTime
}
css 外部文件导入
<style>
@import "./common/uni.css";
.uni-hello-text{
color:#7A7E83;
}
</style>
全局样式,在根目录下的 App.vue 里写入,每个页面都会加载 App.vue 里的样式
另外,vue 支持组件导入,可以更方便的封装一个包含界面、js、样式的库
局部导入组件
<template>
<view>
<uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用组件-->
</view>
</template>
<script>
import uniBadge from "../../../components/uni-badge.vue";//1.导入组件
export default {
data() {
return {
}
},
components: {
uniBadge //2.注册组件
}
}
</script>
全局导入组件
每个页面都可以直接使用,不用引用和注册,在根目录的 main.js 里处理
//main.js
import pageHead from './components/page-head.vue' //导入
Vue.component('page-head', pageHead) //注册。注册后在每个vue的page页面里可以直接使用<page-head></page-head>组件。
组件、标签的变化
以前是 html 标签,现在是小程序组件
具体说来:
- div 改成 view
- span、font 改成 text
- a 改成 navigator
- img 改成 image
- input 还在,但 type 属性改成了 confirmtype
- form、button、checkbox、radio、label、textarea、canvas、video 这些还在。
- select 改成 picker
- iframe 改成 web-view
- ul、li 没有了,都用 view 替代
- audio 不再推荐使用,改成 api 方式,背景音频 api 文档
其实老的 HTML 标签也可以在 uni-app 里使用,uni-app 编译器会在编译时把老标签转为新标签,比如把 div 编译成 view。但不推荐这种用法,调试 H5 端时容易混乱。
除了改动外,新增了一批手机端常用的新组件
- scroll-view 可区域滚动视图容器
- swiper 可滑动区域视图容器
- icon 图标
- rich-text 富文本(不可执行 js,但可渲染各种文字格式和图片)
- progress 进度条
- slider 滑块指示器
- switch 开关选择器
- camera 相机
- live-player 直播
- map 地图
- cover-view 可覆盖原生组件的视图容器
- cover-view 需要多强调几句,uni-app 的非 h5 端的 video、* map、canvas、textarea 是原生组件,层级高于其他组件。如需覆盖原生组件,比如在 map 上加个遮罩,则需要使用 cover-view 组件
除了内置组件,还有很多开源的扩展组件,把常用操作都进行封装,DCloud 建立了插件市场收录这些扩展组件,详见插件市场
js 的变化
标准 js 语法和 api 都支持,比如 if、for、settimeout、indexOf 等。
uni-app 的非 H5 端,不管是 App 还是各种小程序,都不支持 window、navigator、document 等 web 专用对象。
uni-app 使用 vue 的数据绑定方式解决 js 和 dom 界面交互的问题
uni-app 的 API 与小程序保持一致,需要处理这些不同的 API 写法
- 处理 window api
- ajax 改成 uni.request。(插件市场也有适配 uni-app 的 axios、flyio 等封装拦截器)
- cookie、session.storage 没有了,改用 uni.storage 吧;local.storage 也改成 uni.storage。另外插件市场有一个垫片 mp-storage,可使用之前的代码,兼容运行在 uni-app 上,
- alert,confirm 改成 uni.showmodel
- window 的 resize 改为了 uni.onWindowResize
- 处理 navigator api
- geolocation 的定位方式改为 uni.getLocation
- useragent 的设备 api 没有了,改用 uni.getSystemInfo
- 处理 dom api
- 如果使用标准 vue 的数据绑定,是不需要操作 dom 来修改界面内容的。如果没有使用 vue 数据绑定,仍然混写了 jquery 等 dom 操作,需要改为纯数据绑定
- 有时获取 dom 并不是为了修改显示内容,而是为了获取元素的长宽尺寸来做布局。此时 uni-app 提供了同小程序的另一种 API,uni.createSelectorQuery
其他 js api
web 中还有 canvas、video、audio、websocket、webgl、webbluetooth、webnfc,这些在 uni-app 中都有专门的 API。
生命周期
首先我们需要清楚几个概念,应用生命周期,页面生命周期,还有组件生命周期:
应用生命周期是项目启动的过程,主要是在 App.vue 中声明的,包括下面几个:
在 onLanch 中我们可以获取启动参数,包括 scene 等;其他的我们根据需要处理自己的逻辑。
-
1.页面生命周期每个页面单独的生命周期,我们经常会用到 onLoad,可以获取页面参数,当然我们可以自己封装一层页面组件,然后将页面参数绑定到当前页面实例$query,保证了同 vue 一致的开发体验。onReady 代替 vue 的 mounted,此时可以访问页面实例以及视图结构。
-
2.组件生命周期区别于页面生命周期,没有 onShow,onLoad,但是 vue 的生命周期是支持的,created 等。
少量不常用的 vue 语法在非 h5 端仍不支持,data 必须以 return 的方式编写,注意事项详见
注意:如果你使用了一些三方 ui 框架、js 库,其中引用了包括一些使用了 dom、window、navigator 的三方库,都需要更换。去 uni-app 的插件市场寻找替代品。
调用接口请求
uni.request({
url: 'https://www.example.com/request', //仅为示例,并非真实接口地址
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
css 的变化
标准的 css 基本都是支持的。
- 选择器有 2 个变化:*选择器不支持;元素选择器里没有 body,改为了 page。微信小程序即是如此。
- 单位方面,px 无法动态适应不同宽度的屏幕,rem 只能用于 h5。如果想使用根据屏幕宽度自适应的单位,推荐使用 rpx,全端支持。 尺寸单位文档
- uni-app 推荐使用 flex 布局,并默认就是 flex 布局,这个布局思路和传统流式布局有点区别。但 flex 的有趣在于,不管是什么技术都支持这种排版,web、小程序/快应用、weex/rn、原生的 iOS、Android 开发,全都支持 flex。它是通吃所有端的新一代布局方案。
- 不同端的浏览器兼容性仍然存在,避免使用太新的 css 语法,否则发布为 App 时,Android 低端机(Android 4.4、5.x),会有样式错误(HBuilderX 不能提示的 css,就很容易引发浏览器兼容问题)
- 背景图片 和 字体图标
- 支持 base64 格式图片。
*支持网络路径图片。
*使用本地图片或字体图标需注意: 1. 图片小于 40kb,uni-app 会自动将其转化为 base64 格式; 2. 图片大于等于 40kb, 需开发者自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用。 3. 本地引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。
/* 背景图片 */
.bgImg {
background-image: url('~@/static/logo.png');
}
/* 字体图标 */
@iconImg {
font-family: test1-icon;
src: url('~@/static/iconfont.ttf');
}
工程结构和页面管理
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 配置页面路由、导航条、选项卡等页面类信息,详见
每个可显示的页面,都必须在 pages.json 中注册。
uni-app 的首页,是在 pages.json 里配的,page 节点下第一个页面就是首页。
评论区