weex笔记(5)weex iPad适配

2018-12-11  本文已影响0人  FateOfKing

公司项目用weex已经完成了iPhone版本,突然接到需求需要iPad版本。
打开xcode直接运行在iPad上,发现奇丑无比,所有控件都被等比放大了。
在公司大佬的指点下,发现了一个神奇的功能。meta.setViewport()官网文档入口
大概意思是会可以用这个方法改变默认的最大宽度750px。
我猜想没改这个属性之前的逻辑应该是这样的

设备当前宽度/750 -> scale
这个scale就是缩放比例,然后所有的控件和字体都会按照这个scale去缩放。

那如果是这样的话我调用修改为iPad的宽度768*2=1536是不是就会一比一了呢。
直接上码

 beforeCreate(){
  const meta = weex.requireModule('meta')
// 配置 viewport 的宽度为 1536px
  meta.setViewport({
    width: 1536
  })
}

我是在我的home.vue里面写的。发现确实OK了。
不过有些小问题。

  1. 有些控件只到750没有撑开
  2. 因为我的多页应用,每个vue都是一个jsbundle,所以需要每个页面都要写上面一段话
第一个问题

第二个问题

WX_EXPORT_METHOD_SYNC(@selector(setViewport:))

- (void)setViewport:(NSDictionary *)viewportArguments
{
    CGFloat viewportWidthFloat;
    id viewportWidth = viewportArguments[@"width"];
    if ([viewportWidth isKindOfClass:[NSString class]]) {
        if ([viewportWidth isEqualToString:@"device-width"]) {
            viewportWidthFloat = [WXUtility portraitScreenSize].width;
        } else if ([viewportWidth isEqualToString:@"device-height"]) {
            viewportWidthFloat = [WXUtility portraitScreenSize].height;
        } else {
            viewportWidthFloat = [WXConvert CGFloat:viewportWidth];
        }
    } else {
        viewportWidthFloat = [WXConvert CGFloat:viewportWidth];
    }
    
    if (viewportWidthFloat > 0) {
        self.weexInstance.viewportWidth = viewportWidthFloat;
    }
}

所以我尝试通过修改我的weex容器:DBWXBaseViewController里面找到render方法找到[_instance renderWithURL:_url options:_param data:nil];在下面写上_instance.viewportWidth = 1536;即可(安卓是同样的道理找到Activity或Fragment修改)

18-12-13更新

更新了新的weexsdk发现WXSDKInstance_private.h引用不到了
稍稍改进一下xcode配置
找到build setting里的Header Search Paths 添加一条"${PODS_ROOT}/Headers/Private" 就OK了

上一篇下一篇

猜你喜欢

热点阅读