功能介绍
Chameleon iOS SDK使用Weex、ReactNative与WebView作为基础渲染引擎,提供了基础的组件功能之外,还支持用户扩展自己的功能组件。
集成
环境要求
Chameleon最低支持的iOS deployment target为:iOS 9.0
Chameleon使用Cocoapods进行管理,使用npm管理react_native。
| 组件名 | 依赖版本 | 备注 | 
|---|---|---|
| Cocoapods | 1.3.1 | - | 
| npm | 最新版本即可 | - | 
| WeexSDK | 0.19.0.2 | - | 
| react_native | 0.57.6 | - | 
| react | 16.6.1 | - | 
详细集成
当sdk下载下来后,首先进入/chameleon-sdk-iOS/Chamleon/react_native,并运行npm install进行更新。(这也是react_native的更新办法。)
接下来我们以demo工程为例(要注意工程路径位置,在工程实际配置中需要注意 :path 的内容)。 在Podfile中,写入:
platform :ios, '9.0'
target 'Chameleon_Example' do
    #Chameleon
    pod 'Chameleon', :path => '../Chamleon/'
    #如果需要Weex,则写入weex依赖。
    pod 'WeexSDK', '~> 0.19.0.2'
    #如果需要react_native,则写入react_native依赖。
    pod 'React', :path => '../Chamleon/react_native/node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.45则加入此行
    'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    ]
    pod 'yoga', :path => '../Chamleon/react_native/node_modules/react-native/ReactCommon/yoga'
    pod 'DoubleConversion', :podspec => '../Chamleon/react_native/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
    pod 'glog', :podspec => '../Chamleon/react_native/node_modules/react-native/third-party-podspecs/GLog.podspec'
    pod 'Folly', :podspec => '../Chamleon/react_native/node_modules/react-native/third-party-podspecs/Folly.podspec'
end
将podfile保存,并运行pod install。
常见问题
- Multiple commands produce - Showing All Messages :-1: Multiple commands produce 'XXXXX': 1) Target 'Chameleon_Example' has create directory command with output 'XXXXp' 2) That command depends on command in Target 'Chameleon_Example': script phase “[CP] Copy Pods Resources”
解决办法:删除 工程->Build Phrases->[CP] Copy Pods Resources->Output files下的copy路径。
功能概览
项目目录
| 描述 | 作用 | 
|---|---|
| Chamleon | SDK源码与依赖文件夹 | 
| Example | react_native依赖 | 
Chamleon/sdk_src
| 目录 | 功能描述 | 
|---|---|
| CMLSDKEngine类 | 初始化SDK、注册自定义的module 等功能 | 
| CMLCommon | Chameleon抽象层。抽象了基础的渲染页面、缓存、配置、预加载等功能。 | 
| CMLReactNative | 针对ReactNative额外配置的部分 | 
| CMLWeex | 针对Weex额外配置的部分 | 
| CMLWeb | 针对WebView额外配置的部分 | 
提供功能
Bundle预加载
- 先设置预加载地址 - [CMLEnvironmentManage chameleon].weexService.config.prefetchContents = @[@"http%3A%2F%2F172.22.139.32%3A8000%2Fweex%2Fchameleon-bridge.js%3Ft%3D1546502643623"];- 开始预加载[[CMLEnvironmentManage chameleon].weexService setupPrefetch];
 
- 开始预加载
自动降级
当Bundle下载失败、渲染出现严重错误时,会自动降级至H5。
 降级设计图
降级设计图
本地bundle降级
当H5渲染失败时,倘若设置了默认的本地bundle,会使用本地bundle进行降级。
主动降级
当渲染出现错误时,FE可以通过JSBridge通知客户端触发降级。
功能扩展
使用+ (void)registerModule:(NSString *)moduleName className:(NSString *)className;注册自己的扩展。
使用说明
- 初始化SDK - [CMLSDKEngine initSDKEnvironment];
- 设置渲染引擎类型 - [CMLEnvironmentManage chameleon].serviceType = CMLServiceTypeWeex;
- 设置预加载环境 - [CMLEnvironmentManage chameleon].weexService.config.prefetchContents = @[@"http%3A%2F%2F172.22.139.32%3A8000%2Fweex%2Fchameleon-bridge.js%3Ft%3D1546502643623"];
- 设置预加载 - [[CMLEnvironmentManage chameleon].weexService setupPrefetch];
