uni-app介绍

        uni-app（uni，读you ni，是统一的意思） 是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。

背景

        DCloud于2012年开始研发小程序技术，优化webview的功能和性能，推出了HBuilder开发工具，为后续产业化做准备。2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是模式的轻应用，而是能接近原生功能、性能的App，并且即点即用，第一次使用时可以做到边下载边使用。

主要功能

        uni-app实现了一套代码，可以同时运行到多个平台；一套代码，可以同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具（底部8个终端选项卡代表8个终端模拟器）。

uni-app的优点

1. 多端支持。即多端开发，uni-app是一套可以适用多端的开源框架，一套代码可以同时生成ios，Android，H5，微信小程序，支付宝小程序，百度小程序等。
2. 更新迭代快。打开HBuilder X页面，页面的右下角经常会弹出更新提示框提示有更新，有些更新后需要重启页面。
3. 扩张强。可以轻松的把uniapp编译到你想要的端，也可以把其它端的转换成uniapp，例如微信小程序，h5等；如果开发app的时候，前端表现不够，还可以原生嵌套开发。
4. 开发成本、门槛低。不管你是公司还是个人，如果想开发多终端兼容的移动端，那uniapp就很适合，不然就需要以个人的能力要开发多端。
5. 组件丰富。社区还是比较成熟，组件丰富，支持npm方式安装第三方包，兼容mpvue，DCloud有大量的组件，付费的也不贵，还可以发布自己个人开发的组件。

uni-app的缺点

1. 爬坑。uni-app的坑一般都有人解决，当然还有没解决的，就要靠自己慢慢的去琢磨了，如果是官方bug的话，就要提交反馈，等官方修复。
2. 某些组件不成熟。某些官方组件，例如地图组件，直播组件等。
3. nvue有局限。nvue有很多的局限，特别是css，很多都不支持，文字只能是text，只支持class样式等。

注意：

用uniapp写页面列表的时候，一般来说，只要是同一个ui，里面的效果就会差距不大，这个时候可以封装一个list，通用的时候直接调用，例如：

组件 components/list.vue

html

<div class="card" v-for="(data, index) in list" :key="index">
   <span>icon</span>
   <slot name="list" :item="data"></slot>
</div>

js

import { defineComponent, ref } from "vue";
export default defineComponent({
   props: {
     list: Array
   } ,
})

页面 index.vue

html

<table-list :list="listArr">
     <template #list="{ item }">
           <div style='color:red'>{{ item.label }}：{{ item.value }}</div>
     </template>
</table-list>

js

import { defineComponent, ref } from "vue";
import tableList from "@/components/list.vue";
export default defineComponent({
   components: {
        tableList
   },
   setup(){
     return {
       listArr: [
         {label: '姓名', value: '张三'},{label: '年龄', value: '18'}
       ]
     }
   }
})

作者：臭宝
链接：https://zhuanlan.zhihu.com/p/625250890
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。