uni-app微信小程序框架

开发框架

1. 微信原生
2. Vue: uni-app (37.9k)、mpvue （20.4k star）
3. React: taro （32.6k star）
4. WePY：类Vue.js的开发框架，支持部分语法，可以快速地开发小程序应用（22.1k star）

各框架优缺点对比：

• 跨端框架深度评测：微信原生、wepy、mpvue、uni-app、taro、chameleon：https://ask.dcloud.net.cn/article/35867
• 小程序框架全面评测：https://taro-docs.jd.com/blog/2019-03-12-mini-program-framework-full-review#开发工具

uniapp和原生微信对比

结论： uniapp相比原生工程能力强，开发效率更高、组件也比较丰富，性能可以媲美原生。 如果只开发微信小程序，uni-app、taro是比较好的选择，熟悉 vue 可以使用 uni-app，对react熟悉推荐使用 taro 。 如果考虑跨端，所有小程序中uni-app兼容性最好，taro次之。如果跨端到H5侧，uni-app 在跨端兼容更有优势。

开发优势

性能

• 核心问题： 跨端框架基本都是 compiler + runtime 模式，引入的runtime是否会降低运行性能？
• 组件数据更新性能测评排名： 微信原生, uni-app, taro > wepy > mpvue

跨端框架性能如何

• 结论： 在大多数场景下，使用 uni-app 基于 Vue 底层的自动差量数据更新，性能比一般手写的微信原生代码更高。

兼容性和扩展性

• 问题： 若小程序API迭代升级，而 uni-app 框架未及时更新，如何处理？
• 解答： uni-app 不限制底层 API 调用。在小程序端，支持直接编写微信原生代码，包括微信小程序自定义组件、WXS、云开发等复杂用法。功能上与原生开发没有区别。
• 结论： 使用 uni-app 开发，在功能和扩展性上不受限制。

社区生态

• 现状： 小程序生态独立，各平台互不兼容。
• uni-app 生态： 周边生态丰富，插件市场（ext.dcloud.net.cn）有数千个插件，其中很多可跨端使用。
• 缺点： 部分插件质量不高或已停止维护，少数高质量插件不完全开源（如 ThorUI）。

开发技术

工程化

CLI 与 HBuilderX 对比

方面	CLI 工程	HBuilderX 工程
创建方式	通过 vue-cli 创建，结构与 Web 项目一致，含多个配置文件	HBuilderX 创建，结构简单，多 uni_modules 目录
依赖管理	使用 npm 安装和管理依赖	通过 HBuilderX 插件市场导入安装
开发工具	可使用 VSCode 等主流编辑器，配合插件（如 uni-app-snippets）	HBuilderX 官方 IDE，对 uni-app 有一等公民支持，集成度高
发布方式	可脚本化部署（如使用 miniprogram-ci）	HBuilderX 内置“发行”功能，可视化操作
云打包	不支持云原生打包	支持
工程转换	两种工程可互相转换，若依赖库兼容，转换成本不高

总结：

1. Cli 通过 npm 管理依赖，HBuilder 通过插件市场安装。
2. HBuilderX 提供更好的语法提示和补全，Cli 工程可通过 VSCode 插件弥补。
3. 两种方式都支持启动、调试、Eslint 等。
4. Cli 不支持某些 HBuilderX 集成的特定功能（如云打包原生App）。

UI组件库

内置组件

uni-app 框架已内置基础组件（如 <view>），无需导入和注册，直接使用，并做了移动端优化。 文档： https://uniapp.dcloud.net.cn/component/view.html#注意： 开发时需注意组件对目标平台（如微信小程序）的支持情况。

扩展组件库

1. uni-ui

   • DCloud 官方提供的跨端 UI 库，基于 Vue 组件、flex 布局、无 DOM。
   • 文档： https://uniapp.dcloud.net.cn/component/uniui/quickstart.html

2. uView

   • 基于 Vue 2.x 的 uni-app 生态专用 UI 框架，微信小程序兼容性好，是目前质量较高的开源组件库之一。
   • 文档： https://www.uviewui.com/components/swiper.html

3. 自定义组件

   • 位置： 小程序自定义组件需放在 wxcomponents 目录。
   • 性能： 小程序组件的性能通常不如 Vue 组件，因为需手动管理数据更新。
   • 建议： 若无特殊必要，优先使用 Vue 组件（如 uni-ui）替代小程序原生组件。
   • 配置： 在 pages.json 的 globalStyle 中配置 usingComponents。

4. 图标

   • uni-ui 图标： https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html （基于阿里图标库扩展）
   • uView 图标： https://www.uviewui.com/components/icon.html

组件使用建议：

1. 首先使用 uni-app 内置组件。
2. 其次使用 uni-ui 扩展组件。
3. 其他特定需求，从插件市场灵活补充。

网络请求

1. uni.request(OBJECT)

   • 文档： https://uniapp.dcloud.net.cn/api/request/request.html#request
   • 示例：

   uni.request({
     url: 'https://www.example.com/request',
     data: { text: 'uni.request' },
     header: { 'custom-header': 'hello' },
     success: (res) => {
       console.log(res.data);
     }
   });

   • 缺点：
     1. 不支持 Promise，易引发回调地狱。
     2. 不支持请求/响应拦截器，使用不便。

2. uView 的 Http 请求 (luch-request)

   • 基于 Promise 开发的跨平台请求库。
   • 优点： 支持多拦截器，参数处理更强，用法类似 axios。
   • 文档： https://www.uviewui.com/js/http.html

Vue 支持情况

• Vue 版本： uni-app 编译微信小程序 不支持 Vue 3.x。
• TypeScript： 由于生态插件多基于 Vue 2.x，且对 TS 支持有限，不推荐使用。
• 语法兼容： uni-app 是对 Vue 语法支持度最高的跨端框架，但仍存在平台限制。
• 主要差异：
  • 新增： 应用生命周期、页面生命周期。
  • 受限： 部分 Vue 功能支持不完善（如 transition, keep-alive 在小程序端不支持）。

分包

• 限制：
  • 整个小程序所有分包大小不超过 20M。
  • 单个分包/主包大小不能超过 2M。
• uni-app 分包优化：
  • 在对应平台配置下添加 "optimization":{"subPackages":true} 开启。
  • 支持微信、QQ、百度、头条、快手小程序。
  • 优化逻辑：
    1. 静态文件： 分包内的静态资源不会打包到主包。
    2. JS文件： 仅被一个分包引用的 JS 会打入该分包，否则打入主包。
    3. 自定义组件： 仅被一个分包引用时，若未放入分包，编译会提示。
• 参考文档：
  • uni-app: https://uniapp.dcloud.net.cn/collocation/manifest.html#关于分包优化的说明
  • 微信官方：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html

性能优化专题

• uni-app 运行原理和性能优化： https://uniapp.dcloud.net.cn/tutorial/performance.html

设计资源

• uni-ui 设计资源 (Sketch)： https://uniapp.dcloud.net.cn/component/uniui/resource.html
• uView UI 设计资源 (Sketch & Axure)： https://www.uviewui.com/components/resource.html

参考文档

• 微信小程序官方文档： https://developers.weixin.qq.com/miniprogram/dev/framework/
• uni-app 官方文档： https://uniapp.dcloud.net.cn/
• uView 文档： https://www.uviewui.com/
• 跨端框架深度评测： 微信原生、wepy、mpvue、uni-app、taro、chameleon：https://ask.dcloud.net.cn/article/35867
• 小程序框架全面评测： https://taro-docs.jd.com/blog/2019-03-12-mini-program-framework-full-review#开发工具