weex：升级备忘录

现状

• 工具的版本是0.6.4，在终端输入weex --version；输出info 0.6.4
• iOS SDK版本是0.8.0，现在网上的版本是0.10.2。在文件WXDefine.h中可以看到版本号信息。
  incubator-weex
• 业务文件还是.we结尾的，用Python写了些小工具，将编译和上传过程实现了一定程度的自动化
• native层扩展了很多自定义的组件，自定义的模块，比如web、富文本等等
• js层写了很多的工具，比如$pt表示iOS上的点

网络和资源

这部分这次改动还是比较大的，0.8.0版本的无法加载本地图片的问题这个版本改了，不过改的方式出乎意料

• <image>组件仍然只有一个src属性，没有加载本地图片的配置。
• WXNetworkProtocol已经废弃，用WXResourceRequestHandler替代。 __attribute__ ((deprecated("Use WXResourceRequestHandler instead")))
• WXNetworkDefaultImpl被删除
• 增加WebSocket
• 增加WXResourcexxx文件，统一实现网络加载和本地资源加载

typedef enum : NSUInteger {
    WXResourceTypeMainBundle,
    WXResourceTypeServiceBundle,
    WXResourceTypeImage,
    WXResourceTypeFont,
    WXResourceTypeVideo,
    WXResourceTypeLink,
    WXResourceTypeOthers
} WXResourceType;

iOS SDK替换

• 通过官网去GitHub下载最新的源码
  apache/incubator-weex

• SDK直接替换旧版本的，也就是路径下的文件incubator-weex-master/ios/sdk/WeexSDK/

接入文件修改

• 接入文件需要修改两个地方。第1个是0.8.0版本的拼写错误，环境的单词少了一个字母n

//init sdk enviroment
 [WXSDKEngine initSDKEnvironment];  // 0.8.0版本initSDKEnviroment，少了一个字母n，这次改过来了

第2个地方是网络的默认实现。当然，如果网络部分自己实现，不用他提供的，这部分就不需要改。

//网络
[WXSDKEngine registerHandler:[WXResourceRequestHandlerDefaultImpl new] withProtocol:@protocol(WXResourceRequestHandler)];
// 0.8.0版本[WXSDKEngine registerHandler:[WXNetworkDefaultImpl new] withProtocol:@protocol(WXNetworkProtocol)];

旧版本中的修改迁移

有些我们认为是不合理的地方，在旧版本中做了修改，发现新版本还是没有变化。所以将修改迁移过来。

• 删除默认打开淘宝链接，这个不是很合适。
  文件位置incubator-weex-master/ios/sdk/WeexSDK/Sources/Engine/WXSDKEngine.m

+ (void)registerDefaults
{
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        [self _registerDefaultComponents];
        [self _registerDefaultModules];
        [self _registerDefaultHandlers];
    });
    
    // 在我们的应用中默认打开淘宝链接，我们认为是不妥当的，直接删除，什么也不做最干脆
    // [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"taobao://"]];
}

• scrollToComponent方法，当偏移量是负数时，不移动。
  文件位置incubator-weex-master/ios/sdk/WeexSDK/Sources/Component/WXScrollerComponent.m

- (void)scrollToComponent:(WXComponent *)component withOffset:(CGFloat)offset animated:(BOOL)animated
{
    UIScrollView *scrollView = (UIScrollView *)self.view;
    CGPoint contentOffset = scrollView.contentOffset;
    CGFloat scaleFactor = self.weexInstance.pixelScaleFactor;
    
    if (_scrollDirection == WXScrollDirectionHorizontal) {
        CGFloat contentOffetX = [component.supercomponent.view convertPoint:component.view.frame.origin toView:self.view].x;
        contentOffetX += offset * scaleFactor;
        
        if (contentOffetX > scrollView.contentSize.width - scrollView.frame.size.width) {
            contentOffset.x = scrollView.contentSize.width - scrollView.frame.size.width;
        } else {
            contentOffset.x = contentOffetX;
        }
    } else {
        
        
        CGFloat contentOffetY = [component.supercomponent.view convertPoint:component.view.frame.origin toView:self.view].y;
        contentOffetY += offset * scaleFactor;
        
        CGFloat scrollContentOffsetY = scrollView.contentSize.height - scrollView.frame.size.height;
        
        if (scrollContentOffsetY <= 0.0f) {
            return;   //偏移量是负数的时候，不要移动。SDK中没有这部分判断，0.8.0到现在的0.10.0都没有，我们认为这是一个bug，需要修改
        } else if ( contentOffetY > scrollContentOffsetY) {
            contentOffset.y = scrollContentOffsetY;
        } else {
            contentOffset.y = contentOffetY;
        }
    }
    
    [scrollView setContentOffset:contentOffset animated:animated];
}

• Weex定时器在weex页面不可见时，不触发。
  文件位置incubator-weex-master/ios/sdk/WeexSDK/Sources/Module/WXTimerModule.m

- (void)trigger
{
    if (_weexInstance.state == WeexInstanceDisappear ||
        _weexInstance.state == WeexInstanceBackground ||
        _weexInstance.state == WeexInstanceDestroy) {
        return;   // Weex页面不可见，定时器不触发
    }
    [[WXSDKManager bridgeMgr] callBack:_weexInstance.instanceId funcId:_callbackID params:nil keepAlive:_shouldRepeat];
}

其他修改

• 自定义的模块Module和组件component都不需要修改，换了SDK之后绝大部分仍然可以用。（我们一般都是取自定义文件名，复制相关weex文件的实现，然后做自定义的修改）

• Weex的模块Module或者组件component修改了，并且我们碰巧也复制了这个文件进行自定义组件的开发，那么相应的自定义的模块Module或者组件component文件将新的SDK中的内容迁移过来。
  比如WXModalUIModule.m和WXTextInputComponent.m这两个文件，新版本在老版本的基础上有修改，而我们也复制了这两个文件内容，修改一下前缀，自定义了新的内容，比如XXXModalUIModule.m和XXXTextInputComponent.m。这种情况，我们把新SDK中的修改迁移到我们的自定义文件中，SDK本身的文件不动，测试一下功能正常就好了。

环境工具更新

1. 删除旧工具，终端命令如下：

npm uninstall -g weex
npm uninstall -g weex-toolkit

2. 安装新工具，终端命令如下：

npm install -g weex-toolkit
npm install -g weex-builder 
npm install -g weexpack      // (可选)

3. 其他修改看具体的系统配置。比如我们用Python写了几个自动编译上传的小工具，需要做相应的调整。

.we改为.vue介绍

• .we不改，在新的SDK下也是可以用的。我们这次就没有动，先让测试验证新的SDK功能正常。

• 官网上提供了一个工具，可以将.we自动改为.vue
  songsiqi/weex-vue-migration
  我们暂时不准备改老的文件，新的文件可以考虑直接上.vue，所以这个工具暂时没有使用。

• 官网上有两篇参考文章，照着做，将 .we改为.vue应该不是难事。我们的方法是逐步修改，老的.we文件可以长时间存在，逐步过渡到.vue源文件。
  如何将原有 Weex 项目改造成 Vue 版本
  Weex 和 Vue 2.x 的语法差异