关于uni-app的学习准备

---

什么是uni-app？

---

是一个使用vue.js开发的跨平台应用的前端框架。一套代码可以运行到多个平台。

---

在uni-app中存在哪些变化呢？

---

- 文件变化：

1，文件类型的变化：
平时的.html文件变成.vue文件
2，文件内容结构的变化：
在 .html的文件里html是一个大节点，里面包含了style，script节点
在.vue的文件里template，style，script都是独立的一级节点（vue单文件组件）

<template>  
    <view>  
    注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。  
    </view>  
</template>  

<script>  
    export default {  

    }  
</script>  

<style>  

</style>  

3，外部文件引用方式变化
以前通过script src , link href引入外部文件
现在需要使用es6语法引入外部文件

-组件/标签的变化：

以前的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

新增：
新增了手机端常用的新组件

1 . scroll-view 可区域滚动视图容器
2 . swiper 可滑动区域视图容器
3 . icon 图标
4 . rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）
5 . progress 进度条
6 . slider 滑块指示器
7 . switch 开关选择器
8 . camera 相机
9 . live-player 直播
10 . map 地图
11 . cover-view 可覆盖原生组件的视图容器 cover-view需要多强调几句，uni-app的非h5端的12 . video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，比如在map上加个遮罩，则需要使用cover-view组件

- JS变化：

1，运行环境变化
运行环境从浏览器变成V8引擎

2，数据绑定模式变化
DOM操作变成了vue 的MVVM模式
（现在前端都趋向于去dom华，改用了mvvm模式，减少了代码行数，渲染性能更好。）
（uni-app使用vue的数据绑定方式解决了js和dom界面交互的问题）

3，api变化
因为uni-app 的API是参考小程序的，所以和浏览器的js 的API大有不同。
比如说：

• alert，confirm改成了uni.showmodel
• ajax改成了uni.request
• cookie，session没有了
• local.storage改成了uni.storage
  基本上都是把wx.xxx改成了uni.xxx

- CSS变化：

标准的css uni-app都是支持的，主要是选择器上有两个变化。

1. 不支持*选择器
2. 元素选择器的body改成了page（微信小程序也是这样的）
3. 单位方面，px无法动态适应不同宽度的屏幕，rem只能用于h5、rpx只能用于微信小程序。为此uni-app新增了 upx ，通吃所有端、所有屏幕宽度的动态单位 upx文档