uni-app基础知识了解（marksheng）

我不是女神ヾ 2023-01-20 09:50 13阅读 0赞

> 每日良言：迷途知返，胜过无罪

# uni-app基础知识了解: #

## 介绍 ##

**`uni-app`** 是一个使用 [Vue.js][] 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

**uni，读 `you ni`，是统一的意思。**

很多人以为小程序是微信先推出的，其实，DCloud才是这个行业的开创者。

DCloud于2012年开始研发小程序技术，优化webview的功能和性能，并加入W3C和HTML5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备。

2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是`B/S`模式的轻应用，而是能**接近原生功能、性能的App，并且即点即用**，第一次使用时**可以做到边下载边使用**。

为将该技术发扬光大，DCloud将技术标准捐献给工信部旗下的[HTML5中国产业联盟][HTML5]，并推进各家流量巨头接入该标准，开展小程序业务。

![4eb2b8406b449f065cf89497fb0be19b.png][]

**最大的特色：跨平台**

网络模型的变化、文件类型变化、文件内代码架构的变化、外部文件引用方式变化

**nvue教程**

`uni-app` App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。

虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。

**[纯原生渲染模式][Link 1]**

uni-app在App端，支持vue页面和nvue页面混搭、互相跳转。也支持纯nvue原生渲染。

启用纯原生渲染模式，可以减少App端的包体积、减少使用时的内存占用。因为webview渲染模式的相关模块将被移除。

**[编译模式][Link 2]**

**weex编译模式和uni-app编译模式**

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>什么是 Weex ？</td> 
  </tr> 
  <tr> 
   <td><strong>Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。</strong></td> 
  </tr> 
  <tr> 
   <td>"<em>Weex</em>" 的发音是 /wiːks/, 和 "<em>Weeks</em>" 同音。</td> 
  </tr> 
 </tbody> 
</table>

weex的组件和JS API，与uni-app不同。uni-app与微信小程序相同。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70][]

[weex查看更多][weex]          [uni-app查看更多][uni-app]

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

## 框架 ##

**uni-app框架**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 1][]

**使用前端框架**

Weex 应用需要依赖前端框架来编写，但 Weex 并没有绑定、限制在特定的框架上。目前 [Vue.js][] 和 [Rax][] 是最广泛应用于 Weex 开发的前端框架，也是目前功能最全、最稳定的方案。

![Vue 和 Rax][Vue _ Rax]

*  **Vue.js** 是一个不断进化中的前端框架。
 *  **Rax** 是提供类 React 语法和兼容性的前端框架。

> Vue.js 和 Rax 都已经集成到 Weex 中，并默认提供。

## 组件 ##

**`<text>` 是 Weex 内置的组件，用来将文本按照指定的样式渲染出来.**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 2][]

## API ##

> `uni-app`的js API由标准ECMAScript的js API 和 uni 扩展 API 这两部分组成。
> 
> 标准ecmascript的API非常多，本文档没有必要列全，仅以console、settimeout为例做简要说明。扩展 API 命名与小程序相同。

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 3][] ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 4][]

## **[uniCloud 的价值][uniCloud]** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 5][]

[查看更多][Link 3]

[Vue.js]: https://vuejs.org/
[HTML5]: https://www.html5plus.org/
[4eb2b8406b449f065cf89497fb0be19b.png]: /images/20221021/ce6d7a37595e43ae881a712656c331e3.png
[Link 1]: https://uniapp.dcloud.io/nvue-outline?id=%E7%BA%AF%E5%8E%9F%E7%94%9F%E6%B8%B2%E6%9F%93%E6%A8%A1%E5%BC%8F
[Link 2]: https://uniapp.dcloud.io/nvue-outline?id=%E7%BC%96%E8%AF%91%E6%A8%A1%E5%BC%8F
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70]: /images/20221021/4274d4d168aa4d64ad7a96a954225bd9.png
[weex]: https://weex.apache.org/zh/
[uni-app]: https://uniapp.dcloud.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 1]: /images/20221021/b05c93182d63450b8c1096ab168b1508.png
[Rax]: https://alibaba.github.io/rax/
[Vue _ Rax]: /images/20221021/e2bf234587d54734bab0cdb355864553.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 2]: /images/20221021/9933f5f9893b4a9cb30e67218b8a0718.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 3]: /images/20221021/09c193c850a14e849e767abeb80f1654.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 4]: /images/20221021/94e99c4a32d34c38886246dc31ad7e33.png
[uniCloud]: https://uniapp.dcloud.io/uniCloud/README?id=unicloud-%E7%9A%84%E4%BB%B7%E5%80%BC
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 5]: /images/20221021/d8d7dd155e074333af564f4f493fabe7.png
[Link 3]: https://ke.qq.com/course/3416784?taid=11123338234831568&tuin=4025c735