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 节点下第一个页面就是首页。

目录CONTENT

Uni-app 和 Vue 的区别