The following documents assume that you already have a certain Android development experience.
The keys to intergrating Weex into your Android application are the following five step:
dependencies { ... // weex sdk and fastjson compile 'com.taobao.android:weex_sdk:0.18.0@aar' compile 'com.alibaba:fastjson:1.1.46.android' //support library dependencies compile 'com.android.support:recyclerview-v7:23.1.1' compile 'com.android.support:support-v4:23.1.1' compile 'com.android.support:appcompat-v7:23.1.1' }
<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
public class WXApplication extends Application { @Override public void onCreate() { super.onCreate(); InitConfig config = new InitConfig.Builder().setImgAdapter(new FrescoImageAdapter()).build(); WXSDKEngine.initialize(this,config); } }
Fresco ImageAdapter Picasso ImageAdapter
public class MainActivity extends AppCompatActivity implements IWXRenderListener { WXSDKInstance mWXSDKInstance; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWXSDKInstance = new WXSDKInstance(this); mWXSDKInstance.registerRenderListener(this); /** * bundleUrl source http://dotwe.org/vue/38e202c16bdfefbdb88a8754f975454c */ String pageName = "WXSample"; String bundleUrl = "http://dotwe.org/raw/dist/38e202c16bdfefbdb88a8754f975454c.bundle.wx"; mWXSDKInstance.renderByUrl(pageName, bundleUrl, null, null,WXRenderStrategy.APPEND_ASYNC); } @Override public void onViewCreated(WXSDKInstance instance, View view) { setContentView(view); } @Override public void onRenderSuccess(WXSDKInstance instance, int width, int height) { } @Override public void onRefreshSuccess(WXSDKInstance instance, int width, int height) { } @Override public void onException(WXSDKInstance instance, String errCode, String msg) { } @Override protected void onResume() { super.onResume(); if(mWXSDKInstance!=null){ mWXSDKInstance.onActivityResume(); } } @Override protected void onPause() { super.onPause(); if(mWXSDKInstance!=null){ mWXSDKInstance.onActivityPause(); } } @Override protected void onStop() { super.onStop(); if(mWXSDKInstance!=null){ mWXSDKInstance.onActivityStop(); } } @Override protected void onDestroy() { super.onDestroy(); if(mWXSDKInstance!=null){ mWXSDKInstance.onActivityDestroy(); } } }
Tip: Click QRCode Image in Demo Source Page, your will see compiled bundle js.
Through the CocoaPods or Carthage integrated Weex iOS SDK to your project. First assume that you have finished installing the iOS development environment and CocoaPods(or Carthage).
Import Weex iOS SDK to your existing project, if not, you can create a new project according to the tutorial). Before proceeding, make sure that the Podfile file is under the project file. If not, create one and open with text editor(if Carthage, please ensure the Cartfile
in your project directory). You can choose one of Integration method.
using CocoaPods WeexSDK The latest version on cocoaPods can be obtained here . Add the following to the Podfile file:
source 'git@github.com:CocoaPods/Specs.git' target 'YourTarget' do platform :ios, '7.0' pod 'WeexSDK', '0.17.0' ## latest Weex SDK recommended end
Open the command line, switch to the directory of the Podfile file, and run the pod install command. If there are no errors, it means that the environment has been configured.
using Carthage here you can get the latest version of WeexSDK. Add github "apache/incubator-weex"
to Cartfile
Open the command line, switch to the directory of the Cartfile, and run carthage update
. Add Carthage build framework to your project
In the AppDelegate.m file to do the initialization operation, usually in the didFinishLaunchingWithOptions method as follows to add.
//business configuration [WXAppConfiguration setAppGroup:@"AliApp"]; [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:@"event" withClass:[WXEventModule class]]; //register the implementation of protocol, optional [WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)]; //set the log level [WXLog setLogLevel: WXLogLevelAll];
Weex supports both full page rendering and partial rendering. What you need to do is render Weex's view with the specified URL and add it to its parent container. The parent container is generally a viewController.
#import <WeexSDK/WXSDKInstance.h> - (void)viewDidLoad { [super viewDidLoad]; _instance = [[WXSDKInstance alloc] init]; _instance.viewController = self; _instance.frame = self.view.frame; __weak typeof(self) weakSelf = self; _instance.onCreate = ^(UIView *view) { [weakSelf.weexView removeFromSuperview]; weakSelf.weexView = view; [weakSelf.view addSubview:weakSelf.weexView]; }; _instance.onFailed = ^(NSError *error) { //process failure }; _instance.renderFinish = ^ (UIView *view) { //process renderFinish }; NSURL *url = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"js"]; [_instance renderWithURL:url options:@{@"bundleUrl":[self.url absoluteString]} data:nil]; }
WXSDKInstance is a very important class that provides a basic method and some callbacks, such as renderWithURL, onCreate, onFailed, etc., can be found in WXSDKInstance.h.
In the dealloc phase of the viewController destroyed Weex instance, can play a role in avoiding memory leaks.
- (void)dealloc { [_instance destroyInstance]; }
The Weex SDK can be compiled from the source code. You can try the latest feature in the new feature or bugfix branch.
clone Weex project you can use SSH
git clone git@github.com:apache/incubator-weex.git
or use https
git clone https://github.com/apache/incubator-weex.git
open WeexSDK.xcodeproj in weex/ios/sdk
switch target just below
Build this project or just use the xcode default hot key ⌘ + b
Finally you can find Products
directory in weex/ios/sdk
, WeexSDK.framework
was here
Add js-framework
(which is in the WeexSDK.framework
and renamed to native-bundle-main.js
) to your main bundle
Import the framework you get above and import system framework
add -ObjC
to your project settings,just like this