Weex适配iPad

一、客户端如何适配

1. 业务使用weex自带的容器

如果业务使用weex自带的容器WXViewController，没有特殊需求场景下无需改动，WXViewController容器会根据屏幕的变化发起weex重新布局，具体代码如下:

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    if ([WXUtility enableAdaptiveLayout]) {
        if (self.parentVC) {
            [self.view setFrame:self.parentVC.view.bounds]; 
            self.instance.frame = [self caculateInstanceFrame]; //给weex重新设置大小
            [self.instance setPageRequiredWidth:self.view.frame.size.width height:self.view.frame.size.height];
            [self.instance reloadLayout]; //重新布局
        }
    }
}

但是有些业务如果有特殊的需求，比如 WXViewController 的容器大小与它的parentVC要求不一样大，那业务可以新增一个 UIViewController 继承自 WXViewController ，然后重写 viewDidLayoutSubviews 方法。

2. 业务使用自己开发的容器

如果业务没有使用WXViewController容器，那业务需要在自己开发容器上重写viewDidLayoutSubviews方法，实现以下逻辑：

• 在创建weexinstance的地方，调用 [self.instance setPageKeepRawCssStyles] 方法

• 重写vc的viewDidLayoutSubviews方法

• 设置weexinstance的大小， instance.frame = 当前容器的大小

• 调用 [self.instance setPageRequiredWidth:self.view.frame.size.width height:self.view.frame.size.height] 方法，weex会根据该方法传入的宽高自动去适配页面

• 调用 [self.instance reloadLayout] 重新布局

二、前端如何适配（仅iOS）

1. 前端使用viewport大小

前端调用weex的dom获取viewport的高度，然后将这个高度作为某个节点的高度，例如给某个scroller组件设置高度，代码如下：

<template>
  <scroller style="backgroundColor:red;" ref='scroll'>
    <div class="row" v-for="row in rows" :key="row.id">
      <text class="text">{{row.name}}</text>
    </div>
  </scroller>
</template>
<script>
const dom = weex.requireModule('dom')
var modal = weex.requireModule('modal')
export default {
data () {
return {
rows: []
}
},
created () {
for (let i = 0; i < 40; i++) {
this.rows.push({id: i, name: 'row ' + i})
}
},
mounted () {
dom.getComponentRect('viewport', option => {
const el = this.$refs.scroll;
dom.updateStyle(el, {height:option.size.height});
})
}
}
</script>

上面这段代码中scroller组件的高度是weex视图的高度，当weex容器大小发生变化后，viewport也会发生变化。所以当容器发生变化的时候前端需要重新获取viewport的高度，然后给scroller设置值。当weex容器大小发生变化的时候，客户端会给前端的root节点发送viewportchange事件，前端需要在获取到 onViewportChange 事件的时候重新去取viewport的大小给scroll组件赋值。

2. 前端之前使用screen.width用来计算高度

有些业务在给节点设置高度的时候，会用到screen.width这个变量，比如：

export default {
    env,
    appName,
    appVersion,
    osVersion: __weex_env__.osVersion,
    platform: isAndroid ? 'Android' : 'iOS',
    windowHeight: Math.ceil(screen.heigth * 750 / screen.width)
};

screen.width这个值是屏幕的宽度，不是当前weex容器的宽度，所以这么计算出来的高度会偏小，导致页面显示异常。
正确使用方式：采用上面提到的 dom.getComponentRect('viewport') 接口获取高度，然后每次收到onViewportChange事件重新更新下节点高度。

Weex适配DarkMode

Demo: http://dotwe.org/vue/37ff0d8d0ed65b676333654d55f7be9f

1. 基本说明

• 节点属性： invertForDarkScheme ，BOOL类型，true表示支持颜色反转
• invertForDarkScheme 属性可被继承，在根节点添加会影响整个页面。如果不希望从根节点开始反转，或从某层View开始取消反转，可以为这些节点单独设置该属性。
• 如果某个样式DarkMode需要单独适配，添加 -weex-dark-scheme 和 -weex-light-scheme 前缀
• 对于图片，Weex的 image 标签新增 darkSchemeSrc 属性，支持针对暗黑模式下指定 URL。

2. 所有支持 invertForDarkScheme 的样式

• background-color

• 任何类型标签

• richtext 的节点标签

• borderColor

• 任何类型标签

• color

• text标签

• richtext 的节点标签

3. 所有支持前缀的样式

• background-color

• background-image

• border-color

• border-top-color

• border-left-color

• border-right-color

• border-bottom-color

• color

• box-shadow

4. DarkMode Module

Weex适配DarkMode提供Module能力判断当前的mode，也可以注册监听回调

const darkModule = weex.requireModule('dark-scheme');
/// 'dark' / 'light'
cosnt mode = darkModule.getCurrentScheme();
darkModule.registerSchemeChangeListener((res)=> {
    /// {"instanceId: "xxx", "scheme":"dark"}
});
darkModule.unregisterSchemeChangeListener();

是否考虑更新一下iOS WeexPlayground App呢,那个App是两年前的版本啦，weex SDK停留在 0.20.0。

WeexPlayground App这个在weex1.0版本下应该是不会更新了，后续weex2.0出来之后playground会同步切换

WeexPlayground App这个在weex1.0版本下应该是不会更新了，后续weex2.0出来之后playground会同步切换

weex2.0什么时候会出来？