Weex iOS 模块开发&环境搭建

2018-05-07

学习weex的ios开发，虽然weex官方有一些文档，但是变化很大维护的不是很及时，而且不算很细致，对于一个iOS还没探索过的前端同学，多走了很多坑。所以，我把走过的路总结下，希望对后面的同学能起到帮助。

目的

目的是能快速开发调试ios端weexmodule的和component。所以没有现有的App，一切从零开始，一切减法为上。

环境搭建

iOS开发环境和 CocoaPods

搭建iOS开发环境，下载Xcode。这里会要求注册开发者，只要普通免费的苹果账号（无需付费成为开发者）就可以申请iOS证书打包安装到自己手机测试。

此处有坑就是新的Xcode要求mac升级到10.13.4版本。

CocoaPods是用gem命令安装，需要设置ruby软件源。参考CocoaPods安装方法-2018.03.27

新建App

打开Xcode，新建Single View App，输入相关信息，create。

第一次开发的同学可能需要在signing中配置下team信息为自己。这个时候的App就可以运行试试了。

点击运行（三角形图标），发现只是build success的提示，模拟器呢？此一坑，设置下即可解决。

选择Product - Scheme - Edit Scheme：

在Run中配置如下图。

再运行Xcode，模拟器就打开了。

注意，这里可以选择运行的模拟器，如果连上自己的苹果手机，还能在模拟器选择中选择识别的手机型号，从而构建匹配自己手机的APP。

集成Weex

首先要在App中引入Weex SDK，进入App的代码根目录。运行如下命令：

1 2	//初始化生成Podfile pod init

查询WeexSDK，会出现很多条信息，找到WeexSDK的，复制下面的pod 'WeexSDK', '~> 0.18.0'修改Podfile。

1	pod search WeexSDK

修改Podfile：

1	vim Podfile

在# use_frameworks!后添加查询的值pod 'WeexSDK', '~> 0.18.0'，保存退出。

下载WeexSDK依赖：

1	pod install --no-repo-update

现在Weex已经集成到我们的App中了。再用Xcode打开App，可以在Linked Frameworks and Libraries中发现添加了libPods。

1	open iosTest.xcworkspace

开发Module

以前面的App为例，用Xcode打开的工程里找到iosTest文件夹，可以在其中新建我们自定义的module的h和m文件。

iosTest文件夹上右键 - New File，新建h（Header File），取名MyMd5Module - create

修改内容如下：

#import <Foundation/Foundation.h>
#import <WeexSDK/WeexSDK.h>
@interface MyMd5Module : NSObject<WXModuleProtocol>
@end

新建同名的.m文件。内容如下：

#import "MyMd5Module.h"
#import <CommonCrypto/CommonDigest.h>
static NSString *encryptionKey = @"momo(Nd′568GGS%d~~9naei';45vhhafdjkv]32rpks;lg,];:vjo(&**&^)";
@implementation MyMd5Module
WX_EXPORT_METHOD(@selector(toMd5:callback:))
- (NSString *)toMd5:(NSString *)string callback:(WXModuleKeepAliveCallback)callback{
    if (!string) {
        if (callback) {
            callback(@"Error: message should be passed correctly.",NO);
        }
        return nil;
    }
    const char *cStr = [string UTF8String];
    unsigned char digest[CC_MD5_DIGEST_LENGTH];
    
    CC_MD5(cStr, (CC_LONG)strlen(cStr), digest);
    
    NSMutableString *result = [NSMutableString stringWithCapacity:CC_MD5_DIGEST_LENGTH * 2];
    for (int i = 0; i < CC_MD5_DIGEST_LENGTH; i++) {
        [result appendFormat:@"%02X", digest[i]];
    }
    
    NSLog(@"%@", result);
    if (callback) {
        callback(@{@"result":@"success",@"data":result}, NO);
    }
    return nil;
}
@end

