uniapp学习心得

什么是uniapp?

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

DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

为什么选择uniapp?

为什么要选择uni-app？
uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

开发者/案例数量更多
数百万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数

跨端完善度更高，真正落地的提高生产力

平台能力不受限
在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。

支持原生代码混写和原生sdk集成。

性能体验优秀
加载新页面速度更快、自动diff更新数据。

App端支持原生渲染，可支撑更流畅的用户体验。

小程序端的性能优于市场其他框架。评测

周边生态丰富
插件市场数千款插件。

支持NPM、支持小程序组件和SDK。

微信生态的各种sdk可直接用于跨平台App。

学习成本低
基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。

开发成本低
不止开发成本，招聘、管理、测试各方面成本都大幅下降。

HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍（即便只开发一个平台）。

功能框架图:
从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

一套代码，运行到多个平台

uni-app实现了一套代码，同时运行到多个平台；如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、web、微信开发者工具、支付宝小程序Studio、百度开发者工具、抖音开发者工具、QQ开发者工具（底部每个终端选项卡，代表1个终端模拟器）：

实际运行效果如下（点击图片可放大）：

快速上手

通过HBuilderX可视化界面

uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装如下工具：

HBuilderX：官方IDE下载地址
HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

创建uni-app

在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）：

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例，还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

开发者也可以使用cli方式创建项目，另见文档。

差别是：HBuilderX创建的项目根目录就是源码，可直接编辑。uni-app的编译器在HBuilderX的插件目录下，跟随HBuilderX升级而一起升级。

如果开发者习惯于node模式的项目，对HBuilderX可视化方式感到困惑，可另行参考文档：## cli创建项目和HBuilderX可视化界面创建项目的区别

#运行uni-app

1. 浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可体验 uni-app 的 web 版。
   

2. 运行App到手机或模拟器：使用电压足够的usb端口连接手机，设置中开启USB调试，手机上允许电脑设备调试手机，进入hello-uniapp项目，点击工具栏的运行 -> 运行App到手机或模拟器，即可在该设备里面体验uni-app。
   
   如手机或模拟器无法识别，请点击常见故障排查指南。

如需运行在苹果手机真机上，注意需使用自定义基座。详见

3. 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。
注意：微信开发者工具需要开启服务端口 在微信工具的设置->安全中。

在支付宝小程序开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 支付宝小程序开发者工具，即可在支付宝小程序开发者工具里面体验uni-app。

在百度、抖音、QQ、快应用（分联盟和华为）、快手、飞书、360、京东等小程序开发工具里运行：内容同上，不再重复。

Tips

如果是第一次使用，需要配置开发工具的相关路径。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。
微信小程序工具需要配置允许权限，不然HBuilder无法调用微信小程序开发工具的命令行
支付宝/百度/抖音/360小程序工具，不支持直接指定项目启动并运行。因此开发工具启动后，请将 HBuilderX 控制台中提示的项目路径，在相应小程序开发者工具中打开。
如果自动启动小程序开发工具失败，请手动启动小程序开发工具并将 HBuilderX 控制台提示的项目路径，打开项目。

运行的快捷键是Ctrl+R。

HBuilderX 还提供了快捷运行菜单，可以按数字快速选择要运行的设备：

如需调试，可参考：uni-app调试

发布uni-app
打包为原生App
在HBuilderX工具栏，点击发行，选择原生app-云端打包，如下图：

出现如下界面，点击打包即可。

云端打包支持安心打包，保护用户隐私，不会上传代码和证书，通过差量包制作方式实现安心打包。详见：https://ask.dcloud.net.cn/article/37979

云打包也支持cli模式，通过HBuilderX的cli方式（不是uni-app的cli），可以调用命令行打包，方便持续集成。详见：https://hx.dcloud.net.cn/cli/pack

虽然安心打包已经满足需求，但如仍然希望自己使用 xcode 或 Android studio 进行离线打包，则在 HBuilderX 发行菜单里找到本地打包菜单，生成离线打包资源，然后参考离线打包文档操作：https://nativesupport.dcloud.net.cn/AppDocs/README。

App打包时，注意如果涉及三方sdk，需进行申请并在manifest.json里配置，否则相关功能无法使用。

iOS App打包需要向Apple申请证书。

#发布为Web网站
在 manifest.json 的可视化界面，进行如下配置（发行在网站根目录可不配置应用基本路径），此时发行网站路径是 www.xxx.com/h5，如：https://hellouniapp.dcloud.net.cn。

在HBuilderX工具栏，点击发行，选择网站-H5手机版，如下图，点击即可生成 H5 的相关资源文件，保存于 unpackage 目录。

注意

