http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/9e29c133/content.json ---------------------------------------------------------------------- diff --git a/content.json b/content.json index b4d3dbc..4c8bf70 100644 --- a/content.json +++ b/content.json @@ -1 +1 @@ -{"meta":{"title":"Weex","subtitle":null,"description":"A framework for building Mobile cross-platform UIs. Different from a \"web app\", \"HTML5 app\", or \"hybrid app\", you can use Weex to build a real mobile app. The code that you write is relatively simple, because you can build native applications just using HTML, CSS, Javascript. But underneath, the core of the application is Objective-C or Java. At the same time, Weex will provide a lot of native components or modules for developers to use.","author":"Jinjiang","url":"https://weex.apache.org"},"pages":[{"title":"How to Contribute","path":"guide/contributing.html","permalink":"https://weex.apache.org/guide/contributing.html","text":"How to ContributeWelcome to create pull requests or join in our mailing list for bugfix, doc, example, suggestion and anything. Join in Weex Mailing ListIn Weex community all discussion will happen on mailing list. Just send an email to [email protected] and follow the instruc tions to subscribe Weex dev mailing list. And then you will receive all discussions and community messages by your personal email. In the same time you can freely send your own emails to join in us. At the same time you can see the archives of all the mails through the web: http://mail-archives.apache.org/mod_mbox/incubator-weex-dev/ If you wonât follow the mailing list any more. There is another way to unsubscribe it: send an email to [email protected] and follow the instructions. Besides Weex dev mailing list, we also have some other mailing lists for you. You can check them out here: http://mail-archives.apache.org/mod_mbox/#weex.incubator Branch Managementmaster âdev <--- PR(hotfix/typo/3rd-PR) â PR{domain}-feature-{date} master branch master is the latest (pre-)release branch. dev branch dev is the stable developing branch. Itâs RECOMMENDED to commit hotfix (like typo) or feature PR to dev. {domain}-feature-{date} branch Th e branch for a developing iteration, e.g. android-feature-20160607 is an android developing iteration which is done at 2016.06.07. {domain} consists of android, ios, jsfm and html5. DO NOT commit any PR to such a branch. Branch Name{module}-{action}-{shortName} {module}, see commit log module {action} feature: checkout from {module} and merge to {module} later. If {module} not exists, merge to dev bugfix: like feature, for bugfix only hotfix: checkout from master or release tag, merge to master and {module} later. If {module} not exists, merge to dev for example: android-bugfix-memory jsfm-feature-communication android-hotfix-compute-layout Commit Log{action} [{module}] {description} {action} + add * update or bugfix - remove {module} Including: android, ios, jsfm, html5, component, doc, website, example, test, all {description} Just make it as clear and simple as possible. for example: + [android] close #123, add refreshin g for WebView * [doc] fix #123, update video auto-play property - [example] remove abc Pull RequestYou can create pull requests in GitHub. First we suggest you have some discussion with the community (commonly in our mailing list) before you code. Fork repo from https://github.com/apache/incubator-weex/ Finish the job you want to do. Create a pull request. Code Style GuideObjective-C Tabs for indentation(not spaces) * operator goes with the variable name (e.g. Type *variable;) Function definitions: place each brace on its own line. Other braces: place the open brace on the line preceding the code block; place the close brace on its own line. Use #pragma marks to categorize methods into functional groupings and protocol implementations Follow other guidelines on GitHub Objective-C Style Guide Java & Android Use Google Java Style as basic guidelines of java code. Follow AOSP Code Style for rest of android related code style.","type":"guide"},{"title":"Set Up Development Environmen t","path":"guide/set-up-env.html","permalink":"https://weex.apache.org/guide/set-up-env.html","text":"Set up development environmentUse dotWe is a good choice, But if you want to develop locally on your own machine, you will set up your development environment. You will need Node.js and the Weex CLi. You can installing Node using nvm (Simple bash script to manage multiple active node.js versions). Run the following commands in a Terminal after installing nvm: $ nvm install 6.10.0$ nvm use 6.10.0 Node.js comes with npm, which lets you install the Weex Cli. Run the following command in a Terminal: $ npm install -g weex-toolkit$ weex -vv1.0.3weex-builder : v0.2.4weex-previewer : v1.3.4 NOTE: If you get an error like âpermission errorâ, try installing with sudo. Then you can use the weex command to verify that the installation is successful: Generate a new Weex projectYou can use CLi to generate a Weex project called âawesome-projectâ. Run the following command in a Terminal: $ weex init awesome-project Then we enter the awesome-project folder, the CLi has been for us to generate a standard project structure. UsageWe enter the awesome-project folder and install dependencies with the following commands: npm install Then we run npm run dev and npm run serve to start watch mode and static server. Finally, we can see the Weex page in http://localhost:8080/index.html. You can modify this page in src/foo.vue. The code is shown below: <template> <div class=\"wrapper\"> <text class=\"weex\">Hello Weex !</text> <text class=\"vue\">Hello Vue !</text> </div></template><style scoped> .wrapper { flex-direction: column; justify-content: center; } .weex { font-size: 60px; text-align: center; color: #1B90F7; } .vue { font-size: 60px; text-align: center; margin-top: 30px; color: #41B883; }</style> If youâre curious to learn more about technical details, continue on to the next. And donât forget to write code at dotWe and preview at anytime.","type":"guide"},{"title":"Integrate to Your App","path":"guide/integrate-to-your-app.html","permalink":"https://weex.apache.org/guide/integrate-to-your-app.html","text":"Integrate to Your AppIntegrate to AndroidTipï¼The following documents assume that you already have a certain Android development experience. Android has tow ways to integrate weex1.using source code: Can quickly use the latest features of WEEX, according to your own characteristics of the project. So, you can do some related improvements. 2.using SDK: WEEX will regularly release a stable version at jcenter.jcenter PrerequisitesMake sure the following configuration is complete: JDK version >= 1.7 , and configure the environment variable Android SDK installed and configure the environment variable Android SDK version 23 (compileSdkVersion in build.gradle) SDK build tools version 23.0.1 (buildToolsVersion in build.gradle) Android Support Repository > = 17 (for Android Support Library) Quick to useIf you are the first time to try or have a higher demand for stability, you can use the way to dependence on the SDK.The steps are as follows: Create an Android project. There is nothing to be specified, according to your habits to. Update build.gradle by adding the following 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'compile 'com.alibaba:fastjson:1.1.46.android'compile 'com.taobao.android:weex_sdk:0.5.1@aar' Note: the version can be high can not be low. Start writing codeNote: There is a complete code address in the appendix Implement the picture download interface, set the initialization. package com.weex.sample;import android.widget.ImageView;import com.taobao.weex.adapter.IWXImgLoaderAdapter;import com.taobao.weex.common.WXImageStrategy;import com.taobao.weex.dom.WXImageQuality;/*** Created by lixinke on 16/6/1.*/pu blic class ImageAdapter implements IWXImgLoaderAdapter { @Override public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) { //To implement picture download interface, otherwise the picture can not be displayed. }} initialization package com.weex.sample;import android.app.Application;import com.taobao.weex.InitConfig;import com.taobao.weex.WXSDKEngine;/*** Note: add android:name=\".WXApplication\" into Manifest file* To implement ImageAdapter, otherwise the picture can not be downloaded* Gradle must add some dependencies, otherwise the initialization will fail.* 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'* compile 'com.alibaba:fastjson:1.1.45'*/public class WXApplication extends Application { @Override public void onCreate() { super.onCreate(); InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build(); WXSDKEngine.initialize(this,config); }} Start rendering package com.weex.sample;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import com.taobao.weex.IWXRenderListener;import com.taobao.weex.WXSDKInstance;import com.taobao.weex.common.WXRenderStrategy;import com.taobao.weex.utils.WXFileUtils;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); /** * WXSample can be replaced by any string * Template is js file that .we converted * Option can be empty, or through the option passed js required parameters. Such as the address of the bundle js. * JsonInitData can be empty. * width is -1 , default full screen, yo u can customize it. * height is -1 , default full screen, you can customize it. */ mWXSDKInstance.render(\"WXSample\", WXFileUtils.loadFileContent(\"hello.js\", this), null, null, -1, -1, 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) 3; mWXSDKInstance.onActivityStop(); } } @Override protected void onDestroy() { super.onDestroy(); if(mWXSDKInstance!=null){ mWXSDKInstance.onActivityDestroy(); } }} Dependence on source code (IDE Android Studio)1.Download source code. git clone https://github.com/alibaba/weex.2.Create an android project.3.Import the SDK Module through the following path:File->New-Import Module-> chose WEEX SDK Module(weex/android/sdk) -> Finish4.Add the following dependencies: compile project (â: weex_sdkâ) to build.gradle file.5.Other settings please refer to the above âQuick to useâ. Appendix: WXSample address https://github.com/xkli/WXSample.git Integrated to iOSThrough the cocoaPods integrated Weex iOS SDK to the project.First assume that you have finished installing the iOS development environment and CocoaPods. Step 1: Add DependenciesImport Weex iOS SDK to your existing project, if not, you can create a new project.Before proceeding, make su re that the Podfile file is under the project file. If not, create one and open with text editor. Integration framework WeexSDK The latest version on cocoaPods can be obtained here .Add the following to the Podfile file: source '[email protected]:CocoaPods/Specs.git' target 'YourTarget' do platform :ios, '7.0' pod 'WeexSDK', '0.9.5' ## Suggest using latest Weex SDKend Integrate with source code First copy the ios / sdk directory to your existing project directory (here to copy the root directory of your existing project as an example), and then add the Podfile file. source '[email protected]:CocoaPods/Specs.git' target 'YourTarget' do platform :ios, '7.0' pod 'WeexSDK', :path=>'./sdk/' end Step 2: Install DependenciesOpen 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 configure d. Step 3: Initialize the Weex environmentIn 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 enviroment [WXSDKEngine initSDKEnviroment];//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]; Step 4: Render weex InstanceWeex 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.view addSubview:weakSelf.weexView]; }; _instance.onFailed = ^(NSError *error) { //process failure }; _instance.renderFinish = ^ (UIView *view) { //process renderFinish }; [_instance renderWithURL:self.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. Step 5: Destroy Weex InstanceIn the dealloc phase of the viewController destroyed Weex inst ance, can play a role in avoiding memory leaks. - (void)dealloc{ [_instance destroyInstance];} Import the Weex SDK framework to the project.The Weex SDK can be compiled from the source code. You can try the latest feature in the new feature or bugfix branch.Refer to here for direct import of weexSDK.","type":"guide"},{"title":"Android APIs","path":"references/android-apis.html","permalink":"https://weex.apache.org/references/android-apis.html","text":"Android APIsWXSDKEngine Set up various adapters WXSDKEngine.initialize(this, new InitConfig.Builder().setImgAdapter(new ImageAdapter()).setDebugAdapter(new PlayDebugAdapter()).build()); Register the module and component WXSDKEngine.registerComponent(\"richtext\", RichText.class);WXSDKEngine.registerModule(\"event\", WXEventModule.class); Overloading framework WXSDKEngine.reload(this,framework,false); Adapter IWXImgLoaderAdapter Weex need to implement this interface to download the pictureThe interface is defined as follows: p ublic interface IWXImgLoaderAdapter { void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy);} WXImageQuality that the quality of the picture variables, take the following values LOW, NORMAL, HIGH, ORIGINAL picture quality in turn higher. The default is LOW. WXImageStrategy is an extension class that indicates whether the image can be cut (isClipping) sharpening (isSharpen) placeholder (placeHolder) and so on. IWXHttpAdapter Weex custom WXRequest and OnHttpListener, Native reload interface can be obtained from the Request URL, Header and other parameters, the network request can be completed through OnHttpListener callback notification. Weex provides the default network request: DefaultWXHttpAdapter, using HttpURLConnection for network requests. The interface is defined as follows: public interface IWXHttpAdapter { void sendRequest(WXRequest request, OnHttpListener listener);} WXRequest defines the parameters related to the ne twork request, the request method, the request body, and the timeout time. Weex default timeout is 3000. OnHttpListener defines the corresponding method after the network request ends. Defined as follows: interface OnHttpListener { /** * start request */ void onHttpStart(); /** * headers received */ void onHeadersReceived(int statusCode,Map<String,List<String>> headers); /** * post progress * @param uploadProgress */ void onHttpUploadProgress(int uploadProgress); /** * response loaded length (bytes), full length should read from headers (content-length) * @param loadedLength */ void onHttpResponseProgress(int loadedLength); /** * http response finish * @param response */ void onHttpFinish(WXResponse response); } IWXUserTrackAdapter Weex related performance data (first screen loading time, JS-Native communication time, dom update time, etc.) and other general information (JSLib file size, Weex SDK version number, etc.).Interface definition: public interface IWXU serTrackAdapter { void commit(Context context, String eventId, String type, WXPerformance perf, Map<String, Serializable> params);} Native implementation interface can be obtained through WXPerformance and params corresponding information. Native interacts with JavaScriptCustom eventsUsed for a custom control for event notifications, such as custom click events, response drop events, and so on. WXSDKInstance.java public void fireEvent(String elementRef,final String type, final Map<String, Object> data,final Map<String, Object> domChanges){ }public void fireEvent(String elementRef,final String type, final Map<String, Object> data){ fireEvent(elementRef,type,data,null);}public void fireEvent(String elementRef, String type){ fireEvent(ref,type,new HashMap<String, Object>());} elementRefï¼The event occurred for the control IDã type: Custom events, Weex defaults to a custom event starting with onXxxxx. OnPullDown (d rop-down event) data: Need to reveal the parameters, such as the current control of the size, coordinates and other informationã domChangesï¼Update ref for the controlâs Attribute and Style Event callbackUsed for Module callback, for example, after the completion of positioning Module need to notify JS. Use as follows: public class WXLocation extends WXModule { @JSMethod public void getLocation(JSCallback callback){ //Get the code for the location information ..... Map<String,String> data=new HashMap<>(); data.put(\"x\",\"x\"); data.put(\"y\",\"y\"); //notify once callback.invoke(data); //Continuous connection callback.invokeAndKeepAlive(data); //Invoke method and invokeAndKeepAlive two methods of choice }} OnWXScrollListenerWeex gets the scroll event You can register registerOnWXScrollListener via WXSDKInstanceThe interface is defined as follows: public interface OnWXScrollListener { /** * The view is not currently scrolling. */ int IDLE = RecyclerView.SCROLL_STATE_IDLE; /** * The view is currently being dragged by outside input such as user touch input. */ int DRAGGING = RecyclerView.SCROLL_STATE_DRAGGING; /** * The view is currently animating to a final position while not under * outside control. */ int SETTLING = RecyclerView.SCROLL_STATE_SETTLING; /** * Callback method to be invoked when the view has been scrolled. This will be * called after the scroll has completed. * <p> * This callback will also be called if visible item range changes after a layout * calculation. In that case, dx and dy will be 0. * */ void onScrolled(View view, int x, int y); /** * Callback method to be invoked when view's scroll state changes. * */ void onScrollStateChanged(View view, int x, int y, int newState);} IActivityNavBarSetterWeex provides WXNavigatorModule for navigation control, and the corresponding method can be customized by setting the IActivityNavBarSetter interface. Instructions: WXSDKEngine.setActivityNavBarSett er(new IActivityNavBarSetter(){}); Other IntroductionsetSizeYou can use the mWXSDKInstance.setSize() method to change the size of the Weex container. DowngradeWeex in the development stage will add some new features and new methods, but these new features and functions must be upgraded to achieve the SDK, for the application should not be upgraded how to deal with it? You can use the downgrade feature. Native can be handled by the onException method in interface IWXRenderListener, and if it is an active demoulding errCode is a character that is divided by â|â. â|â The preceding character is 1 for active demotion, and the Native side can jump to the corresponding H5 page. Or otherwise prompted the userâs current environment does not support Weex.","type":"references"},{"title":"Color name","path":"references/color-names.html","permalink":"https://weex.apache.org/references/color-names.html","text":"List of the names of colorsBasic color keywords: Color Name Hex rg b black #000000 silver #C0C0C0 gray #808080 white #FFFFFF maroon #800000 red #FF0000 purple #800080 fuchsia #FF00FF green #008000 lime #00FF00 olive #808000 yellow #FFFF00 navy #000080 blue #0000FF teal #008080 aqua #00FFFF Extended color keywords: Color Name Hex rgb aliceblue #F0F8FF antiquewhite #FAEBD7 aqua #00FFFF aquamarine #7FFFD4 azure #F0FFFF beige #F5F5DC bisque #FFE4C4 black #000000 blanchedalmond #FFEBCD blue #0000FF blueviolet #8A2BE2 brown #A52A2A burlywood #DEB887 cadetblue #5F9EA0 chartreuse #7FFF00 chocolate #D2691E coral #FF7F50 cornflowerblue #6495ED cornsilk #FFF8DC crimson #DC143C cyan #00FFFF darkblue #00008B darkcyan #008B8B darkgoldenrod #B8860B darkgray #A9A9A9 darkgreen #006400 darkgrey #A9A9A9 darkkhaki #BDB76B darkmagenta #8B008B darkolivegreen #556B2F darkorange #FF8C00 darkorchid #9932CC darkred #8B0000 darksalmon #E9967A darkseagreen #8FBC8F darkslateblue #483D8B darkslategray #2F4F4F darkslategrey #2F4F4F darkturquoise #00CED1 darkviolet #9400D3 deeppi nk #FF1493 deepskyblue #00BFFF dimgray #696969 dimgrey #696969 dodgerblue #1E90FF firebrick #B22222 floralwhite #FFFAF0 forestgreen #228B22 fuchsia #FF00FF gainsboro #DCDCDC ghostwhite #F8F8FF gold #FFD700 goldenrod #DAA520 gray #808080 green #008000 greenyellow #ADFF2F grey #808080 honeydew #F0FFF0 hotpink #FF69B4 indianred #CD5C5C indigo #4B0082 ivory #FFFFF0 khaki #F0E68C lavender #E6E6FA lavenderblush #FFF0F5 lawngreen #7CFC00 lemonchiffon #FFFACD lightblue #ADD8E6 lightcoral #F08080 lightcyan #E0FFFF lightgoldenrodyellow #FAFAD2 lightgray #D3D3D3 lightgreen #90EE90 lightgrey #D3D3D3 lightpink #FFB6C1 lightsalmon #FFA07A lightseagreen #20B2AA lightskyblue #87CEFA lightslategray #778899 lightslategrey #778899 lightsteelblue #B0C4DE lightyellow #FFFFE0 lime #00FF00 limegreen #32CD32 linen #FAF0E6 magenta #FF00FF maroon #800000 mediumaquamarine #66CDAA mediumblue #0000CD mediumorchid #BA55D3 mediumpurple #9370DB mediumseagreen #3CB371 mediumslateblue #7B68EE mediumspringgreen #00FA 9A mediumturquoise #48D1CC mediumvioletred #C71585 midnightblue #191970 mintcream #F5FFFA mistyrose #FFE4E1 moccasin #FFE4B5 navajowhite #FFDEAD navy #000080 oldlace #FDF5E6 olive #808000 olivedrab #6B8E23 orange #FFA500 orangered #FF4500 orchid #DA70D6 palegoldenrod #EEE8AA palegreen #98FB98 paleturquoise #AFEEEE palevioletred #DB7093 papayawhip #FFEFD5 peachpuff #FFDAB9 peru #CD853F pink #FFC0CB plum #DDA0DD powderblue #B0E0E6 purple #800080 red #FF0000 rosybrown #BC8F8F royalblue #4169E1 saddlebrown #8B4513 salmon #FA8072 sandybrown #F4A460 seagreen #2E8B57 seashell #FFF5EE sienna #A0522D silver #C0C0C0 skyblue #87CEEB slateblue #6A5ACD slategray #708090 slategrey #708090 snow #FFFAFA springgreen #00FF7F steelblue #4682B4 tan #D2B48C teal #008080 thistle #D8BFD8 tomato #FF6347 turquoise #40E0D0 violet #EE82EE wheat #F5DEB3 white #FFFFFF whitesmoke #F5F5F5 yellow #FFFF00 yellowgreen #9ACD32","type":"references"},{"title":"Common Events","path":"references/common-event.html","perma link":"https://weex.apache.org/references/common-event.html","text":"Common EventsWeex provide the ability to let events trigger action, like starting a JavaScript when a user click on a component. Bellow are the common event attributes that can be added to weex components to define event actions. Click eventThe onclick attribute fires on a click gesture on the element.Notes: The input and switch component does not currently support the click event, please use change or input event instead. event object type : click target : The target component where the event is triggered timestamp : Timestamp when event is triggered Longpress eventIf a longpress event is bound to a component, the event will be triggered when user long press on it.Notes: The input and switch component does not currently support the click event, please use change or input event instead. event object type : longpress target : The target component where the event is triggered timestamp : Timestamp when event is trigg ered Appear eventIf a appear event is bound to a component inside a scrollable container, the event will be triggered when the component comes to be visible. event object type : appear target : The target component where the event is triggered timestamp : Timestamp when event is triggered direction : The direction in which the scroller is scrolling. Could be up or down. Disappear eventIf a disappear event is bound to a component inside a scrollable container, the event will be triggered when the component scrolls out of viewport and disappears from your sight. event object type : disappear target : The target component where the event is triggered timestamp : Timestamp when event is triggered direction : The direction in which the scroller is scrolling. Could be up or down. Page eventWeex provides you with simple management of page status, such as viewappear and viewdisappear.The viewappear event will be triggered when page is about to show or before any animations are configured fo r showing. For example, when calling push method in navigator module, this event will be trigged in new page.The viewdisappear event will be triggeded when page is about to dismiss.Different from appear and disappear of component, these two events focus on the status of whole page, so they must be bound to the root component.In addititon, these events also can be bound to body component which is not root actually such as wxc-navpage. event object type : viewappear or viewdisappear target : The target component where the event is triggered timestamp : Timestamp when event is triggered Example<template> <div> <div class=\"box\" @click=\"onclick\" @longpress=\"onlongpress\" @appear=\"onappear\" @disappear=\"ondisappear\"></div> </div></template><script> const modal = weex.requireModule('modal') export default { methods: { onclick (event) { console.log('onclick:', event) modal.toast({ message: 'onclick', duration: 0.8 }) }, onlongpress (event) { console.log('onlongpress:', event) modal.toast({ message: 'onlongpress', duration: 0.8 }) }, onappear (event) { console.log('onappear:', event) modal.toast({ message: 'onappear', duration: 0.8 }) }, ondisappear (event) { console.log('ondisappear:', event) modal.toast({ message: 'ondisappear', duration: 0.8 }) } } }</script><style scoped> .box { border-width: 2px; border-style: solid; border-color: #BBB; width: 250px; height: 250px; margin-top: 250px; margin-left: 250px; background-color: #EEE; }</style>","type":"references"},{"title":"Common Style","path":"references/common-style.html","permalink":"https://weex.apache.org/references/common-style.html","text":"Common StyleAll of weex tags share some common style rules Box Model Weex box model based on the CSS box model, all of weex elements can be considered as boxes. The term âbox modelâ is used when t alking about design and layout. The box model is essentially a box that wraps around every HTML element. It consists of margins, borders, paddings, and the actual content. you can use the definition below in weex box model. width: length type, default value 0 height: length type, default value 0 padding: length type, default value 0, (space around content, between element content and the element border) padding-left: length type, default value 0 padding-right: length type, default value 0 padding-top: length type, default value 0 padding-bottom: length type, default value 0 margin: length type, default value 0, (space around elements, outside the border) margin-left: length type, default value 0 margin-right: length type, default value 0 margin-top: length type, default value 0 margin-bottom: length type, default value 0 border border-style: values solid | dashed | dotted, default value solid border-left-style: values solid | dashed | dotted, default value solid border-top-style: va lues solid | dashed | dotted, default value solid border-right-style: values solid | dashed | dotted, default value solid border-bottom-style: values solid | dashed | dotted, default value solid border-width: length type, non-negative, default value 0 border-left-width: length type, non-negative, default value 0 border-top-width: length type, non-negative, default value 0 border-right-width: length type, non-negative, default value 0 border-bottom-width: length type, non-negative, default value 0 border-color: color type, default value #000000 border-left-color: color type, default value #000000 border-top-color: color type, default value #000000 border-right-color: color type, default value #000000 border-bottom-color: color type, default value #000000 border-radius: length type, default value 0, (rounded borders to elements , default value is 0 meaning right angle ) border-bottom-left-radius: length type, non-negative, default value 0 border-bottom-right-radius: length type, non-n egative, default value 0 border-top-left-radius: length type, non-negative, default value 0 border-top-right-radius: length type, non-negative, default value 0 NotesWeex box model uses border-box as the default value of box-sizing, meaning the width and height properties includes content, padding and border, but not the margin. The rule of border-radius for a specific corner such as border-top-left-radius is not currently supported for component <image>in iOS. This only happens to iOS, it works fine on Android. Although overflow:hidden is default on android, a view will not clip its children according to border-radius unless all the following condtions met. This only happens on Android, it works fine on iOS. The view type is div, a, cell, refresh or loading. OS version is Android 4.3 or higher. OS version is not Andorid 7.0 A view does not have background-image property nor OS version is Android 5.0 or higher. Example<template> <div> <image src=\"...\" style=\"w idth: 400; height: 200; margin-left: 20;\"></image> </div></template> FlexboxWeex box style model based on the CSS flexbox, ensures that elements behave predictably and the page layout can accommodates to different screen sizes and different display devices. Flexbox consists of flex containers and flex items. If a weex element can containing other elements, it is a flex container. Notice that the old version of flexbox specification has differences with the new ones, such as whether or not to support wrapping. This is described at w3câs working drafts, and you should notice the differences among them. Also notice that the old version is only supported below the 4.4 version of android. Flex containerFlexbox is the default and only style model in Weex, so you donât have to add display: flex; in a container. flex-direction: values row | column, default value column The flex-direction property specifies the direction of the flexible items inside the flex contain er. Default value is column (top-to-bottom). justify-content: values flex-start | flex-end | center | space-between, default value flex-start The justify-content property horizontally aligns the flexible containerâs items when the items do not use all available space on the main-axis. Default value is flex-start meaning the flex items are positioned at the beginning of the container. flex-end means the items are positioned at the end of the container. center means the items are positioned at the center of the container. space-between means the items are positioned with space between the lines. align-items: values stretch | flex-start | center | flex-end, default value stretch The align-items property vertically aligns the flexible containerâs items when the items do not use all available space on the cross-axis. Default value is stretch meaning the items are stretched to fit the container. flex-start means the items are positioned at the top of the container; flex-end means the items are positioned at the bottom of the container; center means items are positioned at the center of the container (vertically). Flex item flex: number type, default value 0 the flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container. If all of the flex items set flex: 1, they will have equal width or height on direction of flex containerâs flex-direction. If there are two flex items, with one setting flex: 1, and the other setting flex: 2, the first one will take 1/3 container space, and the second one will take 2/3 container space. If all of flex items donât set flex, they will be aligned depending on the containerâs justify-content property. Examplesa list of images with equal scales align at the vertical axis: <template> <div style=\"width: 300; height: 100;\"> <image src=\"...\" style=\"flex: 1;\"></image> <image src=\"...\" style=\"flex: 1;\"></image> <image src=\"...\ " style=\"flex: 1;\"></image> </div></template> a image with fixed width aligns with a stretched text: <template> <div style=\"width: 300; height: 100;\"> <image src=\"...\" style=\"width: 100; height: 100;\"></image> <text style=\"flex: 1;\">...</text> </div></template> mixed direction alignment: <template> <div style=\"width: 100;\"> <image src=\"...\" style=\"width: 100; height: 100;\"></image> <div style=\"flex-direction: row;\"> <text style=\"flex: 2; font-size: 32;\">title</text> <text style=\"flex: 1; font-size: 16;\">$100</text> </div> </div></template> one text align left , the other float right: <template><div style=\"flex-direction: row; justify-content: space-between;\"> <text>WEEX</text> <text>2016-05-08</text></div></template> Positionwe can use properties below to control placement of weex tag position: values relative | absolute | fixed | sticky, default value relative relative means the item is positioned relative to its normal position. absolute means the item is positioned relative to its container. fixed keeps the elements position fixed when the page is scrolling. sticky keeps elements positioned inside the viewport as âstuckâ at the top or ârelativeâ at its original place depending on whether does it about to scroll out of the view. top: number type, default value 0, upward offset value bottom: number type, default value 0, downward offset value left: number type, default value 0, leftward offset value right: number type, default value 0, rightward offset value Examples<template> <div style=\"flex-direction: column;\"> <div style=\"height: 3000;\"> <image src=\"...\" style=\"top: 50px; left: 50px;\"></image> </div> <div style=\"height: 3000;\"> <image src=\"...\" style=\"position: sticky;\"></im age> </div> <div style=\"height: 3000;\"> <image src=\"...\" style=\"position: absolute; top: 50px; left: 50px;\"></image> </div> </div></template> Pseudo class v0.9.5+Weex support four pseudo-classes: active, focus, disabled, enabled All components support active, but only the input component and the textarea component support focus, enabled, diabled. Rule the high priority override low priority when rules take effect at the same time such as: âinput:active:enabledâ will override âinput:activeâ the interconnection rule as follow Example<template> <div class=\"wrapper\"> <image :src=\"logoUrl\" class=\"logo\"></image> </div></template><style scoped> .wrapper { align-items: center; margin-top: 120px; } .title { font-size: 48px; } .logo { width: 360px; height: 82px; background-color: red; } .logo:active { width: 180px; height: 82px; background-color: green; }</style><script> export default { props: { logoUrl: { default: 'https://alibaba.github.io/weex/img/[email protected]' }, target: { default: 'World' } }, methods: { update (e) { this.target = 'Weex'; } } };</script> Try it linear-gradient v0.10+Weex support linear-gradient background, You can see W3C description of the gradient. Supported componentsAll components in Weex support gradients UsageYou can use linear gradient by background-image property. background-image: linear-gradient(to top,#a80077,#66ff00); radial-gradient is not currently supported, do not use it. Weex currently supports two color gradients. The direction of the gradient is as follows: to rightFrom left to right to leftFrom right to left to bottomFrom top to bottom to topFrom bottom to top to bottom rightFrom the upper left corner to the lower right corner to top leftFrom the lower right corner to the upper left corner Note bac kground-image and background-color are set at the same time, background-image precedes background-color. Do not use shorthand property such as background. Example<template> <scroller style=\"background-color: #3a3a3a\"> <div class=\"container1\" style=\"background-image:linear-gradient(to right,#a80077,#66ff00);\"> <text class=\"direction\">to right</text> </div> <div class=\"container1\" style=\"background-image:linear-gradient(to left,#a80077,#66ff00);\"> <text class=\"direction\">to left</text> </div> <div class=\"container1\" style=\"background-image:linear-gradient(to bottom,#a80077,#66ff00);\"> <text class=\"direction\">to bottom</text> </div> <div class=\"container1\" style=\"background-image:linear-gradient(to top,#a80077,#66ff00);\"> <text class=\"direction\">to top</text> </div> <div style=\"flex-direction: row;align-items: center;justify-content: center\"> < ;div class=\"container2\" style=\"background-image:linear-gradient(to bottom right,#a80077,#66ff00);\"> <text class=\"direction\">to bottom right</text> </div> <div class=\"container2\" style=\"background-image:linear-gradient(to top left,#a80077,#66ff00);\"> <text class=\"direction\">to top left</text> </div> </div> </scroller></template><style> .container1 { margin: 10px; width: 730px; height: 200px; align-items: center; justify-content: center; border: solid; border-radius: 10px; } .container2 { margin: 10px; width: 300px; height: 300px; align-items: center; justify-content: center; border: solid; border-radius: 10px; } .direction { font-size: 40px; color: white; }</style> Other Common Style opacity background-color Type of Style Value length type number type color type (The list of color keywords.) enumerated type Simple StepThese up-to-down steps may help you to plan the who le style of weex pages. overall style: divide the whole page to different parts flex alignment: align boxes in every part of page position box: place box, set offset element specific style: set styles for certain element if needed","type":"references"},{"title":"HTML5 APIs","path":"references/html5-apis.html","permalink":"https://weex.apache.org/references/html5-apis.html","text":"HTML5 APIsVue APIs","type":"references"},{"title":"Gesture","path":"references/gesture.html","permalink":"https://weex.apache.org/references/gesture.html","text":"Gesture Experiment Feature Weex encapsulates native touch events to provide a gesture system. Using gesture is similar to use event in Weex. Just set on attributes on a node to listen to gesture. TypeFor now, there are four types of gestures: Touch. Touch gesture is fired when a touch point is placed, moved or removed from the touch surface. Touch gesture is accuracy as it will report every trivial event. As a result, listening to touch gesture m ay be slow, a great deal of events needs to be processed even a small move happened. There are three types of Touch gesture: touchstart will be fired when a touch point is placed on the touch surface. touchmove will be fired when a touch point is moved along the touch surface. touchend will be fired when a touch point is removed from the touch surface. Pan. Pan gesture also report motion of touch point on the touch surface, which is similar to touch gesture. But Pan gesture is sampled and faster than the touch event. As consequence, it is less accuracy than touch gesture. There are also three types of Pan gesture, and the meaning of these types is very close to types of Touch. panstart panmove panend Horizontal/Vertical Pan v0.10+ . Mainly used for cell swipe gestures before conflict resolving system is completed. start/move/end state of the gesture will be passed by state property. Note: These gestures are in conflict with click event on Android currently. horizontalpan verticalpan Swipe. Swipe is fired when user swipe a touch point on the screen. A serial of motion will only trigger one Swipe gesture. LongPress. LongPress is fired when a touch point is held for 500 ms or more. The Touch gesture and Pan is very close to each other, with following features hold: Touch. Not sampled, accuracy, but slow. Pan. Sampled, fast, less accuracy. Users may choose their gesture according to their situation. PropertiesThe following properties can be used in gesture callback: direction. Only exists for Swipe gesture. Indicate the direcion of the swipe, choose from up, left, bottom, right. changedTouches. An array of motion for every touch pointer that has contribute to the current gesture. changedToucheschangedTouches is an array, with the following properties in its children: identifier. A unique identifier for a touch pointer. pageX. The X coordinate of the touch pointer relative to the left edge of the document. pageY. The Y coordinate of the touch pointer relative to th e top of the document. screenX. The X coordinate of the touch point relative to the left edge of the screen. screenY. The Y coordinate of the touch point relative to the top edge of the screen. ConstrainCurrently, Weex Android do not support listening to gesture on scroller, list and webview, as it would lead a large amount of event conflicting.","type":"references"},{"title":"iOS APIs","path":"references/ios-apis.html","permalink":"https://weex.apache.org/references/ios-apis.html","text":"iOS APIsHandler(like Android Adapter) WXImgLoaderDefaultImpl Image load handler. Weex need to implement this interface to download the picture. The interface is defined as follows: @protocol WXImgLoaderProtocol <WXModuleProtocol>/** * @abstract Creates a image download handler with a given URL * * @param imageUrl The URL of the image to download * * @param imageFrame The frame of the image you want to set * * @param options : The options to be used for this download * * @param completedBlock : A block called once the download is completed. * image : the image which has been download to local. * error : the error which has happened in download. * finished : a Boolean value indicating whether download action has finished. */- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;@end Native interacts with JavaScript Custom events Used for a custom control for event notifications, such as custom click events, response drop events, and so on. This is a method in the component base class that can be used directly. /** * @abstract Fire an event to the component and tell Javascript which value has been changed. * @param eventName * @param params * @param domChanges **/- (void)fireEvent:(NSString *)eventName params:(NSDictionary *)params domChanges:(NSDictionary *)domChanges Event callback Used for Module callback. T here are two types of callback: WXModuleCallback: For performance reasons, the callback can only callback js once, and then will be released. WXModuleKeepAliveCallback: This callback can be set to multiple callbacks, multiple callbacks of the scene such as continually listen scrolls event and return to js. @implementation WXEchoModule@synthesize weexInstance;WX_EXPORT_METHOD(@selector(echo:))- (void)echo:(NSString *)param callback:(WXModuleKeepAliveCallback)callback{ callback(param,ture);} Set size of the Weex containerYou can use the setFrame(CGRect) method to change the size of the Weex container. DowngradeWeex in the development stage will add some new features and new methods, but these new features and functions must be upgraded to achieve the SDK, for the application should not be upgraded how to deal with it? You can use the downgrade feature. Native can be handled by the onFailed method in interface WXSDKInstance, and if it is an active demoulding error domain is T emplateErrorType, and the Native side can jump to the corresponding H5 page. Or otherwise prompted the userâs current environment does not support Weex.","type":"references"},{"title":"JS Framework APIs","path":"references/jsfm-apis.html","permalink":"https://weex.apache.org/references/jsfm-apis.html","text":"JS Framework APIsBroadcastChannel v0.9+BroadcastChannel API is the solution for inter-instance communication. Reference BroadcastChannel specification. MessageEvent specification API postMessage(message): Sends the given message to other BroadcastChannel objects set up for this channel. close: Closes the BroadcastChannel object, opening it up to garbage collection. onmessage: Event handler, the event will be triggered when the instance receive a message. Usageconst Stack = new BroadcastChannel('Avengers')Stack.onmessage = function (event) { console.log(event.data) // in this case, it's \"Hulk Smash !!!\"}// in another instanceconst Hulk = new BroadcastChannel('Aveng ers')Hulk.postMessage(\"Hulk Smash !!!\") Run the code above, Stack can receive the message from Hulk. NoticeOne thing should be noticed: The message object is not deep cloned. See the demo below: const a = new BroadcastChannel('app')const b = new BroadcastChannel('app')const message = { lists: ['A', 'B']}a.onmessage = function (event) { // in this case, event.data is a reference of message console.assert(event.data === message)}b.postMessage(message) In this case, event.data is strict equal to message. Compared to the deep clone, this behavior improves efficiency and reduces memory cost. However, developers are not recommended to cache or modify the event object when they are using it (All type of event handlers should have this restriction).","type":"references"},{"title":"Path","path":"references/path.html","permalink":"https://weex.apache.org/references/path.html","text":"Path0.9 This article will cover uri (url) usage in Weex. Including using image/typeface resources, deal with relative uri and how to access local and packaged asset files. Schemes LocalWeex SDK provide local scheme to access resources packaged with application, and of cource, itâs not working in the HTML5 runtime.Currently, developers can use this scheme with image and textâs font file location. In iOS, itâs always locate file in âbundle resourcesâ. For example, a image component with local:///app_icon will load image file named âapp_iconâ in bundle resouce, and font file work in the same way. In Android, image component will load from âdrawableâ resource folder like âres/drawable-xxxâ. But load font file is different, android framework can not load font file from âresâ, so SDK will load it from asserts folder. HTTP/HTTPSItâs working in the same way as in web, Weex support these at very beginning. FileUse file scheme to access local disk file. This scheme has its limitations: You would not hard coded a file url in source page. Because not ma tter itâs running in different platform(iOS, Android) or not, the content will be totally different in another device, which is depend to the specific device.So one possible case is getting the file url in runtime dynamically, which you can use it to diaplay a local disk image, or maybe upload it later. Relative URILike we do in HTML, weex process ârelative URIâ in the same way. The relative URI, which start with /,.,..,//, will resolve by the bunle url.Means URL start with / will resolve to the root folder as bundle js file, . and .. will resolve to current and parent folder, and // will resolve to same scheme bundle js have. URI AdapterAll the above is the default implementation, developers can extend or override these their own by providing a âURI Adapterâ. Same as the other adapters, Custom adapter should be set before Weex SDK is initializing.","type":"references"},{"title":"Platform Differences Between Weex and Web","path":"references/platfrom-difference.html","perma link":"https://weex.apache.org/references/platfrom-difference.html","text":"Platform Differences Between Weex and WebWork in progresss.","type":"references"},{"title":"Native DOM APIs","path":"references/native-dom-api.html","permalink":"https://weex.apache.org/references/native-dom-api.html","text":"Native DOM APIsWeex in the JS engine, for each page provides a set of Native DOM APIs. This interface is very close to the HTML DOM APIs. Using this interface we can control native rendering logic via JavaScript. And Weex upper layer of Vue 2.0 is based on this interface to adapt. In most cases, the JS framework will encapsulate native DOM APIs. That way, the developer does not need to work directly on the Native DOM. Document class: full page document. Node class: the base class of nodes. Element class: element node, inherited from Node, single view unit. Comment class: comment node, inherited from Node, no practical meaning, usually used as placeholders. Each Weex page has a weex.docu ment object, which is an instance of the Document class and is the starting point for all the following interface calls. Letâs take a look at their usage in detail: Document classEach Document instance will automatically have a documentElement property when it is created. This attribute represents the document node. The document node can have a body, which is the main node of the document. Note: The document node body only accepts <div>, <list>, or <scroller> three types of element nodes. Constructornew Document(id: string, url: string?) Member methodcreateElement(tagName: string, props: Object?): Element Creates an Element instance of a specific type tagName, which is an element node. Props can contain attr objects and style objects. Such as createBody ('div', {style: {backgroundColor: '#ffffff'}}). createComment(text: string): Comment Create an instance of ·Comment, which is a comment node and set a text description. createBody(tagName: string, props: Object?): Element Create a document body node and automatically mount it under documentElement. fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)Triggers a particular type of event. When the event modifies the DOMâs properties or styles during the generation process, the fourth argument is used to describe the changes, and the parameter format is the same as the format of the createElement method above. destroy() Destroy the current document. Once the document is destroyed, it will no longer work. Read-only member variablesid: string Each Document instance has a unique id. This is also the only id that each Weex page has. URL: string? If the current Weex page has a JS bundle URL, the URL will be returned here. body: Element The main body of the document, the concept similar to the HTML DOM document.body. documentElement: Element Document node, the concept similar to the HTML DOM document.documentElement. The relationship between body and documentElement is: documentElement is the parent of the body. getRef(id): Node Get the node based on the node id. Node ClassConstructornew Node() Member methoddestroy() Read-only member variables or methodsref: string Each Node instance has its own unique ref value in the entire `Document instance. nextSibling: Node? previousSibling: Node? parentNode: Node? The three interfaces are consistent with the definition of HTML DOM. children: Node[] The node has an array of all child nodes. pureChildren: Node[] The node has an array of all the child elements. The difference between it and children is that pureChildren contains only the Element instance and not the Comment instance. Element class, inherited from NodeConstructornew Element(type: string, props: Object?) Creates an element node of a particular type type, and the props parameter can contain an attr object or a style object. DOM tree operationappendChild(node: Node)insertBefore(node: Node, before: Node?) The two interfaces are similar to HTML DOM. insertAfter(node: Node, after: Node?) Insert a new node before a child node. removeChild(node: Node, preserved: boolean?) Delete the child node node. Parameters preserved whether it is immediately removed from memory or temporarily retained. clear() Clear all child nodes. The DOM property itself operatessetAttr(key: string, value: string, silent: boolean?) setStyle(key: string, value: string, silent: boolean?) In the above two interfaces, when silent is true, the node only updates itself, does not pass the command to the client render layer. This parameter is used to handle user events that have changed the node-related properties at the time of occurrence, and will not send commands repeatedly to the client after the Native DOM has changed. addEvent(type: string, handler: Function) removeEvent(type: string) fireEvent(type: string, e: any) Bind events, unbind events, trigger events. Component method for a specific component typeSpecial: Different component types can have their own unique methods, such as <web> components support refresh method. You can see the description of each component. In this case, we will generate a specific component type of class, such as WebElement, which inherited from Element. Such as: WebElement inherited from ElementIndicates that a webview is embedded in the Wex page Refresh (): Refreshes the current webview Read-only member variables or methodsref, nextSibling, previousSibling, parentNode Inherited from Node. nodeType: number The number is always 1. type: string Consistent with the type in the constructor. attr: Object The key pair of all the characteristics of the current node. It is recommended to use the setAttr () method to modify, rather than directly modify the object here. style: Object The value of all the keys of the current node. It is recommended to modify the setStyle () method, rather than directly modify the object here. event: Object All events of the current node are bound. Each event type corresponds to an event handler method. It is recommended to use the addEvent () / removeEvent () method to modify, rather than directly modify the object here. toJSON(): Object Returns a JSON object that describes the elementâs node, such as: {ref: string, type: string, attr: Object, style: Object, event: Array (string), children: Array}. Comment class, inherited from NodeConstructornew Comment(value: string) Read-only member variables or methodsref, nextSibling, previousSibling, parentNode Inherited from Node. nodeType: number The number is always 8. type: string The type is always 'comment' value: string Consistent with the value in the constructor. toJSON(): Object Returns a JSON object describing the annotation node. For example: <! - value ->.","type":"references"},{"title":"Text Style","path":"references/text-style.html","permalink":"https://weex.apache.org/references/text-style.html","text":"Text StyleText alike components share some common style rules. The text alike c omponents currently includes text and input. Properties color: <colors> this property set the foreground color of an componentâs text content. font-size: <length> this property specifies the size of the font. font-style: <enum> normal | italic. This property lets you select italic or normal faces within a font-family. Default value is normal. font-weightv0.9+: values: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 normal is equal to 400, bold equel to 700 default value: normal apply to: <text>, <input> ios support showing 9 kind of font-weight. android support showing 2 kind of font-weight:400,700, other value will map to 400 or 700 Some standard values like lighter, bolder, number unit are not supported. The effect not apply to all elements, just <text> and <input>. In another way, itâs not inherited. text-decoration: <enum> none | underline | line-through. This property is used to set the text formatting to underline o r line-through. The default value is none. text-align: <enum> left | center | right. This property describes how inline content like text is aligned in its parent component. The default value is left. font-family:<string> this property set the font-family of the text. This property doesnât guarantee the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices. text-overflow:<string> clip | ellipsis. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis. The property color support multiple fomats of values, contains rgb, rgba, #fff, #ffffff, named-color. Example: .my-class { color: red; }.my-class { color: #f00; }.my-class { color: #ff0000; }.my-class { color: rgb(255, 0, 0); }.my-class  23; color: rgba(255, 0, 0, 0.5); } Type of Style Value length: number followed by length unit px, px can be omitted. colors: support multiple formats of values, including rgb (rgb(255, 0, 0)), rgba (rgba(255, 0, 0, 0.5)), hexadecimal (#ff0000), short hexadecimal (#f00), named color (red). enumerated values: a limited number of string values. Note: The list of color keywords.","type":"references"},{"title":"CSS unit","path":"references/unit.html","permalink":"https://weex.apache.org/references/unit.html","text":"CSS unitWork in progresss.","type":"references"},{"title":"Weex Variable","path":"references/weex-variable.html","permalink":"https://weex.apache.org/references/weex-variable.html","text":"Weex instance variableEach Weex page has a separate weex variable, which exists in the JS context. They hold a single instance or method of the current Weex page. weex.config This variable contains all the environment information for the current Weex page, including not only: BundleUrl : string: The URL of the JS bundle. Env: Object: environment object. WeexVersion: string: Weex sdk version. AppName: string: application name. AppVersion: string: app version. Platform: string: platform information, that is iOS, Android or Web. OsVersion: string: system version. DeviceModel: string: device model (native application only). DeviceWidth: number: device width, default 750. DeviceHeight: number: device height. weex.requireModule(module: string): Object Get all the methods of a native module, such as: <template> <div><text>Hello World</text></div> </template> <script> var modal = weex.requireModule('modal') modal.toast({ message: 'I am a toast.', duration: 3 }) </script> weex.document: Document Returns the document object of the current Weex page.","type":"references"},{"title":"Web standards","path":"references/web-standards.html","permalink":"https://weex.apache.org/references/web-standards.html","text":"Web standardsHTMLr efs: https://www.advancedwebranking.com/html/ 2016-12-11 Overview percentage name supported 98.1% <head> - 97.9% <body> - 97.9% <html> - 97% <title> - 93.9% <meta> - 89.9% <div> â 89.6% <a> â 88.5% <script> â 86.5% <link> - 86.3% <img> â 81.5% <p> - (can be customized) 75.6% <span> - (can be customized) 73.8% <li> - (can be customized) 73.7% <ul> - (can be customized) 70.3% <br> â 60.4% <style> â 55.8% <h1> - (can be customized) 52.7% <h2> - (can be customized) 48.4% <input> â 46.9% <form> â 44.3% <strong> - (can be customized) 43.1% <h3> - (can be customized) 30.9% <table> â 30.3% <tr> â 30.2% <td> â Forms percentage name supported 49.5% <option> â 30.2% <input> â 16.6% > [type="hidden"] - 8% > [type="text"] â 4.2% > [type="submit"] - 2% > [type="ch eckbox"] - (<switch>) 1.2% > [type="email"] â 1.1% > [type="radio"] â 0.9% > [type="image"] - 0.8% > [type="button"] - 0.6% > [type="search"] â 0.6% > [type="password"] â 0.1% > [type="tel"] â 0.1% > [type="number"] â 0% > [type="reset"] - 0% > [type="file"] â 0% > [type="date"] â 0% > [type="url"] â 0% > [type="range"] â 0% > [type="color"] â 0% > [type="time"] â 0% > [type="datetime-local"] â 7.2% <label> - 6.1% <form> - 3.7% <button> - (can be customized) 2.6% > [type="button"] - 1.3% > [type="submit"] - 0% > [type="reset"] - 1.9% <select> â 0.7% <textarea> â 0.5% <fieldset> - 0.1% <optgroup> â 0.1% <legend> - 0% <progress> â 0% <datalis t> - 0% <output> - 0% <meter> - CSS Propertiesrefs: https://www.chromestatus.com/metrics/feature/popularity 2016-12-11 percentage name supported 90.5115% display â flex only 89.8243% margin â (not support combo) 88.7012% width â 88.6468% overflow â iOS only, hidden only for Android 88.6432% background-color â 88.0803% height â 87.7648% font-size â 87.3837% padding â 87.2721% color â 86.9788% text-align â 86.6841% position â relative by default, static not supported 86.6039% font-family â 86.5943% font-weight â 85.0072% opacity â 80.6911% max-width â 79.4476% box-sizing â border-box only 75.7623% max-height â 74.9939% webkit-user-select â 57.0292% align-items â 56.8182% justify-content â space-around not supported well in browser 50.5941% flex-direction â 48.5052% border â 47.5161% top â 46.9136% background â 46.1552% cursor â 46.1443% margin-left â 46.0956% left â 46.0848% text-decoration â 45.9575% float â 45. 8391% border-bottom â 45.7639% padding-left â 45.7128% margin-top â 45.7013% line-height â 45.5836% background-image â 45.0837% z-index â 45.0649% right â 45.0516% margin-bottom â 45.0459% white-space â 44.8710% margin-right â 44.8476% vertical-align â 44.6306% padding-top â 44.1466% border-radius â 44.0136% border-top â 43.9815% padding-bottom â 43.9392% padding-right â 43.8539% visibility â 43.4306% background-position â 43.4098% background-repeat â 43.0391% clear â 42.9100% bottom â 42.2092% content â 42.0690% box-shadow â 41.9004% border-color â 41.7341% outline â 41.4297% border-right â 41.2605% border-left â 41.1127% min-height â 41.0736% font-style â 41.0523% min-width â 40.4298% list-style â 39.7341% font â 38.8999% background-size â 38.7811% border-width â 38.7718% border-collapse â 37.8110% border-style â 37.4962% text-overflow â must work with lines 37.3471% text-transform â 37.2154% transition â 36.5155% overflow-y â 36.3025% transform â 36.2488% text-indent â 35.5075% text-shadow â 34.7607% webkit-appearance â 34.1925% list-style-type â 34.0238% border-spacing â 33.6664% word-wrap â 31.9961% overflow-x â 31.9922% zoom â 31.2495% border-bottom-left-radius â 31.1306% pointer-events â 31.1229% border-top-left-radius â 30.2131% border-bottom-color â 29.9608% border-top-color â 29.4297% border-bottom-right-radius â 29.2668% border-top-right-radius â 28.6489% letter-spacing â 27.8327% animation â 26.6738% border-right-width â 26.0169% src â 25.2661% clip â 25.2512% webkit-font-smoothing â 25.1971% border-bottom-width â 25.0246% border-right-color â 24.7790% direction â 24.4094% webkit-tap-highlight-color â 23.9751% border-left-color â 23.9321% border-top-width â 23.7902% fill â 23.2617% border-left-width â 22.7278% table-layout â 21.5766% word-break â 20.4319% background-clip â 19.3198% transform-origin â 18 .9233% filter â 17.7879% resize â 16.2501% flex â 15.1656% font-variant â 14.9181% text-rendering â 14.7125% webkit-filter â 14.5263% transition-duration â 14.3966% transition-property â 14.2124% webkit-box-orient â 13.5432% outline-offset â 12.9300% transition-timing-function â 12.2788% unicode-range â 12.0880% word-spacing â 11.9124% quotes â 11.6800% border-bottom-style â 11.4263% webkit-background-clip â 11.0070% flex-grow â 10.5925% backface-visibility â 10.4417% animation-name â 10.4302% stroke â 10.4144% animation-duration â 10.2804% touch-action â 9.9663% list-style-position â 9.8662% order â 9.7770% outline-width â 9.7504% transition-delay â 9.4689% border-top-style â 9.3474% webkit-box-pack â 9.3078% webkit-box-align â 9.2375% page-break-inside â 9.1898% webkit-line-clamp â 8.9350% list-style-image â 8.8339% page-break-after â 8.5735% speak â 8.4754% unicode-bidi â 8.4307% animation-timing-function â 8 .1464% webkit-box-flex â 8.0048% orphans â 7.9947% widows â 7.6671% flex-wrap â not supported well in browser 7.5756% animation-fill-mode â 7.4163% animation-delay â 7.3284% border-left-style â 7.1586% outline-color â 6.9102% flex-shrink â 6.7754% perspective â 6.7748% border-right-style â 6.4619% outline-style â 6.0382% animation-iteration-count â 5.9838% background-origin â 5.9714% fill-opacity â 5.9357% will-change â 5.3740% stroke-width â 5.3172% transform-style â 5.2608% overflow-wrap â 5.1730% background-attachment â 4.9039% counter-increment â 4.5950% counter-reset â 4.5031% align-self â 4.4109% webkit-box-ordinal-group â 4.4046% webkit-animation-direction â 3.7598% background-position-x â 3.6867% border-image â 3.6601% background-position-y â 3.5749% webkit-user-drag â 3.3376% flex-basis â 3.1840% align-content â 3.1832% flex-flow â 3.1774% image-rendering â 3.0879% webkit-margin-start â 2.9551% font-stretch â 2.8934% empty-cells â 2.7619% webkit-margin-after â 2.7220% perspective-origin â 2.6125% webkit-margin-end â 2.6089% column-count â 2.5880% webkit-text-fill-color â 2.5466% webkit-box-direction â 2.4618% font-feature-settings â 2.3959% webkit-mask-image â 2.3431% webkit-padding-end â 2.2555% stroke-dasharray â 2.1788% user-select â 2.1679% object-fit â 2.0643% column-gap â 2.0459% text-size-adjust â 2.0253% caption-side â 1.9695% stroke-dashoffset â 1.7923% stroke-linecap â 1.7861% animation-direction â 1.7559% webkit-font-feature-settings â 1.7404% stroke-opacity â 1.5926% stroke-miterlimit â 1.5786% fill-rule â 1.4859% webkit-user-modify â 1.3439% webkit-border-image â 1.3091% animation-play-state â 1.2676% contain â 1.2029% webkit-padding-start â 1.1840% webkit-margin-before â 1.1269% page-break-before â 1.1222% webkit-margin-top-collapse â 1.0418% columns â 1.0354% webkit-mask-size â 0.9650% border-image-slic e â 0.9425% stop-color â 0.9408% webkit-mask-repeat â 0.9125% webkit-box-lines â 0.8804% webkit-column-break-inside â 0.8752% size â 0.8334% font-kerning â 0.8034% stroke-linejoin â 0.7869% tab-size â 0.7689% break-inside â 0.7589% webkit-text-stroke-width â 0.7353% column-width â 0.6924% webkit-mask-position â 0.6869% border-image-width â 0.6323% border-image-repeat â 0.5994% border-image-outset â 0.5885% all â 0.5859% webkit-text-stroke-color â 0.5435% webkit-print-color-adjust â 0.5420% webkit-text-stroke â 0.5195% writing-mode â 0.4741% clip-rule â 0.4685% webkit-clip-path â 0.4578% text-anchor â 0.4535% shape-rendering â 0.4526% webkit-column-break-before â 0.4494% clip-path â 0.4452% webkit-mask â 0.4393% mix-blend-mode â 0.4166% text-align-last â 0.4033% column-rule â 0.3990% webkit-mask-box-image â 0.3989% font-variant-ligatures â 0.3881% column-fill â 0.3865% webkit-line-break â 0.3857% border-image-sourc e â 0.3528% stop-opacity â 0.3075% webkit-perspective-origin-y â 0.3054% webkit-perspective-origin-x â 0.2994% webkit-writing-mode â 0.2717% dominant-baseline â 0.2634% column-rule-color â 0.2586% webkit-box-decoration-break â 0.2467% webkit-text-security â 0.2374% webkit-background-origin â 0.2146% font-variant-caps â 0.2005% column-rule-style â 0.1976% shape-outside â 0.1971% webkit-padding-before â 0.1896% break-after â 0.1782% webkit-padding-after â 0.1774% text-orientation â 0.1747% webkit-text-orientation â 0.1655% mask â 0.1626% alignment-baseline â 0.1572% page â 0.1530% webkit-column-break-after â 0.1521% webkit-box-reflect â 0.1504% webkit-text-emphasis-color â 0.1499% object-position â 0.1470% break-before â 0.1455% webkit-margin-collapse â 0.1452% baseline-shift â 0.1451% hyphens â 0.1309% rx â 0.1304% ry â 0.1256% background-blend-mode â 0.1136% font-variant-numeric â 0.1135% background-repeat-x â 0.112 3% background-repeat-y â 0.1086% webkit-text-emphasis â 0.1058% webkit-rtl-ordering â 0.1040% column-rule-width â 0.1036% isolation â 0.1002% webkit-highlight â 0.0843% webkit-transform-origin-y â 0.0786% webkit-transform-origin-x â 0.0770% webkit-app-region â 0.0685% column-span â 0.0653% r â 0.0611% y â 0.0602% x â 0.0555% webkit-border-vertical-spacing â 0.0545% webkit-border-horizontal-spacing â 0.0542% webkit-border-start-width â 0.0450% webkit-border-start-color â 0.0424% webkit-border-after-width â 0.0424% webkit-border-before-width â 0.0423% webkit-border-end-width â 0.0351% marker â 0.0349% webkit-border-end-color â 0.0347% webkit-border-after-color â 0.0347% webkit-border-before-color â 0.0342% mask-type â 0.0328% color-interpolation-filters â 0.0325% webkit-border-end â 0.0319% vector-effect â 0.0307% color-rendering â CSS Units and Valuesrefs: https://drafts.csswg.org/css-values/ 2016-12-11 Textual pre-defined key words CSS-wide keywords initial inherit unset <custom-ident>: author-defined identifiers â <string>: quoted strings ("xxx") <url>: resourec locators (url()) Numeric <integer> â <number> â <percentage> Length <length> relative font-relative em ex ch ic rem âð§ viewport-percentage vw âð§ vh âð§ vi vb vmin âð§ vmax âð§ absolute cm âð§ mm âð§ Q âð§ in âð§ pc âð§ pt âð§ px autofixed to number Quantities <angle> deg grad rad turn <time> s ms <frequency> Hz kHz <resolution> dpi dpcm dppx Elsewhere <color> â <image> <position> Functional calc() toggle() attr() JS APIsrefs: https://www.w3.org/standards/techs/js 2016-12-11 Completed WorkStandards last update spec supported 2016-11-17 Media Source Extensions⢠- (media related) 2016-11-08 Geolocation API Specification 2nd Edition â developing 2016-10-27 Pointer Lock - 2016-10-18 Vibration API (Sec ond Edition) â 2016-04-19 Web Storage (Second Edition) â async storage module 2015-10-22 Web Notifications â 2015-05-19 HTML5 Web Messaging â BroadcastChannel developing 2015-02-24 Pointer Events - 2015-02-10 Vibration API â 2015-02-03 Server-Sent Events â 2015-01-08 Indexed Database API â 2014-03-13 Metadata API for Media Resources 1.0 - (media related) 2014-02-11 Progress Events â 2014-01-16 JSON-LD 1.0 Processing Algorithms and API - 2013-12-12 Performance Timeline - (perf related) 2013-12-12 User Timing - (perf related) 2013-10-31 Widget Interface - 2013-10-29 Page Visibility (Second Edition) â onviewappear/onviewdisappear 2013-10-10 Touch Events â 2013-02-21 Selectors API Level 1 - 2012-12-17 Navigation Timing - (perf related) 2012-12-17 High Resolution Time - (perf related) 2008-12-22 Element Traversal Specification - DraftsProposed Recommendations last update spec supported 2016-09-15 WebIDL Level 1 - Candidate Recommendations last update spec supported 20 16-12-08 Performance Timeline Level 2 - (perf related) 2016-11-22 Page Visibility Level 2 â onviewappear/onviewdisappear 2016-11-01 High Resolution Time Level 2 - (perf related) 2016-08-18 DeviceOrientation Event Specification â 2016-07-21 Resource Timing Level 1 - (perf related) 2016-07-14 Presentation API - 2016-07-07 Battery Status API â 2016-07-05 Encrypted Media Extensions - 2016-05-19 Media Capture and Streams - (media related) 2014-12-11 Web Cryptography API - 2014-09-09 HTML Media Capture - (media related) 2012-09-20 The WebSocket API â Last Call Drafts last update spec supported 2011-12-01 Geolocation API Specification Level 2 â Other Working Drafts last update spec supported 2016-12-09 MediaStream Image Capture - (media related) 2016-12-06 MediaStream Recording - (media related) 2016-12-06 Selection API â 2016-12-05 Input Events â 2016-12-02 Gamepad - 2016-11-29 WebDriver - 2016-11-24 WebRTC 1.0: Real-time Communication Between Browsers â 2016-11-22 Pointer Lock 2.0 - 2016-11-07 Remote Playback API - (media related) 2016-11-03 Resource Timing Level 2 - (perf related) 2016-11-02 Audio Output Devices API - (media related) 2016-11-01 Indexed Database API 2.0 â 2016-11-01 User Timing Level 2 - (perf related) 2016-10-31 The Screen Orientation API â 2016-10-31 High Resolution Time Level 3 - (perf related) 2016-10-24 UI Events KeyboardEvent code Values - 2016-10-24 UI Events KeyboardEvent key Values - 2016-10-11 Service Workers 1 â 2016-09-21 Identifiers for WebRTCâs Statistics API - 2016-09-13 Accelerometer Sensor â 2016-09-13 Gyroscope Sensor â 2016-09-13 Magnetometer Sensor â 2016-08-30 Ambient Light Sensor â 2016-08-30 Media Capture from DOM Elements - (media related) 2016-08-30 Generic Sensor API â 2016-08-03 Wake Lock API â 2016-07-19 Proximity Sensor â 2016-07-19 Pointer Events - Level 2 - 2016-07-14 Screen Capture â 2016-07-12 Media Capture Depth Stream Extensions - (media related) 2016-05-17 Cooperative Sched uling of Background Tasks â 2016-04-22 Navigation Timing Level 2 - (perf related) 2016-04-03 Clipboard API and events â clipboard module 2015-12-15 Push API â 2015-12-08 Web Audio API - (media related) 2015-10-15 FindText API - 2015-09-24 Web Workers â 2015-04-21 File API â 2014-02-20 Network Service Discovery â 2012-03-06 MediaStream Capture Scenarios - (media related) 2011-12-15 Audio Processing API - (media related)","type":"references"},{"title":"å¦ä½åä¸ç¤¾åº","path":"cn/guide/contributing.html","permalink":"https://weex.apache.org/cn/guide/contributing.html","text":"å¦ä½åä¸ç¤¾åºå å ¥ Weex é®ä»¶å表 (Mailing List)å¨ Weex å®æ¹ç¤¾åºææçä¿¡æ¯é½ä¼æ±èäºé®ä»¶å表ã订é å¼åé®ä»¶å表çæ¹å¼æ¯åéé®ä»¶å° [email protected] ç¶åä½ çé®ç®±ä¼æ¶å°ä¸å°æ¥èª Apache çåä¿¡ (è±æ)ï¼æ Apache çè¿å°åä¿¡å次åå¤è¿å»ï¼å³å¯å®æ订é ã è¿ééè¦å¼ºè°çæ¯ Apache æ¯ä¸ä¸ªé¢åå ¨ççå ¨è±æç社åºï¼æ以æ们å¸ææ¨è½å¤ç¨è±æå¨é®ä»¶å表ä¸è·å¤§å®¶äº¤æµã å¦ææ¨ç¡®å®å¯¹ä½¿ç¨è±æåå¨å¾å¤§ççèæå°æï¼æ们ä¹é常欢è¿å¤§å®¶æ¥ä¸æé®çå¹³å° SegmentFault æé®ï¼è¿éæé常å¤çå¿çå¼åè ä¸èµ·è®¨è®ºå解ç Weex ç¸å ³çé®é¢ã 使ç¨é®ä»¶å表çå¦å¤ä¸ä¸ªå¥½å¤æ¯å®å¯ä»¥æ¹ä¾¿å¤§å®¶éæ¶æ¥é ä¹åçé®ä»¶è®°å½: http://mail-archives.apache.org/mod_mbox/incubator-weex-dev/ å¦ææ¨å¯¹é®ä»¶å表ä¸çå 容已ç»ä¸åæå ´è¶£ï¼è¿éä¹æé订é®ä»¶å表çæ¹æ³: åéé®ä»¶è³ [email protected] å¹¶æ ¹æ®åä¿¡çæ示è¿è¡äºæ¬¡åå¤ç¡®è®¤ï¼å®æé订ã é¤äºå¼å (dev) é®ä»¶å表ï¼æ们è¿æå¦å¤å 个çé®ä»¶å表ä¾å¤§å®¶æ¥é ï¼http://mail-archives.apache.org/mod_mbox/#weex.incubator åæ¯ç®¡ç (è±)master âdev <--- PR(hotfix/typo/3rd-PR) â PR{domain}-feature-{date} master branch master is the latest (pre-)release branch. dev branch dev is the stable developing branch. Itâs RECOMMENDED to commit hotfix (like typo) or feature PR to dev. {domain}-feature-{date} branch The branch for a developing iteration, e.g. android-feature-20160607 is an android developing iteration which is done at 2016.06.07. {domain} consists of android, ios, jsfm and html5. DO NOT commit any PR to such a branch. åæ¯å½å{module}-{action}-{shortName} {module}, see commit log module {action} feature: checkout from {module} and merge to {module} later. If {module} not exists, merge to dev bugfix: like feature, for bugfix only hotfix: checkout from master or release tag, merge to master and {module} later. If {module} not exists, merge to dev for example: android-bugfix-memory jsfm-feature-communication android-hotfix-compute-layout æ交æ¥å¿æ ¼å¼ (è±){action} [{module}] {description} {action} + add * update or bugfix - remove {module} Inc luding: android, ios, jsfm, html5, component, doc, website, example, test, all {description} Just make it as clear and simple as possible. for example: + [android] close #123, add refreshing for WebView * [doc] fix #123, update video auto-play property - [example] remove abc åé Pull Request (è±)You can create pull requests in GitHub. First we suggest you have some discussion with the community (commonly in our mailing list) before you code. Fork repo from https://github.com/apache/incubator-weex/ Finish the job you want to do. Create a pull request. ç¼ç è§è (è±)Objective-C Tabs for indentation(not spaces) * operator goes with the variable name (e.g. Type *variable;) Function definitions: place each brace on its own line. Other braces: place the open brace on the line preceding the code block; place the close brace on its own line. Use #pragma marks to categorize methods into functional groupings and protocol implementations Follow other guidelines on GitHub Objective-C St yle Guide Java & Android Use Google Java Style as basic guidelines of java code. Follow AOSP Code Style for rest of android related code style.","type":"guide"},{"title":"éæ Weex å°å·²æåºç¨","path":"cn/guide/integrate-to-your-app.html","permalink":"https://weex.apache.org/cn/guide/integrate-to-your-app.html","text":"éæ Weex å°å·²æåºç¨éæå° Android注ï¼ä»¥ä¸ææ¡£é½æ¯å设æ¨å·²ç»å ·å¤ä¸å®çAndroidå¼åç»éªã Android éææ两ç§æ¹å¼ æºç ä¾èµï¼è½å¤å¿«é使ç¨WEEXææ°åè½ï¼å¯ä»¥æ ¹æ®èªå·±é¡¹ç®çç¹æ§è¿è¡ç¸å ³æ¹è¿ã SDKä¾èµï¼WEEX ä¼å¨jcenter å®æåå¸ç¨³å®çæ¬ãjcenter注:å½å å¯è½éè¦ç¿»å¢ åæåå¤ å·²ç»å®è£ äºJDK version>=1.7 并é ç½®äºç¯å¢åé å·²ç»å®è£ Android SDK 并é ç½®ç¯å¢åéã Android SDK version 23 (compileSdkVersion in build.gradle) SDK build tools version 23.0.1 (buildToolsVersion in build.gradle) Android Support Repository >= 17 (for Android Support Library) å¿«éæ¥å ¥å¦æä½ æ¯å°é²æè 对稳å®æ§è¦æ±æ¯è¾é«å¯ä»¥ä½¿ç¨ä¾èµSDKçæ¹å¼ãæ¥éª¤å¦ä¸ï¼ å建Androidå·¥ç¨ï¼æ²¡æä»ä¹è¦ç¹å«è¯´æçï¼æç §ä½ çä¹ æ¯æ¥ã ä¿®æ¹build.gradle å å ¥å¦ä¸åºç¡ä¾èµ 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'compile 'com.alibaba:fastjson:1.1.46.android'compile 'com.taobao.android:weex_sdk:0.5.1@aar' 注:çæ¬å¯ä»¥é«ä¸å¯ä»¥ä½ã 代ç å®ç°æ³¨:éå½ä¸æå®æ´ä»£ç å°å å®ç°å¾çä¸è½½æ¥å£ï¼åå§åæ¶è®¾ç½®ã package com.weex.sample;import android.widget.ImageView;import com.taobao.weex.adapter.IWXImgLoaderAdapter;import com.taobao.weex.common.WXImageStrategy;import com.taobao.weex.dom.WXImageQuality;/** * Created by lixinke on 16/6/1. */public class ImageAdapter implements IWXImgLoaderAdapter { @Override public void setImage(String url, ImageView view, WXImageQuality quality, WXImageSt rategy strategy) { //å®ç°ä½ èªå·±çå¾çä¸è½½ï¼å¦åå¾çæ æ³æ¾ç¤ºã }} åå§å package com.weex.sample;import android.app.Application;import com.taobao.weex.InitConfig;import com.taobao.weex.WXSDKEngine;/** * 注æè¦å¨Manifestä¸è®¾ç½®android:name=\".WXApplication\" * è¦å®ç°ImageAdapter å¦åå¾çä¸è½ä¸è½½ * gradle ä¸ä¸å®è¦æ·»å ä¸äºä¾èµï¼å¦ååå§åä¼å¤±è´¥ã * 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' * compile 'com.alibaba:fastjson:1.1.45' */public class WXApplication extends Application { @Override public void onCreate() { super.onCreate(); InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build(); WXSDKEngine.initialize(this,config); }} å¼å§æ¸²æ package com.weex.sample;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view. View;import com.taobao.weex.IWXRenderListener;import com.taobao.weex.WXSDKInstance;import com.taobao.weex.common.WXRenderStrategy;import com.taobao.weex.utils.WXFileUtils;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); /** * WXSample å¯ä»¥æ¿æ¢æèªå®ä¹çå符串ï¼é对åç¹ææã * template æ¯.we transform åç jsæ件ã * option å¯ä»¥ä¸ºç©ºï¼æè éè¿optionä¼ å ¥ jséè¦çåæ°ãä¾å¦bundle jsçå°åçã * jsonInitData å¯ä»¥ä¸ºç©ºã * width 为-1 é»è®¤å ¨å±ï¼å¯ä»¥èªå·±å®å¶ã * height =-1 é»è®¤å ¨å±ï¼å¯ä»¥èªå·±å®å¶ã */ mWXSDKInstance.render(\"WXSample\", WXFileUtils.loadFileContent(\"hello.js\", this), null, null, -1, -1, WXRenderStrate gy.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(); } }} æº ç ä¾èµ(IDE Android Studio) ä¸è½½æºç git clone https://github.com/alibaba/weex å建 Android å·¥ç¨ã éè¿ä»¥ä¸è·¯å¾å¼å ¥ SDK ModuleFile->New-Import Module-> éæ© WEEX SDK Module(weex/android/sdk) -> Finish app ç build.gradle ä¸æ·»å å¦ä¸ä¾èµ:compile project(':weex_sdk') å ¶ä»è®¾ç½®è¯·åèä¸é¢å¿«éæ¥å ¥ éå½WXSampleå°å https://github.com/xkli/WXSample.git éæå° iOSéè¿cocoaPods éæ Weex iOS SDKå°ä½ ç项ç®é¦å åè®¾ä½ å·²ç»å®æäºå®è£ iOS å¼åç¯å¢ å CocoaPods 第ä¸æ¥ï¼æ·»å ä¾èµå¯¼å ¥ Weex iOS SDK å°ä½ å·²æç项ç®, å¦æ没æï¼å¯ä»¥åèæ°å»ºé¡¹ç®å¨ç»§ç»ä¸é¢å 容ä¹åï¼ç¡®ä¿ä½ å·²æç项ç®ç®å½æå称为 Podfile æ件ï¼å¦æ没æï¼å建ä¸ä¸ªï¼ç¨ææ¬ç¼è¾å¨æå¼ éæ framework WeexSDK å¨ cocoaPods ä¸ææ°çæ¬ å¯ä»¥å¨è¿è·å å¨ Podfile æ件ä¸æ·»å å¦ä¸å 容 source '[email protected]:CocoaPods/Specs.git' target 'YourTarget' do plat form :ios, '7.0' pod 'WeexSDK', '0.9.5' ## 建议使ç¨WeexSDKæ°çæ¬ end æºç éæ é¦å æ·è´ ios/sdk ç®å½å°ä½ å·²æ项ç®ç®å½ (æ¤å¤ä»¥æ·è´å°ä½ å·²æ项ç®çæ ¹ç®å½ä¸ºä¾å)ï¼ç¶åå¨ Podfile æ件ä¸æ·»å source '[email protected]:CocoaPods/Specs.git' target 'YourTarget' do platform :ios, '7.0' pod 'WeexSDK', :path=>'./sdk/' end 第äºæ¥ï¼å®è£ ä¾èµæå¼å½ä»¤è¡ï¼åæ¢å°ä½ å·²æé¡¹ç® Podfile è¿ä¸ªæ件åå¨çç®å½ï¼æ§è¡ pod installï¼æ²¡æåºç°ä»»ä½é误表示已ç»å®æç¯å¢é ç½®ã 第ä¸æ¥ï¼åå§å Weex ç¯å¢å¨ AppDelegate.m æ件ä¸ååå§åæä½ï¼ä¸è¬ä¼å¨ didFinishLaunchingWithOptions æ¹æ³ä¸å¦ä¸æ·»å ã //business configuration[WXAppConfiguration setAppGroup:@"AliApp"];[WXAppConfiguration setAppName:@"WeexDemo"];[WXAppConfiguration setAppVersion:@"1.0.0"];//init sdk enviroment [WXSDKEngine ini tSDKEnviroment];//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 InstanceWeex æ¯ææ´ä½é¡µé¢æ¸²æåé¨å渲æ两ç§æ¨¡å¼ï¼ä½ éè¦åçäºæ æ¯ç¨æå®ç URL 渲æ Weex ç viewï¼ç¶åæ·»å å°å®çç¶å®¹å¨ä¸ï¼ç¶å®¹å¨ä¸è¬é½æ¯ 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]; [wea kSelf.view addSubview:weakSelf.weexView]; }; _instance.onFailed = ^(NSError *error) { //process failure }; _instance.renderFinish = ^ (UIView *view) { //process renderFinish }; [_instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];} WXSDKInstance æ¯å¾éè¦çä¸ä¸ªç±»ï¼æä¾äºåºç¡çæ¹æ³åä¸äºåè°ï¼å¦ renderWithURL, onCreate, onFailed çï¼å¯ä»¥åè§ WXSDKInstance.h ç声æã 第äºæ¥ï¼éæ¯ Weex Instance å¨ viewController ç dealloc é¶æ®µ éæ¯æ Weex instanceï¼éæ¾å åï¼é¿å é æå åæ³é²ã - (void)dealloc{ [_instance destroyInstance];} å¯¼å ¥ Weex SDK framework å°å·¥ç¨ å¯ä»¥éè¿æºç ç¼è¯åº Weex SDKï¼å¯ä»¥å¨æ°ç feature æè bugfix åæ¯ï¼å°è¯ææ°ç featureã åèæ¤å¤ç´æ¥å¯¼å ¥ weexSDKã","type":"guide"},{"title":"æ建å¼åç¯å¢","path":"cn/guide/set-up-env.html","permalink":"https://weex.apache.org/cn/gu ide/set-up-env.html","text":"æ建å¼åç¯å¢ä½¿ç¨ dotWe 对 Weex å°é²æ¯ä¸ä¸ªä¸éçéæ©ï¼ä½å¦æä½ æ³æ´ä¸ä¸çå¼å Weexï¼ dotWe å°±ä¸æä¹å¤ç¨äºãæ¬èä¼æä½ å¦ä½æ建æ¬å°å¼åç¯å¢è¿è¡ Weex å¼åã 第ä¸æ¥ï¼å®è£ ä¾èµWeex å®æ¹æä¾äº weex-toolkit çèææ¶å·¥å ·æ¥è¾ å©å¼ååè°è¯ãé¦å ï¼ä½ éè¦ Node.js å Weex CLiã å®è£ Node.js æ¹å¼å¤ç§å¤æ ·ï¼æç®åçæ¹å¼æ¯å¨ Node.js å®ç½ ä¸è½½å¯æ§è¡ç¨åºç´æ¥å®è£ å³å¯ã å¯¹äº Macï¼å¯ä»¥ä½¿ç¨ Homebrew è¿è¡å®è£ ï¼ brew install node æ´å¤å®è£ æ¹å¼å¯åè Node.js å®æ¹ä¿¡æ¯ å®è£ å®æåï¼å¯ä»¥ä½¿ç¨ä»¥ä¸å½ä»¤æ£æµæ¯å¦å®è£ æåï¼ $ node -vv6.3.1$ npm -v3.10.3 é常ï¼å®è£ äº Node.js ç¯å¢ï¼npm å 管çå·¥å ·ä¹éä¹å®è£ äºãå æ¤ï¼ç´æ¥ä½¿ç¨ npm æ¥å®è£ weex-toolkitã npm æ¯ä¸ä¸ª JavaScript å 管çå·¥å ·ï¼å®å¯ä»¥è®©å¼åè è½»æ¾å ±äº«åéç¨ä»£ç ãWeex å¾å¤ä¾èµæ¥èªç¤¾åºï¼åæ ·ï¼Weex ä¹å° å¾å¤å·¥å ·åå¸å°ç¤¾åºæ¹ä¾¿å¼åè 使ç¨ã 注æ: weex-toolkit å¨ 1.0.1 ä¹åææ¯æåå§å Vue 项ç®ï¼ä½¿ç¨å请确认çæ¬æ¯å¦æ£ç¡®ã $ npm install -g weex-toolkit$ weex -vv1.0.3weex-builder : v0.2.4weex-previewer : v1.3.4 å½å å¼åè å¯ä»¥èè使ç¨æ·å®ç npm éå ââ cnpm å®è£ weex-toolkit $ npm install -g cnpm --registry=https://registry.npm.taobao.org$ cnpm install -g weex-toolkit æç¤ºï¼ å¦ææ示æéé误ï¼permission errorï¼ï¼ä½¿ç¨ sudo å ³é®åè¿è¡å®è£ $ sudo cnpm install -g weex-toolkit å®è£ ç»æåä½ å¯ä»¥ç´æ¥ä½¿ç¨ weex å½ä»¤éªè¯æ¯å¦å®è£ æåï¼å®ä¼æ¾ç¤º weex å½ä»¤è¡å·¥å ·ååæ°ï¼ 第äºæ¥ï¼åå§åç¶ååå§å Weex 项ç®ï¼ $ weex init awesome-project æ§è¡å®å½ä»¤åï¼å¨ awesome-project ç®å½ä¸å°±å建äºä¸ä¸ªä½¿ç¨ Weex å Vue ç模æ¿é¡¹ç®ã 第ä¸æ¥ï¼å¼åä¹åæ们è¿å ¥é¡¹ç®æå¨è·¯å¾ï¼weex-toolkit å·²ç»ä¸ºæ们çæäºæ å项ç®ç»æã å¨ package. json ä¸ï¼å·²ç»é 置好äºå 个常ç¨ç npm scriptï¼åå«æ¯ï¼ build: æºç æå ï¼çæ JS Bundle dev: webpack watch 模å¼ï¼æ¹ä¾¿å¼å serve: å¼å¯éææå¡å¨ debug: è°è¯æ¨¡å¼ æ们å éè¿ npm install å®è£ 项ç®ä¾èµãä¹åè¿è¡ npm run dev å npm run serve å¼å¯watch 模å¼åéææå¡å¨ã ç¶åæ们æå¼æµè§å¨ï¼è¿å ¥ http://localhost:8080/index.html å³å¯çå° weex h5 页é¢ã åå§åæ¶å·²ç»ä¸ºæ们å建äºåºæ¬ç示ä¾ï¼æ们å¯ä»¥å¨ src/foo.vue ä¸æ¥çã 代ç å¦ä¸æç¤ºï¼ <template> <div class=\"wrapper\"> <text class=\"weex\">Hello Weex !</text> <text class=\"vue\">Hello Vue !</text> </div></template><style scoped> .wrapper { flex-direction: column; justify-content: center; } .weex { font-size: 60px; text-align: center; color: #1B90F7; } .vue { font-size: 60px; text-align: center; margin-top: 30px; color: #41B883; }</style&g t; å ³äº Weex è¯æ³é¨åï¼ä½ å¯ä»¥ç´æ¥åè Vue Guideï¼è¿éä¸åéå¤ä»ç»ãå¦ææ¨æ³äºè§£æå ³ææ¯è¯¦æ çæ´å¤ä¿¡æ¯ï¼è¯·ç»§ç»é 读ä¸ä¸èã并ä¸ä¸è¦å¿è®°å¨ dotWe å代ç 并éæ¶é¢è§ã","type":"guide"},{"title":"é¢è²å称å表","path":"cn/references/color-names.html","permalink":"https://weex.apache.org/cn/references/color-names.html","text":"Weex æ¯æçææé¢è²å称åºç¡é¢è²å ³é®è¯: é¢è²å åå è¿å¶RGBå¼ black(é») #000000 silver(é¶) #C0C0C0 gray(ç°) #808080 white(ç½) #FFFFFF maroon(è¤ç´«çº¢) #800000 red(红) #FF0000 purple(ç´«) #800080 fuchsia(æ樱) #FF00FF green(绿) #008000 lime(ç³ç°) #00FF00 olive(æ©æ¦) #808000 yellow(é») #FFFF00 navy(æµ·åè) #000080 blue(è) #0000FF teal(æ°´é¸) #008080 aqua(æ°´è) #00FFFF æ©å±é¢è²å ³é®è¯: é¢è²å åå è¿å¶RGBå¼ aliceblue #F0F8FF antiquewhite #FAEBD7 aqua #00FFFF aquamarine #7FFFD4 azure #F0FFFF beige #F5F5DC bisque #FFE4C4 black #000000 blanchedalmo nd #FFEBCD blue #0000FF blueviolet #8A2BE2 brown #A52A2A burlywood #DEB887 cadetblue #5F9EA0 chartreuse #7FFF00 chocolate #D2691E coral #FF7F50 cornflowerblue #6495ED cornsilk #FFF8DC crimson #DC143C cyan #00FFFF darkblue #00008B darkcyan #008B8B darkgoldenrod #B8860B darkgray #A9A9A9 darkgreen #006400 darkgrey
<TRUNCATED>
![https://alibaba.github.io/weex/img/[email protected]](https://alibaba.github.io/weex/img/weex_logo_b...@3x.png){kind=link}