iOS制作Weex组件

在vanke一直负责Weex原生组件开发。现已离职。
公司的策略是前端用Weex开发App,然后一个原生开发组提供组件支持,比如Weex不能实现的相机、地图、推送、滚轮选择器等等...我觉得这也是未来的一种趋势吧,虽然原生的体验才是最好的(不论对开发还是用户)...
接下来记录下iOS制作Weex组件流程(其实跟开发原生组件差不多)

1、git准备
2、创建本地组件静态库
3、上传组件
4、更新组件流程

1、git准备

  • 在公司的git库中创建xxxSpecs索引库(用来保存podspec文件),clone到本地
  • 在公司的git库中创建Weex组件库(比如QRCodeModule),clone到本地
  1. 创建 远程索引库远程私有库

  2. 远程索引库 添加到本地 ++pod repo add 索引库名称 索引库地址++

    1. 这一步骤会在 /Users/[username]/.cocoapods/repos下拉取远程索引库到本地
    2. 这个目录以下称之为 本地索引库

2、创建本地组件静态库

  • 到需要创建的路径下面,执行创建命令
pod lib create 组件名

这里会询问几个问题(答案根据实际情况设置),分别是:

1、平台选择                   iOS
2、开发语言选择               ObjC
3、是不是需要一个demo项目工程   Yes
4、测试框架使用哪一个          None
5、是不是需要做基本的测试       No
6、类前缀是什么                xxx
  • 在Example路径下,再创建一个静态库工程,将.xcodeproj拖入组件工程Example文件夹下(为了边开发边调试的目的)

  • iOS Deployment Target支持最低版本:iOS8.0

  • Bundle Identifier 更改下,方便真机调试(免费开发者账户只能在同一手机上运行3个id的app,并且7天只能创建10个)

  • 更改Podfile:指定workspace,添加源码的target依赖

    #use_frameworks!
    
    platform :ios, '8.0'
    
    workspace 'QRCodeModule.xcworkspace'
    
    target 'QRCodeModule_Example' do
      pod 'QRCodeModule', :path => '../'
    
      target 'QRCodeModule_Tests' do
        inherit! :search_paths
    
        
      end
    end
    
    target 'QRCode' do
      
      project 'QRCode/QRCode.xcodeproj'
      
      pod 'QRCodeModule', :path => '../'
    end
    
  • 修改pod下podspec文件

    #
    # Be sure to run `pod lib lint QRCodeModule.podspec' to ensure this is a
    # valid spec before submitting.
    #
    # Any lines starting with a # are optional, but their use is encouraged
    # To learn more about a Podspec see https://guides.cocoapods.org/syntax/podspec.html
    #
    
    Pod::Spec.new do |s|
      s.name             = 'QRCodeModule'
      s.version          = '0.1.0'
      s.summary          = 'Weex插件,提供二维码扫描和生成二维码功能'
      
      s.description      = <<-DESC
    TODO: Add long description of the pod here.
                           DESC
    
      s.homepage         = 'http://xxx/QRCodeModule'
      s.license          = { :type => 'MIT', :file => 'LICENSE' }
      s.author           = { 'oldSix => 'xxx@xxx.com' }
      s.source           = { :git => 'http://xxx/QRCodeModule.git', :tag => s.version.to_s }
    
      s.ios.deployment_target = '8.0'
    
      s.source_files = 'QRCodeModule/Classes/*.h'
      s.vendored_libraries = 'QRCodeModule/Classes/*.a'
      s.resource_bundles = {
          'QRCodeModule' => ['QRCodeModule/Assets/*.png']
      }
    
      # s.public_header_files = 'Pod/Classes/**/*.h'
      # s.frameworks = 'UIKit', 'MapKit'
      s.dependency 'WeexSDK'
      s.dependency 'WeexPluginLoader'
      s.dependency 'SDWebImage'
    end
    
  • Example文件pod install

  • 选择静态库 -> Edit Scheme—>Run—>Build Configuration:Debug改为Release

原因:执行pod install后,由xcworkspace打开工程,选择模拟器执行build,可能会报错:error: Build input file cannot be found: '/Users/xxx/Library/Developer/Xcode/DerivedData/xxxSDK-eooujpkadmeycechvooxfnkyfdoo/Build/Products/Debug-iphoneos/libPods-xxxSDK.a'

  • 选择静态库 -> Targets -> Build Settings -> Build Active Architecture Only -> Debug改为Yes,Release改为No

  • 创建module文件

  • 配置module遵循weex协议UploaderModule

    #import <WeexSDK/WXModuleProtocol.h>
    
    @interface QRCodeModule : NSObject<WXModuleProtocol>
    
  • 选择组件库,编译

  • 将需要暴露的文件.h和.a文件放入 target -> build phases -> copy files

此步骤可以将选中的文件暴露出去,并在编译时生成include文件夹,里面存放所有暴露出去的文件

  • 再次编译组件库源码

  • 把include文件夹中的.a和.h文件放入Classes文件夹下

  • 工程targets -> xxxx_Example -> General -> Linked Frameworks and Libraries -> + 静态库.a文件

  • Example文件pod install

  • 写Weex测试UI代码(一般是几个按钮调用下EXPORT出来的方法)
    用Weex的Weex Toolkit编译成js文件

    weex compile xxx.vue xxx.js
    
  • 配置AppDelegate

    #import <WeexSDK/WeexSDK.h>
    //#import <QRCodeModule/QRCodeModule.h>
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        [WXSDKEngine initSDKEnvironment];
    
        NSURL *jsUrl = [[NSBundle mainBundle] URLForResource:@"QRCode" withExtension:@"js"];
        WXBaseViewController *rootVC = [[WXBaseViewController alloc] initWithSourceURL:jsUrl];
        
        self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
        self.window.rootViewController = rootVC;
        [self.window makeKeyAndVisible];
        
        //注册组件 已取消此注册方式,用WeexPluginLoader内部注册
        //[WXSDKEngine registerModule:@"QRCode" withClass:[QRCodeModule class]];
        
        return YES;
    }
    
  • 开发代码、暴露接口.........

    WX_EXPORT_METHOD(@selector(name:callback:))
    
    #import <WeexPluginLoader/WeexPluginLoader.h>
      
    //注册module
    WX_PlUGIN_EXPORT_MODULE(QRCode, QRCodeModule)
    
  • 分别选择真机(Generic Device) 和任意模拟器,执行command + B

  • 编译完后,在项目Products文件夹下会生成相应的Framework, 然后通过Show in Finder进行查看。

  • 合并Release-iphonesimulator和Release-iphoneos下组件的framework,得到支持模拟器和真机的framework

lipo -create 真机路径 模拟器路径 -output 真机路径 (lipo -info 文件路径 回车验证是否正确支持 armv7 arm64 i386 x86_64)

  • 替换pod中的.h和.a文件

  • 更改.podspec中version,summary等信息

3、上传组件

  • 测试没问题后把代码放入从git上clone下来的组件库空文件夹中

  • git commit -> git push

  • 然后第4步


4、更新组件流程

总结:
pod lib lint -> git commit -> git push -> git tag -> git push --tag -> pod spec lint -> pod push

  • 更改代码,更改.a库,更改.podspec中version,summary等信息

  • 提交代码 commit -> pull -> push

  • 切到仓库文件夹:/Users/.../.../QRCodeModule

  • 验证本地:

pod lib lint --allow-warnings
  • 打tag(标签)比如0.1.0,然后push tag(标签)

  • 验证远程:

pod spec lint --allow-warnings
  • 都出现绿色的字验证通过后,将索引文件推到本地仓库、远程仓库
pod repo push xxxSpecs --allow-warnings
  • 新项目使用之前要更新指定的索引库,拉新的tag
pod repo update /Users/admin/.cocoapods/repos/xxxSpecs

推荐阅读更多精彩内容