history 模式发行需要后台配置支持，详见：history 模式的后端配置
打包后，推荐使用前端网页托管服务，一键上传，自带CDN加速，无需购买虚拟机，无需安装nginx等；
若使用传统服务器部署，建议在服务器端开启 gzip 压缩。参考网上的分享：https://juejin.im/post/5af003286fb9a07aac24611b
#发布为小程序
#发布为微信小程序：
申请微信小程序AppID，参考：微信教程。
在HBuilderX中顶部菜单依次点击 “发行” => “小程序-微信”，输入小程序名称和appid点击发行即可

如果手动发行，则点击发行按钮后，会在项目的目录 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可，详细查看：微信官方教程。

如果在发行界面勾选了自动上传微信平台，则无需再打开微信工具手动操作，将直接上传到微信服务器提交审核。

#发布为百度小程序：
入驻小程序并申请百度小程序AppID，参考：百度小程序教程。
在HBuilderX中顶部菜单依次点击 “发行” => “小程序-百度”，输入小程序名称和appid点击发行即可在 /unpackage/dist/build/mp-baidu 生成百度小程序项目代码。

在百度小程序开发者工具中，导入生成的百度小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，之后在百度小程序的 管理中心 选择创建的应用点击前往发布，选择对应的版本然后提交审核。
#发布为支付宝小程序：
入驻支付宝小程序，参考：支付宝小程序教程。
在HBuilderX中顶部菜单依次点击 “发行” => “小程序-支付宝”，即可在 /unpackage/dist/build/mp-alipay 生成支付宝小程序项目代码。

在支付宝小程序开发者工具中，导入生成的支付宝小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，在 支付宝小程序后台，选择刚提交的版本点击提交审核，详见：支付宝小程序文档。
#发布为抖音小程序：
入驻抖音小程序，参考：抖音小程序教程。
在HBuilderX中顶部菜单依次点击 “发行” => “小程序-抖音”，即可在 /unpackage/dist/build/mp-toutiao 生成抖音小程序项目代码。

在抖音小程序开发者工具中，导入生成的抖音小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，在 抖音小程序后台，选择刚提交的版本点击提交审核，详见：抖音小程序文档。
#发布为360小程序：
入驻360小程序，参考：360小程序教程。
在HBuilderX中顶部菜单依次点击 “发行” => “小程序-360”，即可在 /unpackage/dist/build/mp-360 生成360小程序项目代码。

在360浏览器中，导入生成的360小程序项目
注意

目前仅windows平台支持。360浏览器自身不支持mac平台。
#发布为快应用(webview)：
入驻快应用(webview)，参考：快应用(webview)教程。
在HBuilderX中顶部菜单依次点击 “发行” => “快应用联盟”，即可在 /unpackage/dist/build/quickapp-webview 生成快应用(webview)项目代码。

在快应用联盟工具中，导入生成的快应用联盟项目，测试项目代码运行正常后，点击”构建“打包正式版，在快应用联盟后台上传
#发布为快应用(webview) - 华为：
入驻华为快应用，参考：华为快应用教程。
在HBuilderX中顶部菜单依次点击 “发行” => “快应用-华为”，即可在 /unpackage/dist/build/quickapp-webview 生成华为快应用项目代码。

在华为开发者工具中，导入生成的华为快应用项目，测试项目代码运行正常后，点击”构建“打包正式版，在华为快应用后台上传。
#发布为QQ、快手、飞书、京东小程序：
内容同上，不再重复。

发布的快捷键是Ctrl+u。同样可拉下快速发布菜单并按数字键选择。

总结：

总结UniApp全部如下：

UniApp是一个基于Vue.js的跨平台开发框架，它使用了一套代码，可以同时构建iOS、Android、H5、小程序等多个平台的应用程序。

UniApp具有以下特点：

1. 开发效率高：UniApp使用Vue.js作为开发框架，开发者熟悉Vue.js可以快速上手，并复用大部分代码。
2. 跨平台兼容：UniApp可以构建iOS、Android、H5、小程序等多个平台的应用程序，并且保持一致的用户体验。
3. 高性能：UniApp使用了基于Vue.js的渲染引擎，可以实现高性能的页面渲染和交互效果。
4. 丰富的组件库：UniApp提供了丰富的组件库，开发者可以直接使用这些组件来构建应用程序，减少开发工作量。
5. 强大的扩展能力：UniApp提供了插件系统和扩展API，开发者可以根据需要来扩展UniApp的功能。
6. 良好的生态系统：UniApp拥有庞大的开发者社区和丰富的插件资源，开发者可以获得技术支持和资源分享。

总的来说，UniApp是一款强大的跨平台开发框架，可以帮助开发者快速构建多平台的应用程序，提高开发效率和用户体验。