uni-app入门(二)--条件编译和高效开发技巧

蔚落 2021-11-06 00:54 395阅读 0赞

**目录**

条件编译

跨端兼容

条件编译

API的条件编译

组件的条件编译

样式的条件编译

pages.json的条件编译

static目录的条件编译

整体目录条件编译

HBuilderX 支持

高效开发技巧

使用代码块直接创建组件模板

--------------------

## 条件编译 ##

### 跨端兼容 ###

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

*  大量写 if else，会造成代码执行性能低下和管理混乱。
 *  编译到不同的工程后二次修改，会让后续升级变的很麻烦。

在 C 语言中，通过 \#ifdef、\#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 `uni-app` 参考这个思路，为 `uni-app` 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

### 条件编译 ###

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

**写法：**以 \#ifdef 或 \#ifndef 加** %PLATFORM%** 开头，以 \#endif 结尾。

*  \#ifdef：if defined 仅在某平台存在
 *  \#ifndef：if not defined 除了某平台均存在
 *  **%PLATFORM%**：平台名称

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70][]

**%PLATFORM%****可取值如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1][]

**支持的文件**

*  .vue
 *  .js
 *  .css
 *  pages.json
 *  各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

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

### API的条件编译 ###

// #ifdef  %PLATFORM%
    平台特有的API实现
    // #endif

示例，如下代码仅在 5+App 下出现:

![aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9pbWcvcGxhdGZvcm0tNy5wbmc][]

示例，如下代码不会在 H5 平台上出现：

![aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9pbWcvcGxhdGZvcm0tNi5wbmc][]

除了支持单个平台的条件编译外，还支持**多平台**同时编译，使用 || 来分隔平台名称。

示例，如下代码会在 5+App 和 H5 平台上出现：

![aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9pbWcvcGxhdGZvcm0tNS5wbmc][]

### 组件的条件编译 ###

平台特有的组件

示例，如下广告组件仅会在微信小程序中出现：

![uniapp][]

### 样式的条件编译 ###

/*  #ifdef  %PLATFORM%  */
    平台特有样式
    /*  #endif  */

**注意：** 样式的条件编译，无论是 css 还是 sass/scss/less/stylus 等预编译语言中，必须使用 `/*注释*/` 的写法。

正确写法

![aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9pbWcvcGxhdGZvcm0tMi5wbmc][]

错误写法

![aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9pbWcvcGxhdGZvcm0tMy5wbmc][]

### pages.json的条件编译 ###

下面的页面，只有运行至 5+App 时才会编译进去。

![aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9pbWcvcGxhdGZvcm0tNC5wbmc][]

不同平台下的特有功能，以及小程序平台的分包，都可以通过 pages.json 的条件编译来更好地实现。这样，就不会在其它平台产生多余的资源，进而减小包体积。

json的条件编译，如不同平台的key名称相同，cli项目下开发者自己安装的校验器会报错，需自行关闭这些校验器对json相同key的校验规则。如果使用HBuilderX的校验器，无需在意此问题，HBuilderX的语法校验器为此优化过。

### static目录的条件编译 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2][]

在不同平台，引用的静态资源可能也存在差异，通过 static 的的条件编译可以解决此问题，static 目录下新建不同平台的专有目录（目录名称同 `%PLATFORM%` 值域,但字母均为小写），专有目录下的静态资源只有在特定平台才会编译进去。

如以下目录结构，`a.png` 只有在微信小程序平台才会编译进去，`b.png` 在所有平台都会被编译。

┌─static                
    │  ├─mp-weixin
    │  │  └─a.png     
    │  └─b.png
    ├─main.js        
    ├─App.vue      
    ├─manifest.json 
    └─pages.json

### 整体目录条件编译 ###

如果想把各平台的页面文件更彻底的分开，也可以在uni-app项目根目录创建`platforms`目录，然后在下面进一步创建APP-PLUS、MP-WEIXIN等子目录，存放不同平台的文件。

### HBuilderX 支持 ###

HBuilderX 为 `uni-app` 的条件编译提供了丰富的支持:

**代码块支持**

在 HBuilderX 中开发 `uni-app` 时，通过输入 **ifdef** 可快速生成条件编译的代码片段

![aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy91bmktMDIyNDAyLnBuZw][]

**语法高亮**

在 HBuilderX 中对条件编译的代码注释部分提供了语法高亮，可分辨出写法是否正确，使得代码更加清晰（独立js文件需在编辑器右下角切换javascript es6+编辑器，独立css文件暂不支持高亮，但不高亮不影响使用）

![aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy91bmktMDEyNDAzLnBuZw][]

**正确注释和快速选中**

在 HBuilderX 中，ctrl+alt+/ 即可生成正确注释（js：`// 注释`、css：`/* 注释 */`、vue/nvue模板： ``）。

![aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy91bmkyMDE5MDEyODAxLnBuZw][]

点击 **ifdef** 或 **endif** 可快速选中条件编译部分；点击左侧的折叠图标，可折叠条件编译部分代码。

![aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy91bmktMDEyNTAxLnBuZw][]

## 高效开发技巧 ##

### 使用代码块直接创建组件模板 ###

为提升开发效率，HBuilderX将 `uni-app` 常用代码封装成了以 `u` 开头的代码块，如在 `template` 标签内输入 `ulist` 回车，会自动生成如下代码：

<view class="uni-list">
        <view class="uni-list-cell">
            <view class="uni-list-cell-navigate uni-navigate-right" v-for="(item,index) in list" :key="index">
                {
       {item.value}}
            </view>
        </view>
    </view>

代码块分为Tag代码块、JS代码块，如在 `script` 标签内输入 `uShowToast` 回车，会自动生成如下代码：

uni.showToast({
        title: '',
        mask: false
        duration: 1500
    });

`uni-app`已支持代码块见下方列表。

**Tag代码块**

*  uButton
 *  uCheckbox
 *  uGrid：宫格，需引用uni ui
 *  uList：列表，需引用uni ui
 *  uListMedia
 *  uRadio
 *  uSwiper
 *  ......

几乎各种组件不管是内置组件还是uni ui的组件，均已封装为代码块，在HBuilderX的vue代码template区域中敲u，代码助手会提示所有可见列表。也可在HBuilderX菜单工具-代码块设置-vue代码块的左侧列表查阅所有。

除组件外，其他常用代码块包括：

*  viewfor：生成一段带有v-for循环结构的视图代码块
 *  vbase：生成一段基本的vue代码结构

**JS代码块**

uni api代码块

*  uRequest
 *  uGetLocation
 *  uShowToast
 *  uShowLoading
 *  uHideLoading
 *  uShowModal
 *  uShowActionSheet
 *  uNavigateTo
 *  uNavigateBack
 *  uRedirectTo
 *  uStartPullDownRefresh
 *  uStopPullDownRefresh
 *  uLogin
 *  uShare
 *  uPay
 *  ......

几乎各种常用js api，均已封装为代码块，在HBuilderX的js代码中敲u，代码助手会提示所有可见列表。也可在HBuilderX菜单工具-代码块设置-js代码块的左侧列表查阅所有

vue.js代码块

*  vImport：导入文件
 *  ed：export default
 *  vData：输出 data()\{return\{\}\}
 *  vMethod：输出 methods:\{\}
 *  vComponents：输出 components: \{\}

其他常用js代码块

*  iff：简单if
 *  forr：for循环结构体
 *  fori：for循环结构体并包含i
 *  funn：函数
 *  funa：匿名函数
 *  rt：return true
 *  clog：输出："console.log()"
 *  clogvar：增强的日志输出，可同时把变量的名字打印出来
 *  varcw：输出："var currentWebview = this.$mp.page.$getAppWebview()"
 *  ifios：iOS的平台判断
 *  ifAndroid：Android的平台判断

预置代码块不满足需求的话，可以自定义代码块，教程参考[https://ask.dcloud.net.cn/article/35924][https_ask.dcloud.net.cn_article_35924]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70]: /images/20211104/80e09ae393fb43beaddb5298aaafd35b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1]: /images/20211104/1572e2e72558488391f620d63b1fd3cd.png
[aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9pbWcvcGxhdGZvcm0tNy5wbmc]: /images/20211104/19ced364d833428ea6ae8ccce67655d1.png
[aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9pbWcvcGxhdGZvcm0tNi5wbmc]: /images/20211104/320a7abe5f0a462b97c80dc2a26ff1fa.png
[aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9pbWcvcGxhdGZvcm0tNS5wbmc]: /images/20211104/136f24267a2d4850934fce9b69b66cd4.png
[uniapp]: /images/20211104/ce6d600430994d9fbc107fec92bb2c31.png
[aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9pbWcvcGxhdGZvcm0tMi5wbmc]: /images/20211104/874f517d36ee4609bd111cfef0381ae5.png
[aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9pbWcvcGxhdGZvcm0tMy5wbmc]: /images/20211104/30f860d013a14d119f7faa419b2f4347.png
[aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9pbWcvcGxhdGZvcm0tNC5wbmc]: /images/20211104/c28d95b4987b42dc966191208af73c50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2]: /images/20211104/c00cff42c6304b7fba5606ed4e3a630e.png
[aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy91bmktMDIyNDAyLnBuZw]: /images/20211104/8223623b78ce4ecd98be9a243d21d360.png
[aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy91bmktMDEyNDAzLnBuZw]: /images/20211104/98889c46903f4a0fb7a57ed1006dd44f.png
[aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy91bmkyMDE5MDEyODAxLnBuZw]: /images/20211104/5c56170b776040eea29567bc02af1a3a.png
[aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy91bmktMDEyNTAxLnBuZw]: /images/20211104/7aa9dbb91f0d4c1fb240227830e24c1f.png
[https_ask.dcloud.net.cn_article_35924]: https://ask.dcloud.net.cn/article/35924