iPad 适配

# 前言

随着美居中项目项目的不断迭代，项目不仅仅局限于手机端，平板端适配也逐步成为需求，故提供iPad适配规范

# 实现思路

此适配是 template 要兼容两套 css 样式
通过获取weex中的 deviceModel 信息判断是否在iPad环境，以及通过weex的内置 meta 模块设置 viewport 值，为适配iPad提供基础
根据iPad UI设计稿，另写一份iPad 样式覆盖手机端中的样式，达到还原UI设计稿的目标

# 适配步骤

1. 创建mixin文件

// padFit.js
export default {
  data() {
    return {
      isPad: weex.config.env.deviceModel.indexOf('iPad') > -1
    };
  },
  methods: {
    genClass(classStr) {
      const suffix = this.isPad ? '-pad' : '';
      return classStr + suffix;
    }
  },
  created() {
    if (this.isPad) {
      const meta = weex.requireModule('meta');
      // 配置 viewport 的宽度为 1536px（可根据ui稿配置，一般iPad设计稿为768， 这里*2）
      meta.setViewport({
        width: 1536
      });
    }
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2. 业务代码中混入

// page.vue 
<template>
  <div :class="genClass('wrapper')">
    <div :class="[
      'content-common',
      genClass('content-height'), 
      tag === 'topic' && genClass('content-topic'),
    ]"></div>
  </div>
</template>
<script>
import iPadFit from '@/mixins/iPadFit'

export default {
  mixins: [iPadFit],
  created() {
    if(this.isPad) {
      // 针对iPad做业务调整
    }
  }
}
</script>

<style scoped>
/* 为减少重复样式，可多采用通用样式 */
.content-common {
  color: #303133;
}
.content-height {
  font-size: 20px;
}

</style>
// 另起style 专门用于编辑pad样式
<style scoped> 
/* iPad 适配样式 */
.content-height-pad {
  font-size: 26px;
}

</style>
// 也可以新建一个css文件，编写pad样式
<style src="./weex-pad.css"></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 按需适配

有些场景下，并非一个项目中的所有页面都需要适配iPad，需要按需启用iPad适配

// padFit.js

// 获取当前页面
const bundleUrl = weex.config.bundleUrl
const srcFileName = bundleUrl.substring(bundleUrl.lastIndexOf('/') + 1, bundleUrl.lastIndexOf('.js'))

// 需要适配iPad的页面
const padFitPages = ['topic', 'weex']

// 修改isPad的判断
  ...
  computed: {
    isPad() {
      return weex.config.env.deviceModel.indexOf('iPad') > -1 && padFitPages.includes(srcFileName)
    }
  }
  ...
  methods: {
    
    /**
     * 支持多个需要适配的class和无需适配的class
     * @padClass {String | Array} 需要适配的class
     * @customClass {String | Array} 无需适配的class
     */
    genClassMulti(padClass, customClass) {
      let tempPad = []
      if(Array.isArray(padClass)) {
        tempPad = padClass
        if(this.isPad) {
          padClass.forEach(item => {
            tempPad.push(`${item}-pad`)
          })
        }
      } else if(typeof padClass === 'string') {
        tempPad = [padClass]
        if(this.isPad) {
          tempPad.push(`${padClass}-pad`)
        }
      }

      let tempCus = []
      if(Array.isArray(customClass)) {
        tempCus = customClass
      } else if(typeof customClass === 'string') {
        tempCus = [customClass]
      }
      
      return [...tempCus, ...tempPad]
    }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

业务代码中使用

<template>
  <div :class="genClassMulti(['wrapper', type === 'topic' && 'wrapper-topic'], ['wrapper-common', 'wrapper-common'+topicName])"></div>
</template>
...
<style scoped>
.wrapper {
  font-size: 20px;
  line-height: 30px;
  justify-content: center
}
</style>

<style scoped>
.wrapper-pad {
  line-height: 38px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

← weex mock 接入规范一键换肤 →