⼿把⼿带你快速上⼿uni-app项⽬
uni-app 是⼀个使⽤ Vue.js 开发跨平台应⽤的前端框架，开发者编写⼀套代码，可编译到iOS、Android、H5、⼩程序等多个平台，解决了多个平台，分别需要些多套代码，开发效率低，开发成本⾼的问题。
uni-app⼀套代码，可以编到七个平台，平台如下：android， ios， H5， ⼩程序，⽀付宝⼩程序，百度⼩程序，头条⼩程序。
uni-app在跨端数量、扩展能⼒、性能体验、周边⽣态、学习成本、开发成本等6⼤关键指标上拥有极强的竞争优势。那么，我们该如何运⽤呢？
01、创建uni-app
快速上⼿uni-app的⽅式有两种。
第⼀，可以通过HBuilderX可视化界⾯。
第⼆，可以通过vue-cli命令⾏两种⽅式快速创建项⽬。
在点击⼯具栏⾥的⽂件 -> 新建 -> 项⽬：
选择uni-app类型，输⼊⼯程名，选择模板，点击创建，即可成功创建。
uni-app⾃带的模板有 Hello uni-app ，是官⽅的组件和API⽰例。还有⼀个重要模板是 uni ui项⽬模板，⽇常开发推荐使⽤该模板，已内置⼤量常⽤组件。
02、运⾏uni-app
1. 浏览器运⾏：进⼊hello-uniapp项⽬，点击⼯具栏的运⾏ -> 运⾏到浏览器 -> 选择浏览器，即可在浏览器⾥⾯体验uni-app 的 H5
版。
2. 真机运⾏：连接⼿机，开启USB调试，进⼊hello-uniapp项⽬，点击⼯具栏的运⾏ -> 真机运⾏ -> 选择运⾏的设备，即可在该设备⾥
⾯体验uni-app。
如⼿机⽆法识别，请点击菜单运⾏-运⾏到⼿机或模拟器-真机运⾏常见故障排查指南。注意⽬前开发App也需要安装开发者⼯具。
3. 在开发者⼯具⾥运⾏：进⼊hello-uniapp项⽬，点击⼯具栏的运⾏ -> 运⾏到⼩程序模拟器 -> 开发者⼯具，即可在开发
者⼯具⾥⾯体验uni-app。
注意：如果是第⼀次使⽤，需要先配置⼩程序ide的相关路径，才能运⾏成功。如下图，需在输⼊框输⼊开发者⼯具的安装路径。
若HBuilderX不能正常启动开发者⼯具，需要开发者⼿动启动，然后将uni-app⽣成⼩程序⼯程的路径拷贝到开发者⼯具⾥⾯，在HBuilderX⾥⾯开发，在开发者⼯具⾥⾯就可看到实时的效果。
uni-app默认把项⽬编译到根⽬录的unpackage⽬录。
4. 在⽀付宝⼩程序开发者⼯具⾥运⾏：进⼊hello-uniapp项⽬，点击⼯具栏的运⾏ -> 运⾏到⼩程序模拟器 -> ⽀付宝⼩程序开发者⼯
具，即可在⽀付宝⼩程序开发者⼯具⾥⾯体验uni-app。
5. 在百度开发者⼯具⾥运⾏：进⼊hello-uniapp项⽬，点击⼯具栏的运⾏ -> 运⾏到⼩程序模拟器 -> 百度开发者⼯具，即可在百度开发
者⼯具⾥⾯体验uni-app。
6. 在字节跳动开发者⼯具⾥运⾏：进⼊hello-uniapp项⽬，点击⼯具栏的运⾏ -> 运⾏到⼩程序模拟器 -小程序开发一键生成平台源码
> 字节跳动开发者⼯具，即可在
字节跳动开发者⼯具⾥⾯体验uni-app。
7. 在QQ⼩程序开发⼯具⾥运⾏：内容同上，不再重复。
Tips
如果是第⼀次使⽤，需要配置开发⼯具的相关路径。点击⼯具栏的运⾏ -> 运⾏到⼩程序模拟器 -> 运⾏设置，配置相应⼩程序开发者⼯具的路径。
⽀付宝/百度/字节跳动⼩程序⼯具，不⽀持直接指定项⽬启动并运⾏。因此开发⼯具启动后，请将 HBuilderX 控制台中提⽰的项⽬路径，在相应⼩程序开发者⼯具中打开。
如果⾃动启动⼩程序开发⼯具失败，请⼿动启动⼩程序开发⼯具并将 HBuilderX 控制台提⽰的项⽬路径，打开项⽬。
运⾏的快捷键是Ctrl+r。HBuilderX 还提供了快捷运⾏菜单，可以按数字快速选择要运⾏的设备：
03、发布uni-app
在HBuilderX⼯具栏，点击发⾏，选择原⽣app-云端打包，如下图：
出现如下界⾯，点击打包即可。
4、uni-app调试
1、使⽤ Chrome 调试
进⼊ uni-app 项⽬，点击⼯具栏的运⾏ -> 运⾏到浏览器 -> 选择 Chrome，即可将 uni-app运⾏到 浏览器，可参考 运⾏uni-app，运⾏到浏览器后，就能和普通 web 项⽬⼀样进⾏预览和调试了。
注意：Chrome调试只能保证样式⼀致，部分原⽣能⼒是不⽀持的。点 Chrome 控制台的 Sources 栏，可以给 js 打断点调试。
在 Page 下到 webpack ⾥的⼯程⽬录，可直接到对应的vue页⾯进⾏断点调试；或按 Ctrl+P搜⽂件名，进⼊页⾯调试；也可点击控制台的 log 信息，进⼊对应的页⾯进⾏调试。
2、使⽤web开发者⼯具调试
uni-app 运⾏到web开发者⼯具，可在控制台查看 console 信息，⽹络请求等信息等。
注意：开发App或⼩程序均可使⽤开发者⼯具进⾏调试。
页⾯样式调试和⼀般的web项⽬⼀样，通过调试的箭头选中元素即可查看相应的节点和样式，如下图：
调试 js 时需要切换到 Sources 栏，选中想要调试的那个页⾯的js，进⾏调试（如果js代码是压缩过的，点击右下⾓的{}可格式化代码），如下图：
05、发布为⼩程序
a、发布为⼩程序：
1. 申请⼩程序AppID，参考：教程。
2. 在HBuilderX中顶部菜单依次点击 "发⾏" => "⼩程序-"，输⼊⼩程序名称和appid点击发⾏即可在 unpackage/dist/build/mp-
weixin ⽣成⼩程序项⽬代码。
3. 在⼩程序开发者⼯具中，导⼊⽣成的⼩程序项⽬，测试项⽬代码运⾏正常后，点击“上传”按钮，之后按照 “提交审核”
=> “发布” ⼩程序标准流程，逐步操作即可。
b、发布为百度⼩程序：
1. ⼊驻⼩程序并申请百度⼩程序AppID。
2. 在HBuilderX中顶部菜单依次点击 "发⾏" => "⼩程序-百度"，输⼊⼩程序名称和appid点击发⾏即可在 /unpackage/dist/build/mp-
baidu ⽣成百度⼩程序项⽬代码。
3. 在百度⼩程序开发者⼯具中，导⼊⽣成的百度⼩程序项⽬，测试项⽬代码运⾏正常后，点击“上传”按钮上传代码，之后在百度⼩程
序的 管理中⼼ 选择创建的应⽤点击前往发布，选择对应的版本然后提交审核。
c、发布为⽀付宝⼩程序：
1. ⼊驻⽀付宝⼩程序。
2. 在HBuilderX中顶部菜单依次点击 "发⾏" => "⼩程序-⽀付宝"，即可在 /unpackage/dist/build/mp-alipay ⽣成⽀付宝⼩程序项⽬代码。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。