uni-app的文件变为.vue格式，template、script、style成为一级节点。外部文件引用改用import。组件由HTML标签转为小程序组件，如div->view，a->navigator。js支持标准语法，但不支持window等对象。新增手机端组件如scroll-view、swiper。css支持标准语法，但选择器和单位有变化，推荐使用flex布局。uni-app的生命周期与Vue不同，且需处理不同平台的API差异。
文件类型的变化
以前是.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等；其他的我们根据需要处理自己的逻辑。
- 页面生命周期每个页面单独的生命周期，我们经常会用到onLoad，可以获取页面参数，当然我们可以自己封装一层页面组件，然后将页面参数绑定到当前页面实例$query，保证了同vue一致的开发体验。onReady代替vue的mounted，此时可以访问页面实例以及视图结构。
- 组件生命周期区别于页面生命周期，没有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 格式图片。
*支持网络路径图片。
*使用本地图片或字体图标需注意：- 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
- 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
- 本地引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。
- 支持 base64 格式图片。
/* 背景图片 */
.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节点下第一个页面就是首页。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