踩坑如下：
1、所以Weex注册方法应该设置为-开头，表示是实例方法。+表示是类方法。weex中注册方法都会实例化方法，所以之前用了+，总是在模拟器端看不到效果。
2、weexpack工具官方的一些说明和weex官方页面的说明有区别，暴露module对外方法是在.m文件内定义的。但是module的注册方法是在App的AppDelegate.m中定义的。按照官方说明的代码可以实现。


#import "AppDelegate.h"
#import "WXAppConfiguration.h"
#import "WXSDKEngine.h"
#import "WXLog.h"
#import "MyMd5Module.h"
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    
    //business configuration
    [WXAppConfiguration setAppGroup:@"myApp"];
    [WXAppConfiguration setAppName:@"WeexDemo"];
    [WXAppConfiguration setAppVersion:@"1.0.0"];
    
    //init sdk environment
    [WXSDKEngine initSDKEnvironment];
    
    //register custom module and component，optional
    //[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];
    [WXSDKEngine registerModule:@"mwsMd5" withClass:[MyMd5Module class]];
    
    //[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
    
    //set the log level
    [WXLog setLogLevel: WXLogLevelAll];
    
    return YES;
}
- (void)applicationWillResignActive:(UIApplication *)application {
    // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
    // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
}
- (void)applicationDidEnterBackground:(UIApplication *)application {
    // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
    // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
}
- (void)applicationWillEnterForeground:(UIApplication *)application {
    // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
}
- (void)applicationDidBecomeActive:(UIApplication *)application {
    // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
}
- (void)applicationWillTerminate:(UIApplication *)application {
    // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
}
@end

模拟器调试

我们知道App运行Weex页面其实是打开了一个url。所以我们还需要在App中开发默认打开页面进入我们的bundle.js页面。

App的界面代码在ViewController.m中，代码如下：


#import "ViewController.h"
#import <WeexSDK/WXSDKInstance.h>
@interface ViewController ()
//WXSDKInstance属性
@property (nonatomic, strong) WXSDKInstance *instance;
//URL属性(用于指定加载js的URL,一般声明在接口中,我们为了测试方法写在了类扩展中.)
@property (nonatomic, strong) NSURL *url;
//Weex视图
@property (weak, nonatomic) UIView *weexView;
@end
@implementation ViewController
//重写viewDidLoad
- (void)viewDidLoad
{
    [super viewDidLoad];
    // 创建WXSDKInstance对象
    _instance = [[WXSDKInstance alloc] init];
    // 设置weexInstance所在的控制器
    _instance.viewController = self;
    //设置weexInstance的frame
    _instance.frame = self.view.frame;
    //设置weexInstance用于渲染的`js`的URL路径(后面说明)
    [_instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
    //为了避免循环引用声明一个弱指针的`self`
    __weak typeof(self) weakSelf = self;
    //设置weexInstance创建完毕回调
    _instance.onCreate = ^(UIView *view) {
        weakSelf.weexView = view;
        [weakSelf.weexView removeFromSuperview];
        [weakSelf.view addSubview:weakSelf.weexView];
    };
    // 设置`weexInstance`出错的回调
    _instance.onFailed = ^(NSError *error) {
        //process failure
        NSLog(@"处理失败:%@",error);
    };
    //设置渲染完成的回调
    _instance.renderFinish = ^ (UIView *view) {
        //process renderFinish
        NSLog(@"渲染完成");
    };
}
- (NSURL *)url {
    if (!_url) {
        _url =  [[NSBundle mainBundle] URLForResource:@"examples/native/index"   withExtension:@"js"];
    }
    return _url;
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
- (void)dealloc
{
    //  销毁WXSDKInstance实例
    [self.instance destroyInstance];
}
@end

代码里可以看到，URLForResource我设置为examples/native/index.js。你也可以设置为其他值。vue的工程一般在其他文件夹，也有热更新。所以只要在Xcode中更目录下右键 - Add Files to “xxx”中选择vue的工程目录即可。或者直接把热更新编译后的js引入也行。记得修改这里的路径。

最后点击运行，看到结果了~

目的