Weex 如何將前端樣式值轉(zhuǎn)換為系統(tǒng)坐標(biāo)值

以 iOS 為例，在應(yīng)用啟動時，Weex 獲取當(dāng)前屏幕寬度作為全局默認(rèn)值。在 iOS 系統(tǒng)上該寬度為實際像素/屏幕比例后的 UIKit 寬度。比如 iPhone6 為 375。

@implementation WXCoreBridge

+ (void)install
{
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        WeexCore::WXCoreEnvironment* env = WeexCore::WXCoreEnvironment::getInstance();
        env->SetPlatform(OS_iOS);
        env->AddOption("scale", "1");
        
        CGSize screenSize = [UIScreen mainScreen].bounds.size;
        env->SetDeviceWidth(std::to_string(screenSize.width));
        env->SetDeviceHeight(std::to_string(screenSize.height));
        ...
        ...
}

創(chuàng)建的每個 WXSDKInstance，其默認(rèn)的 viewPortWidth 為 750px。

// The default screen width which helps us to calculate the real size or scale in different devices.
static const CGFloat WXDefaultScreenWidth = 750.0;

當(dāng)指定 CSS 樣式值為 "375px" 時，Weex 在接收到該樣式后，自動根據(jù)當(dāng)前屏幕寬度和當(dāng)前 Instance 的 viewPortWidth 計算出在 iOS 系統(tǒng)上，對應(yīng)的 UIKit 坐標(biāo)值為：

dimension(UIKit) = dimensionPx(CSS) / viewPortWidth(instance) * globalScreenWidth

代入后： dimension(UIKit) = 375 / 750 * 375 = 187.5

之后 Weex 排版引擎使用 187.5 來排版，并最終將排版后的結(jié)果設(shè)置給 iOS UIView。之后沒有坐標(biāo)轉(zhuǎn)換過程了。