功能介绍
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];