uni-app开发流程一（项目搭建）

红太狼 2021-12-18 20:09 729阅读 0赞

[uni-app其实是][uni-app]DCloud推出的众多产品之一，当然我只研究目前能用到的

DCloud的官网：[https://www.dcloud.io/][uni-app]

uni-app的官网：[https://uniapp.dcloud.io/][https_uniapp.dcloud.io]

`uni-app` 是一个使用 [Vue.js][] 开发**跨平台**应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

1.开始阶段：

公司想要将现有的几个前端项目合二为一，又想兼顾h5和小程序（目前），以后可能有app，容我调研一番，简而言之，一套代码，兼容多端，在网上调研发现了个这个比较，非常详细：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70][]

来源地址：[https://juejin.im/post/5c4ec383f265da613e229a67][https_juejin.im_post_5c4ec383f265da613e229a67]，有兴趣可以看一下

经过我在官网和加入官方QQ群之后，感觉还不错，其实vue的多端兼容平台也就那么几个。。。

2.选用uni-app

选用之后，先写demo，看一下难易程度，发现会vue的开发人员能很容易上手，而同时写过小程序的就更容易了，它的api和生命周期是和小程序一模一样的，在自定义组件和编程上遵循vue2.0的规范。

3.项目搭建

（1）下载官方推荐编辑器：[hbuilderx下载地址][hbuilderx]

页面点击右上角下载APP开发版

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70 1][]

在编辑器上直接新建项目，也是非常方便的。

（2）在HBuilderX界面中点击 工具 - 插件安装，依次安装  
NPM,内置浏览器，UniApp编译，js-beautify，js压缩，css压缩，less编译，scss/sass编译，es6编译等等

（3）点击工具 - 设置 - 运行配置，  
设置浏览器运行配置里的Chrome安装路径为本机的真实Chrome安装路径  
如:C:/Users/yeyiqing/AppData/Local/Google/Chrome/Application/chrome.exe  
设置小程序运行配置里的微信开发者安装路径为本机的真实微信开发者安装路径  
如：E:/warespace/微信web开发者工具  
设置node运行配置里的node路径为本机的真实node安装路径  
如：C:/Program Files/nodejs/node.exe

（4）在项目里的manifest.json里找到微信小程序配置，更改小程序AppID

（5）先打开微信开发者工具，点击设置-代理设置,选择不适用任何代理...  
如需运行：  
先在BuilderX里打开pages下的login.vue页面  
选择HBuilderX界面: 运行-运行到浏览器-Chrome  
运行-运行到小程序-微信开发者工具  
如需打包：  
点击；发行 - H5手机版发行 - 发行  
发行 - 小程序微信 - 发行  
信息会打印到下方控制台里...

最后，多看官方文档。。。

[uni-app]: https://www.dcloud.io/
[https_uniapp.dcloud.io]: https://uniapp.dcloud.io/
[Vue.js]: https://vuejs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70]: /images/20211219/5a2e04abd68c430dbdad4ef6af4805d7.png
[https_juejin.im_post_5c4ec383f265da613e229a67]: https://juejin.im/post/5c4ec383f265da613e229a67
[hbuilderx]: https://www.dcloud.io/hbuilderx.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70 1]: /images/20211219/2dde400715ac49fe86040e06ea373bf5.png