下载

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

HBuilderX 入门教程

https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/35357

快捷键

  1. command + F 当前文件查询，可以打开「替换区」实现替换
  2. command + Shift + F 当前项目/目录中查询，可以打开「替换区」实现替换
  3. F2 文件或文件夹重命名
  4. F4 打开文件或文件夹所在目录「Finder」
  5. command + D 复制当前行
  6. Option + Shift + ↑或↓ 向上或下移动当前行
  7. Option + 鼠标左键 点击进入
  8. command + Option + ←或→ 前进或后退
  9. 多光标
    1. command+鼠标左键 增加一个光标
    2. command+鼠标右键 取消一个光标或选区
  10. option+鼠标拖选 列选择
  11. 选择编码「右下角选择编码重新打开」、着色高亮「右下角选择其它语言打开」

用途

普通 web 项目

  • 空项目、基本 HTML 项目

  • Vue 项目「普通模式」

  • Vue 项目、element-starter 项目

Wap2App

web 站点打包 App

5+App

  • 支持默认模板、mui 项目模板、mui 登录模板、底部选项卡模板、Hello 5+示例、Hello mui示例

  • 支持将 web 资源文件打包 App

    1. 创建默认模板
    2. 放入 web 资源文件，修改配置
    3. 打包

uniapp

  • 默认模板
  • Hello uni-app
  • uni-ui 项目
  • uViewUI
  • ColorUI

代码块

https://ask.dcloud.net.cn/article/35924

内置

通用

  1. iff ：简单if
  2. ife ： if…else
  3. forr ：for循环结构体
  4. fori ：for循环结构体并包含i
  5. funn：函数
  6. funa：匿名函数
  7. clog：打印日志
  8. clogvar：打印变量命名和值

uniapp

Tag 代码块
  1. uButton
  2. uCheckbox
  3. uGrid：宫格，需引用uni ui
  4. uList：列表，需引用uni ui
  5. uListMedia
  6. uRadio
  7. uSwiper
  8. viewfor：生成一段带有v-for循环结构的视图代码块
  9. vbase：生成一段基本的vue代码结构
JS 代码块
vue js 代码块
  1. vImport：导入文件
  2. ed：export default
  3. vData：输出 data(){return{}}
  4. vMethod：输出 methods:{}
  5. vComponents：输出 components: {}
  6. varcw：输出：”var currentWebview = this.$mp.page.$getAppWebview()”
  7. ifios：iOS的平台判断
  8. ifAndroid：Android的平台判断
  9. ifd ifnd 条件编译
uni Api 代码块
  1. uRequest
  2. uGetLocation
  3. uShowToast
  4. uShowLoading
  5. uHideLoading
  6. uShowModal
  7. uShowActionSheet
  8. uNavigateTo
  9. uNavigateBack
  10. uRedirectTo
  11. uStartPullDownRefresh
  12. uStopPullDownRefresh
  13. uLogin
  14. uShare
  15. uPay

自定义

支持自定义代码块。工具-代码块设置-XXX代码块，左侧为内置代码块，作为参考。右侧为自定义代码块区域

效率配置

  1. 视图-显示迷你地图 编辑区域右侧出现迷你预览，可拖动快速滚动页面内容
  2. 编辑器与项目管理器的同步：将鼠标移到项目管理器区域，右上角会悬浮菜单，「与编辑器同步」-「总是关联」。手动定位：编辑器点右键 - 「在项目管理器中定位」

Android 模拟器调试

通过模拟定位，解决真机真实定位不在指定范围的问题

夜神模拟器参考博客

  1. 下载夜神模拟器 https://www.yeshen.com/
  2. 打开模拟器-手机下拉设置菜单，关于平板电脑，关于版本号，连续双击打开「开发者选项」，打开调试开关
  3. 打开 HBuilderX 和夜神模拟器，修改模拟器端口为 62001 第二个是 62025 后面以此类推 62026，62027…
image-20200605165528193