关于uni-app的学习准备

男娘i 2021-12-17 12:01 218阅读 0赞

--------------------

## 什么是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][wx.xxx_uni.xxx]

***- CSS变化：***

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

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

[wx.xxx_uni.xxx]: https://uniapp.dcloud.io/api/README