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 => '[email protected]' }
    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 
  
  @interface QRCodeModule : NSObject
  

• 选择组件库，编译

• 将需要暴露的文件.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 
  //#import 
  
  - (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 
    
  //注册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