使用Hbuilder新建一个多平台app项目

太过爱你忘了你带给我的痛 2021-12-05 02:41 265阅读 0赞

### 一. 下载Hbuilder ###

*  [https://www.dcloud.io/hbuilderx.html][https_www.dcloud.io_hbuilderx.html] 可以根据自己的需要下载版本

### 二. 生成一个uni-app项目 ###

*  点击 `文件`>`新建`>`项目` 可以打开新建项目窗口  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70]
 *  选择**项目类型**, **项目名称**, **项目文件位置**, **项目基础架构**(这里我直接选择只有登录和一个主页2个选项卡的app),  
    最后点创建就会生成一个基础项目文件

### 项目结构 ###

![在这里插入图片描述][20190717170736547.png]  
main.js >> **入口文件**  
manifest.json >> **配置文件**  
pages.json >> **导航栏配置、pages数组中第一项表示应用启动页**

*  `uni-app中`
    
     *  components >> **放置可复用的组件**
     *  pages >> \*\*存放业务 \*\*
     *  static >> **存放 图片、文件**
     *  App.vue >> \*\* 整个全局事件生命周期的监听\*\*
     *  main.js >> **入口文件**
     *  manifest.json >> \*\* 配置文件\*\*
     *  pages.json >> **导航栏配置、pages数组中第一项表示应用启动页**
     *  App.vue >> **整个全局事件生命周期的监听**

### 三. 运行项目 ###

*  点击菜单栏的 `运行`>`运行到浏览器`;  
    ![在这里插入图片描述][20190717171523794.png]
 *  当上方终端显示如下图就运行成功了, 可以再浏览器打开了, 同时也可以通过hbuilder打开
    
     *  点击右上角的`预览`就可以打开内置浏览器窗口了  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70 1]

### 四. 打包app ###

*  hbuilder可以通过云终端打包 apk
 *  点击 `发行` > `原生app-云打包`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70 2]  
设置好选项后就可以直接点 `打包` 了  
打包成功后 在终端找到文件包的链接, 直接放到浏览器就可以直接下载到 **apk** 文件了

[https_www.dcloud.io_hbuilderx.html]: https://www.dcloud.io/hbuilderx.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70]: /images/20211205/093f5f44edb447878ceed72348652255.png
[20190717170736547.png]: /images/20211205/248c620ed31a46f6b61122f19fb5eeef.png
[20190717171523794.png]: /images/20211205/6a08cefa574f4575b46351d477914ae9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70 1]: /images/20211205/c93b4c31b4a9437aaf40df2b9bc0aeb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70 2]: /images/20211205/487d2393905443238caaebdceabcab83.png