如何搭建一个uni-app项目并运行

小灰灰 2023-06-27 11:21 1阅读 0赞

# **前言：** #

因项目需求，需要开发移动端项目，其中包含微信小程序和APP。而前端人员有限，所以需要一个人开发移动端，为了更好的提供用户体验，且有vue和微信小程序开发经验，所以准备上手用uni-app，咨询了小伙伴们，听说上手很快，而之前也只是了解阶段，所以，这次准备用这个项目来试试。

# **前期准备工作：** #

1.下载HBuildX   [HBuildX下载地址][HBuildX]

微信开发者工具   [微信开发者工具下载地址][Link 1]

2.安装IDE，并且IDE的安装不能放在如**Program Files (x86)**中带有特殊符号的目录下

3.安装微信开发者工具，先授权登录，然后打开设置，进入安全设置，开启服务端口。如下图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz_size_16_color_FFFFFF_t_70][]        ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz_size_16_color_FFFFFF_t_70 1][]

# **正式开工，创建uni-app项目：** #

1.打开IDE，点击文件---》新建---》项目---》uni-app---》填写项目名称、存放路径---》默认模板---》创建

2.创建好的项目路径如下图，主要的业务界面放在pages里

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz_size_16_color_FFFFFF_t_70 2][]

manifest.json是用来配置小程序appid，AppSDK等的文件

3.在pages中的index.vue文件中写入如下代码，则可在小程序和app端分别展示不同的数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz_size_16_color_FFFFFF_t_70 3][]

4.点击导航栏的运行，或者ctrl+r打开运行，选择微信开发者工具，运行小程序，下图是运行界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz_size_16_color_FFFFFF_t_70 4][]

点击运行---》运行到手机或模拟器，下图是运行界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz_size_16_color_FFFFFF_t_70 5][]

以上证明代码可以正常执行，并且能个实现小程序和APP展示不同的数据

5.发行

A.打包App，选择发行---》App云打包---》选择DCloud证书(或者选择自有证书，输入相应数据)

B.微信小程序，打开manifest.json文件---》选择微信小程序配置---》输入微信小程序AppID---》点击控制台右上角重新运行按钮---》然后就可以在微信开发者工具上面进行小程序的预览和发布

# **总结** #

大概走了一遍流程，uni-app上手蛮快的，操作起来也比较简单，后续可以写几个demo测试一下，或者选用uni-app的模板直接运行浏览查看

[HBuildX]: https://www.dcloud.io/hbuilderx.html
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200107110321647.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200107110347167.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200107110851161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200107111216547.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200107111459569.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200107112431155.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1OTY3NDgz,size_16,color_FFFFFF,t_70