“
译者：杏仁
社会公众号：”大后端之旅“
宏碁云享研究者，InfoQ签下译者，阿里云研究者写手，51CTO网志执行官新体验官，开放源码工程项目GVA核心成员众所周知，著眼于大后端控制技术的撷取，主要包括Flutter,小流程,Android，VUE，JavaScript。
”1.uni-app是什么？
uni-app 是一个采用 Vue.js 合作开发大部份后端应用领域的架构，合作开发人员撰写两套标识符，可正式发布到iOS、Android、Web（积极响应式）、和各式各样小流程（QQ/PayPal/腾讯/头条新闻/陕郡/QQ/快手/钉钉/淘宝网）、快应用领域等数个网络平台。总之uni-appKMH，做啥都巴韦县。即便不跨端，uni-app也是更快的小流程合作开发架构（参见）、更快的App虚拟化架构、更方便快捷的H5合作开发架构。无论党委精心安排怎样的工程项目，你都可以加速交货，不须要切换合作开发观念、不须要更动合作开发生活习惯。
2.uni-app机能架构
一图胜聪悟
3.uni-app建立工程项目的三种形式
uni-app全力支持透过 建模介面、vue-cli配置文件 三种形式加速建立工程项目。
1.建模介面
建模的形式非常简单，HBuilderX内建有关自然环境，照相狸尾豆，无须实用性nodejs。
开始以后，合作开发人员须先离线如下表所示辅助工具：
HBuilderX：非官方IDE浏览门牌号HBuilderX是通用型的后端合作应用领域软件，但为uni-app做了不光加强。
浏览之后解压缩运行exe文件
选择新建工程项目
选择uni-app类型，输入工程项目名，选择模板，点击建立，即可成功建立。
uni-app自带的模板有。Hello uni-app，是非官方的组件和API示例。还有一个重要模板是uni ui工程项目模板，日常合作开发推荐采用该模板，已内建大量常用组件。
2.cli 脚手架
除了HBuilderX建模介面，也可以采用 cli 脚手架，可以透过 vue-cli 建立 uni-app 工程项目。
自然环境安装全局安装vue-cli
npm install -g @vue/cli
建立uni-app使用正式版（对应HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project
采用alpha版（对应HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
采用Vue3/Vite版
建立以 javascript 合作开发的工程（如配置文件建立失败，请直接访问
gitee
浏览模板）
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
建立以 typescript 合作开发的工程（如配置文件建立失败，请直接访问
gitee
浏览模板）
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
此时，会提示选择工程项目模板（采用Vue3/Vite版不会提示，目前只全力支持建立默认模板），初次新体验建议选择 hello uni-app 工程项目模板，如下表所示所示：
选择自定义模板时，须要填写 uni-app 模板门牌号，这个门牌号其实就是托管在云端的仓库地址。以 GitHub 为例，门牌号格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是浏览图片模板。
更多全力支持的浏览形式，请参考这个插件的说明：download-git-repo
运行、正式发布uni-appnpm run dev:%PLATFORM%
npm run build:%PLATFORM%
%PLATFORM% 可取值如下表所示：
值平台app-plusapp网络平台生成打包资源（全力支持npm run build:app-plus，可用于持续集成。不全力支持run，运行调试仍需在HBuilderX中操作）h5H5mp-alipayPayPal小流程mp-baidu腾讯小流程mp-weixinQQ小流程mp-toutiao字节跳动小流程mp-lark陕郡小流程mp-qqqq 小流程mp-360360 小流程mp-kuaishou快手小流程quickapp-webview快应用领域(webview)quickapp-webview-union快应用领域联盟quickapp-webview-huawei快应用领域宏碁可以自定义更多条件编译网络平台，比如钉钉小流程，参考package.json文档。
采用cli建立工程项目和采用HBuilderX建模介面建立工程项目有什么区别编译器的区别cli 建立的工程项目，编译器安装在工程项目下。并且不会跟随HBuilderX升级。如需升级编译器，可以采用 @dcloudio/uvm 管理编译器的版本，如 npx @dcloudio/uvm。HBuilderX建模介面建立的工程项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。已经采用cli建立的工程项目，如果想继续在HBuilderX里采用，可以把工程拖到HBuilderX中。注意如果是把整个工程项目拖入HBuilderX，则编译时走的是工程项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理介面安装无效，那个只作用于HBuilderX建立的工程项目。合作应用领域软件的区别cli建立的工程项目，内建了d.ts，同其他常规npm库一样，可在vscode、webstorm等全力支持d.ts的合作应用领域软件里正常合作开发并有语法提示。采用HBuilderX建立的工程项目不带d.ts，HBuilderX内建了uni-app语法提示库。如需把HBuilderX建立的工程项目在其他编辑器打开并且补充d.ts，可以在工程项目下先执行 npm init，然后npm i @types/uni-app -D，来补充d.ts。但vscode等其他合作应用领域软件，在vue或uni-app领域，合作开发效率比不过HBuilderX。参见：https://ask.dcloud.net.cn/article/35451正式发布App时，仍然须要采用HBuilderX。其他合作应用领域软件无法正式发布App，但可以正式发布H5、各式各样小流程。如需合作开发App，可以先在HBuilderX里运行起来，然后在其他编辑器里修改保存标识符，标识符修改后会自动同步到手机基座。如果采用cli建立工程项目，那浏览HBuilderX时只需浏览10M的标准版即可。因为编译器已经安装到工程项目下了。4.运行uni-app
1.浏览器运行：
进入hello-uniapp工程项目，点击辅助工具栏的运行->运行到浏览器->选择浏览器，即可在浏览器里面新体验uni-app的H5版。
运行成功
2.在QQ合作开发人员辅助工具里运行：
1）注意：如果是第一次采用，须要先实用性小流程ide的有关路径，才能运行成功。如下表所示图，需在输入框输入QQ合作开发人员辅助工具的安装路径
若HBuilderX不能正常启动QQ合作开发人员辅助工具，须要合作开发人员手动启动，然后将uni-app生成小流程工程的路径复制到QQ合作开发人员辅助工具里面，在HBuilderX里面合作开发，在QQ合作开发人员辅助工具里面就可以看到实时的效果。uni-app或将工程项目编译到根目录的unpackage目录。
进入hello-uniapp工程项目，点击辅助工具栏的运行->运行到小流程模拟器->QQ合作开发人员辅助工具，即可在QQ合作开发人员辅助工具里新体验uniapp
image-202201252336203343.运行App到手机或模拟器：
连接手机，开启USB调试，进入hello-uniapp工程项目，点击辅助工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面新体验uni-app。
img4.在PayPal小流程合作开发人员辅助工具里运行：
进入hello-uniapp工程项目，点击辅助工具栏的运行 -> 运行到小流程模拟器 -> PayPal小流程合作开发人员辅助工具，即可在PayPal小流程合作开发人员辅助工具里面新体验uni-app。
img5.在腾讯合作开发人员辅助工具里运行：
进入hello-uniapp工程项目，点击辅助工具栏的运行 -> 运行到小流程模拟器 -> 腾讯合作开发人员辅助工具，即可在腾讯合作开发人员辅助工具里面新体验uni-app。
img6.在字节跳动合作开发人员辅助工具里运行：
进入hello-uniapp工程项目，点击辅助工具栏的运行 -> 运行到小流程模拟器 -> 字节跳动合作开发人员辅助工具，即可在字节跳动合作开发人员辅助工具里面新体验uni-app。
img7.在360合作应用领域软件中导入：
进入hello-uniapp工程项目，点击辅助工具栏的运行 -> 运行到小流程模拟器 -> 360合作应用领域软件，即可在360合作应用领域软件里面新体验uni-app。注意360辅助工具只有windows版
img8.在快应用领域联盟辅助工具里运行：
进入hello-uniapp工程项目，点击辅助工具栏的运行 -> 运行到小流程模拟器 -> 快应用领域联盟辅助工具，即可在快应用领域联盟辅助工具里面新体验uni-app。
img9.在宏碁合作开发人员辅助工具里运行：
进入hello-uniapp工程项目，点击辅助工具栏的运行 -> 运行到小流程模拟器 -> 宏碁合作开发人员辅助工具，即可在宏碁合作开发人员辅助工具里面新体验uni-app。
imgTips
如果是第一次采用，须要实用性合作应用领域软件的有关路径。点击辅助工具栏的运行 -> 运行到小流程模拟器 -> 运行设置，实用性相应小流程合作开发人员辅助工具的路径。PayPal/腾讯/字节跳动/360小流程辅助工具，不全力支持直接指定工程项目启动并运行。因此合作应用领域软件启动后，请将 HBuilderX 控制台中提示的工程项目路径，在相应小流程合作开发人员辅助工具中打开。如果自动启动小流程合作应用领域软件失败，请手动启动小流程合作应用领域软件并将 HBuilderX 控制台提示的工程项目路径，打开工程项目。运行的快捷键是Ctrl+r。
5.手机模拟器
浏览手机模拟器
MUMU模拟器：https://mumu.163.com/
模拟器端口：
image-202201252348202166.目录结构
一个 uni-app 工程，默认包含如下表所示目录及文件：
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录，参见
├─platforms 存放各网络平台专用页面的目录，参见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用领域引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents 存放小流程组件的目录，参见
├─main.js Vue初始化入口文件
├─App.vue 应用领域实用性，用来实用性App全局样式和监听 应用领域生命周期
├─manifest.json 实用性应用领域名称、appid、logo、版本等打包信息，参见
└─pages.json 实用性页面路由、导航条、选项卡等页面类信息，参见
