【Uni-APP】01 HBuilderX上手

Uni-APP开发需要HBuilderX集成开发工具

https://www.dcloud.io/hbuilderx.html

然后在插件选择上勾选所有：

我这里的情况是发现，内置浏览器和SVN都安装失败，解决办法是结束守护运行的火绒杀毒，马上就能安装成功

 

设置：

 

创建项目：

然后会看到正在下载中

生成的项目结构：

点击运行选择浏览器运行即可：

 

更改预览成为移动端的样子【点击上面的手机和平板图标】：

 

安装微信开发工具：

找到设置所说的地址下载工具并安装：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

保留路径给HBuilder：

C:\Program Files (x86)\Tencent\微信web开发者工具

安装完成：

 

然后我们再次运行项目，这次使用微信开发者工具来运行：

 发现异常错误：

15:40:15.309 [微信小程序开发者工具] - initialize
15:40:15.310 [微信小程序开发者工具]
15:40:15.314 [微信小程序开发者工具] × initialize
15:40:15.318 [微信小程序开发者工具]
15:40:15.321 [微信小程序开发者工具]
15:40:15.340 [微信小程序开发者工具] ? Enable IDE Service (y/N) 
15:40:15.341 [微信小程序开发者工具] Runtime error
15:40:15.347 [微信小程序开发者工具] Error: read EBADF
15:40:15.351 [微信小程序开发者工具]     at Pipe.onStreamRead (internal/stream_base_commons.js:183:27) {
15:40:15.359 [微信小程序开发者工具]   errno: 'EBADF',
15:40:15.359 [微信小程序开发者工具]   code: 'EBADF',
15:40:15.363 [微信小程序开发者工具]   syscall: 'read'
15:40:15.366 [微信小程序开发者工具] }
15:40:15.367 [微信小程序开发者工具]
15:40:15.372 [微信小程序开发者工具]

参考方案：

https://segmentfault.com/a/1190000023191861

把服务端口打开即可：

再次运行：

 

 

目录结构：

UniApp
    │  App.vue // 主应用文件 用于设置整个应用的监听和其他配置 
    │  main.js // 主入口，引入资源
    │  manifest.json
    │  pages.json
    │  uni.scss
    │
    ├─.hbuilderx
    │      launch.json
    │
    ├─pages  // 专门存放页面的目录
    │  └─index // 单独对应某一个功能的页面目录，
    │          index.vue // 该功能的首页，或者是主体页，在页面目录内可以放其他子页面
    │
    ├─static // 静态资源目录 图片音频 视频
    │      logo.png
    │
    └─unpackage // 编译后的文件，一般不涉及
        └─dist
            └─dev
                ├─.automator
                │  └─mp-weixin
                │          .automator.json
                │
                ├─.sourcemap
                │  └─mp-weixin
                │      ├─common
                │      │      main.js.map
                │      │      runtime.js.map
                │      │      vendor.js.map
                │      │
                │      └─pages
                │          └─index
                │                  index.js.map
                │
                └─mp-weixin
                    │  app.js
                    │  app.json
                    │  app.wxss
                    │  project.config.json
                    │  sitemap.json
                    │
                    ├─common
                    │      main.js
                    │      main.wxss
                    │      runtime.js
                    │      vendor.js
                    │
                    ├─pages
                    │  └─index
                    │          index.js
                    │          index.json
                    │          index.wxml
                    │          index.wxss
                    │
                    └─static
                            logo.png

 

 

页面样式和布局：

在UniApp中推荐使用RPX布局，根据屏宽自适应调整像素

NVUE不支持H5单位，但是Vue支持