iOS weex0.30.0版本支持暗黑模式还有ipad适配的文档麻烦提供一下呢

[chennyhuang]

[Txink]

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事件重新更新下节点高度。

[Txink]

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();

[chennyhuang]

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

[Txink]

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

[Mag1cPanda]

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

weex2.0什么时候会出来？