1 IDE

• 使用 HBuilder 开发，安装插件：
  • eslint-js: js 语法校验
  • prettier: 格式化
• 使用 VSCode 开发
  • 使用 HBuilder X 运行项目
  • 使用 VSCode 打开项目

使用 VSCode 开发 uniapp

2 uniapp 运行

如何把 uniapp 项目运行在安卓手机上（保姆式教程）
华为手机开发者模式
uni-app 项目怎么运行到手机

• 运行到浏览器
  • 点击运行到浏览器，F12 打开控制台，默认为浏览器端的模式
  • 点击显示设备工具栏，即可展示为手机端模式
  • 开发时想要跳转指定页面，可直接修改 http://localhost:xxxx/#/pages/xxx/xxx
• 运行到手机或模拟器
  • 用数据线把手机连到电脑上，选择传输文件
  • 手机打开开发者模式：设置–关于手机–连续点击“版本号” （不同手机可能不同）
  • 确认 Android 手机设置中 USB 调试模式已开启。一般在设置–开发者选项。有的手机在插上数据线后在 push 通知栏里也可以设置。注意不能设置为 u 盘模式，如果是充电模式则必须同时设置充电时允许 usb 调试。
  • 点击运行到安卓 app 基座
  • 手机上提示安装 hbuilder，要联网
  • 要是下载完登录不了，可能是手机上该应用的联网权限没有打开

3 运行环境

uniapp 官网 开发环境和生产环境

// uEnvDev
if (process.env.NODE_ENV === "development") {
  // TODO
}
// uEnvProd
if (process.env.NODE_ENV === "production") {
  // TODO
}
1
2
3
4
5
6
7
8

4 条件编译

uniapp 官网 条件编译

• 条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

• 条件编译是利用注释实现的，在不同语法里注释写法不一样，js 使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用

• 条件编译 APP-PLUS 包含 APP-NVUE 和 APP-VUE，APP-PLUS-NVUE 和 APP-NVUE 没什么区别，为了简写后面出了 APP-NVUE ；

• 使用条件编译请保证编译前和编译后文件的正确性，比如 json 文件中不能有多余的逗号；

• VUE3 需要在项目的 manifest.json 文件根节点配置 "vueVersion" : "3"

• 以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

• #ifdef：if defined 仅在某平台存在

• #ifndef：if not defined 除了某平台均存在

• %PLATFORM%：平台名称

• 支持的文件：.vue .js .css pages.json 以及 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

// #ifdef APP-PLUS
// 需条件编译的代码
// #endif

// 仅出现在 App 平台下的代码

// #ifndef H5
// 需条件编译的代码
// #endif

// 除了 H5 平台，其它平台均存在的代码

// #ifdef H5 || MP-WEIXIN
// 需条件编译的代码
// #endif

// 在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17