[2/3] incubator-weex-site git commit: Site updated: 2018-01-18 14:14:21

[ha...@apache.org]

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/2dbeb8c9/content.json
----------------------------------------------------------------------
diff --git a/content.json b/content.json
index b215332..220bc30 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":"Development Process","path":"development-process.html","permalink":"https://weex.apache.org/development-process.html","text":"Development Process#This document describes how to contribute changes to the Weex source code. Below are the recommended steps. 1. Choose or Create a JIRA issue#Generally, Weex uses JIRA Issue to track all types of code changes and not just bug fixes, and uses Github pull requests to manage the
  review and merge of specific code changes. That is, JIRAs are used to describe what should be fixed or changed, and high-level approaches, and pull requests describe how to implement that change in the project’s source code. Be sure to search the issues before creating new ones to avoid duplication. If your change may be controversial, you may want to create a discussion in the weex-dev mailing list. Every pull request should correspond to a issue in JIRA. 2. Develop Your Changes# Fork the Github repository at https://github.com/apache/incubator-weex if you haven’t already. Clone your fork, create a new branch to push your commits to. Develop your feature or bug fix. Make sure your changes meet the code style guidelines. Copy and paste this to the top of your new file(s): /* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright owner
 ship. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * \"License\"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ Documentation and tests should be added or referenced if they need to be added or updated as part of the change. Commit to your branch following commit guidelines. 3. Create a Pull Request#Open a pull request against the master branch of apache/incubator-weex. Make sure it meets these guidelines: One pull request for one issue The PR title should be of the form [WEEX-xxxx][COMPONENT] Summary, where xxxx is the rel
 evant JIRA number, COMPONENT is one of the PR categories(android, iOS, jsfm, web, doc, website, example, test, other) and Title may be the JIRA’s title or a more specific title describing the PR itself. If the pull request is still a work in progress, and so is not ready to be merged, but needs to be pushed to Github to facilitate review, then add [WIP] after the component. Code Style Guidelines#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 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. Commit Guidelines#Use the fo
 llowing form to write commit descriptions: Summary of change, same as PR title: `[WEEX-xxxx][COMPONENT] Summary`Longer description of change addressing as appropriate: why the changeis made,context if it is part of many changes, description of previous behavior and newly introduced differences, etc.Long lines should be wrapped to 80 columns for easier log message viewing interminals.Bug: 123456 A short subject and a blank line after the subject are crucial. Use the bug number from the JIRA issue. Some good thoughts on how to write good git commit messages can be found here.","type":"community"},{"title":"How to Contribute","path":"contributing.html","permalink":"https://weex.apache.org/contributing.html","text":"How to Contribute#Apache Weex is an open source project which is under active development, developers can participate and contribute to the Apache Weex community in a variety of ways. Contributing doesn’t just mean contributing code, reporting bugs, answering questions, jo
 ining in discussions and contributing documentation are also welcome. Report Bugs#You can use Weex directly through Get Started tutorial. If you encounter any unexpected phenomena during your use, feel free to let us know by filing a bug report. Open a JIRA Issue , click on the top red “Create” button (you may need to create a JIRA account if you haven’t registered). Bug Report Guidelines document provides some of the most useful information about writing a good bug report. The better your bug report is, the faster we can reproduce and fix it! Ask or Answer Questions#For basic use problems and help, we suggest you ask questions on stackoverflow.com and mark them with weex tag. You can also view all Weex related issues, answer some of the questions if you can, this will also help you get familiar with basic concepts and common misunderstandings about Weex, which can be useful when contributing documentation or code. Join in Discussions#In Weex community, most discussions happen
  on the mailing list. Dev mailing list dev@weex.incubator.apache.org is the place where Weex developers exchange ideas and discuss new features, new releases and the development process. Contributors and developers should subscribe to this list and follow it in order to keep up to date on what’s happening in Weex.(subscribe) (unsubscribe) (archives) Contribute Documentation#Documentation with good quality is a great help to developers. If there is a powerful API that is not easy to use, it becomes useless. So, we welcome any contributions to help Weex’s documents become precise and easy to read. To make changes to the document, you can edit the corresponding Markdown file at the weex-site repository and create a pull request. Contribute Code#If you have already decided to start writing code in Weex and contributing your fix and features to the project, congratulations! You’re up and running. For details on starting to work on a code contribution, please read Development Proces
 s. How to Become a Committer#Committers are core members of the community who can access the project’s repository and modify its code, documentation and web sites, as well as accept the contributions of other developers. There’s no exact criteria for becoming a committer, we are looking for contributors who are actively involved in community contributions and who have continued interest in Weex. If you are interested in becoming a Weex committer, contact any existing committer and we will help you go through the invitation process.","type":"community"},{"title":"Resources","path":"resources.html","permalink":"https://weex.apache.org/resources.html","text":"About Weex Project# Weex Official Website (weex.apache.org). Mirror in Alibaba Cloud (weex-project.io), faster in China. Weex Project Incubation Status. Mailing List. Issues. Weex Contributing GuideA guidance document tells you how to be submitted by the person weex and how to participate in mailing discussions. Weex FAQ. Supp
 orted Front-end Frameworks# RaxRax is a front-end framework with React-compatible APIs. Vue.jsVue.js is a progressive front-end framework for building user interfaces. Components and Modules# Weex UiWeex Ui is a rich interaction, lightweight, high performance UI library. Weex MarketA website that provides a quick porting of weex’s third-party component list, where you can find the weex components you need for integration. Tools# Online PlaygroundA website provides weex code practice and preview, as well as a convenient sharing platform. Playground AppYou can preview weex on the Playground App and learning how to use weex on it. Weex Language support for IntellijA plugin supports Weex Language for Intellij. Community# SegmentFault (cn) StackOverflow Telegram Russian Community Group Gitter for weex-en Posts# Weex Articles(cn). Examples# Weex Vue Examples","type":"community"},{"title":"Who is Using Weex?","path":"who-is-using-weex.html","permalink":"https://weex.apache.org/who-is-usi
 ng-weex.html","text":"","type":"community"},{"title":"","path":"cn/blog.html","permalink":"https://weex.apache.org/cn/blog.html","text":"","type":"blog"},{"title":"如何参与贡献","path":"cn/contributing.html","permalink":"https://weex.apache.org/cn/contributing.html","text":"如何参与贡献#Apache Weex 是一个活跃的开源项目，开发者可以通过多种方式参与和贡献 Apache Weex 社区。贡献并不仅仅意味着贡献代码，报bug、回答问题、参与讨论以及帮助提升文档质量也都属于贡献的一部分。 报 Bug#直接通过快速上手教程开始使用 Weex，如果在使用过程中遇到任何问题和不符合预期的现象，都可以通过写一个 bug 报告来反馈。 打开 JIRA Issue ，点击最上方红色的 “Create” 按钮（如果还没有注册 JIRA 账号则需要先注册一下）， Bug 报告指南 文档提供了一些关于 Bug 报告中最有用的信息的细节提示。你的 Bug 报告写得越好，我�
 ��就能越快地重现和修复它！ 提问或者回答问题#对于使用上的问题，建议你在 stackoverflow.com 平台上提问， 记得用 weex 标签标记它们。 你也可以查看所有的 Weex相关问题，如果可以的话，尽可能帮助回答一些问题，这些问题常常是新手需要了解的基本概念和常见问题， 这也将帮助你更好地熟悉和使用 Weex 。 参与邮件组讨论#在 Weex 社区，大多数讨论都发生在邮件列表上。 dev 邮件组 dev@weex.incubator.apache.org 是 Weex 开发人员交流和讨论新功能、新发布、开发流程的地方。 贡献者和开发者都应该订阅这个邮件组，以便了解到 Weex 项目所发生的事情以及表达自己的观点。 (订阅) (退订) (档案) 帮助提升文档质量#质量好的文档对开发者是极大的帮助。如果有一个功能强大的 API 但不易于使用，它就会变得毫无用处。所以， 我们欢迎任何贡献以帮助 Weex 的文�
 ��变得精确和易于阅读。 想要对文档进行更改，可以在 weex-site 仓库编辑对应的 Markdown 文件并创建一个 Pull Request. 贡献代码#如果你已经决定开始在 Weex 中编写代码，并为项目贡献你的修复和新特性， 在你从你 fork 的仓库提交一个 pull request 之前，请一定遵循我们的 开发流程。 如何成为 Committer#Apache committer 是社区的核心成员，他们可以访问项目的仓库，也可以自己修改代码、文档和网站，也可以接受其他开发者的贡献。 我们正在招募 committer，我们所寻找的是积极参与到社区贡献同时对 Weex 有持续兴趣的同学。如果你有兴趣成为一名 Weex committer，可以联系现有的 committer 或者直接联系 dev 邮件组，欢迎你的加入！","type":"community"},{"title":"开发流程","path":"cn/development-process.html","permalink":"https://weex.apache.org/cn/development-process.html","text":"开发流程#本文档�
 ��述了如何对 Weex 源代码进行更改和提交，以下是建议的步骤： 1. 选择或创建一个 JIRA issue单#目前 Weex 使用 JIRA Issue 来跟踪所有类型的代码更改，而不仅仅是 bug 修复，我们使用 Github Pull Request 来管理代码 review 和合并特定的代码更改。也就是说，JIRA用于描述什么是需要修复或更改的，Pull Request 用于描述这些修复和变更如何实现。 在创建新问题之前一定要先搜索问题，避免重复。如果你的更改可能需要和其他开发者进行讨论，你可以在 weex-dev 邮件列表中创建一个讨论。 每个 PR 都应该对应于 JIRA 中的一个 issue。 2. 编写代码# Fork 在 https://github.com/apache/incubator-weex 上的 Github 仓库 Clone 你 fork 出来的仓库，创建一个新的分支用于提交变更 编写需要开发的特性或 bug 修复代码，确保你的更改符合代码风格指南。 复制并粘贴下面的注释到你的新文件顶部
 : /* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * \"License\"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ 修改或添加该变更相关de的文档和测试。 提交符合 commit 指南 的 commit 到你的分支。 3. 创建一个 Pull Request#创建一个 pull request 并提交到 apache/incubator-weex 的 m
 aster 分支，确保它符合这些准则: 一个 Pull Request 只解决一个问题 PR标题应该是 [WEEX-xxxx][模块]标题，其中 xxxx 是相关的 JIRA 问题号，模块是 PR 的类别（android、iOS、jsfm、web、component、doc、website、test、other），标题可以是 JIRA 的标题，也可以是描述 PR 本身的更具体的标题。 如果该 PR 相关的工作还在进行中，还没有准备好被合并，但需要被推到 Github 上以方便查看，可以在模块后添加 [WIP] 标示。 代码风格指南#Objective-C# 用 tab 缩进而不是空格 * 操作符靠近变量名（如 Type *variable） 方法定义：大括号需要另起一行 其他大括号：开括号紧跟在代码后面，不另起一行，闭括号单独占一行 使用 #pragma marks 标记将方法分类 遵循 GitHub Objective-C Style Guide 中其他的代码风格指南 Java & Android# 使用 Google Java Style 作为基本的 Java 代码风格指南 其他 android 相关代�
 �需遵循 AOSP Code Style Commit 指南#使用下面的形式来写 commit 描述: Summary of change, same as PR title: `[WEEX-xxxx][COMPONENT] Summary`Longer description of change addressing as appropriate: why the changeis made,context if it is part of many changes, description of previous behavior andnewly introduced differences, etc.Long lines should be wrapped to 80 columns for easier log message viewing interminals.Bug: 123456 一个简短的主题紧跟一个空行再接着写 commit 的详细描述，Bug 这里使用的是来自 JIRA 的问题号。 在这里可以找到一些关于如何编写 commit message 的好方法。","type":"community"},{"title":"资源","path":"cn/resources.html","permalink":"https://weex.apache.org/cn/resources.html","text":"","type":"community"},{"title":"谁在使用 Weex？","path":"cn/who-is-using-weex.html","permalink":"https://weex.apache.org/cn/who-is-using-weex.html","text":"","type":"community"},{"title":"Extend Android","path":"guide/ex
 tend-android.html","permalink":"https://weex.apache.org/guide/extend-android.html","text":"Android extend# Weex supports module-extend、component-extend and adapter-extend. Module extend# Customize modules class must extend from WXModule. Extended method must add @JSMethod (uiThread = false or true) annotation, which determines whether the method is run on UI thread. The access level of mehtod must be public. Do not obfuscate code using tools like ProGuard. Extended method suppport the data type of int, double, float, String, Map, List as its param. Register the module: WXSDKEngine.registerModule("myModule", MyModule.class);or else may report an error: ReportException :undefined:9: TypeError: Object #<Object> has no method 'xxx' . Refer to the following example: public class MyModule extends WXModule{ //run ui thread @JSMethod (uiThread = true) public void printLog(String msg) { Toast.makeText(mWXSDKInstance.getContext(),msg,Toast.LENGTH_SHORT).sho
 w(); } //run JS thread @JSMethod (uiThread = false) public void fireEventSyncCall(){ //implement your module logic here }} Register the module WXSDKEngine.registerModule(\"MyModule\", WXEventModule.class); Use this module in weex DSLNow event moudle is avaiable in weex, use the module like this: <template> <div> <text onclick=\"click\">testMyModule</text> </div></template><script> module.exports = { methods: { click: function() { weex.requireModule('myModule').printLog(\"I am a weex Module!\"); } } }</script> Javascript callback#If the module need implement a callback to javascript, you just add JSCallback argument to the method you want expose to javascript: @WXModuleAnnopublic void openURL(String url,JSCallback callback){ //implement your module logic here Map<String,Object> resp = new HashMap(); resp.put(\"result\",\"ok\"); callback.invoke(resp);} At the javascript si
 de, call the module with javascript function to receive callback data: event.openURL(\"http://www.github.com\",function(resp){ console.log(resp.result); }); Component extend# Customize components must extend from WXComponent or WXContainer Use the @WXComponentProp(name = value(value is attr or style)) annotation to let the update of attribute or style be recognized automatically. The access levels of mehtod must be public Customize can not be obfuscated by tools like ProGuard Component method with the annotation of @JSMethod can Weex params can be int, double, float, String, Map, List, Array Register your Component by WXSDKEngine.registerComponent Refer to the following example public class RichText extends WXComponent { public RichText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, boolean isLazy) { super(instance, dom, parent, isLazy); } @Override protected void initView() { mHost=new TextView(mContext); ((TextView)mHost).setMovementMet
 hod(LinkMovementMethod.getInstance()); } @WXComponentProp(name = \"tel\") public void setTelLink(String tel){ SpannableString spannable=new SpannableString(tel); spannable.setSpan(new URLSpan(\"tel:\"+tel),0,tel.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); ((TextView)mHost).setText(spannable); }} Register your Component： WXSDKEngine.registerComponent(\"MyView\",MyViewComponent.class); Use this component in weex DSL： <template> <div> <richText tel=\"12305\" style=\"width:200;height:100\">12305</text> </div></template> Extend Component Method# WeexSDK (0.9.5+) support the component method that can be invoked for example： @JSMethodpublic void focus(){ //method implementation} after your registration for your own custom component, now you can call it in your js file. <template> <mycomponent id='mycomponent'></mycomponent></template><script> module.exports = { created: function() &#
 123; this.$el('mycomponent').focus(); } }</script> Extend adapter#ImagedownloadAdapter#Weex SDK has no image download capability, you need to implement IWXImgLoaderAdapter. Refer to the following examplepublic class ImageAdapter implements IWXImgLoaderAdapter { public ImageAdapter() { } @Override public void setImage(final String url, final ImageView view, WXImageQuality quality, WXImageStrategy strategy) { WXSDKManager.getInstance().postOnUiThread(new Runnable() { @Override public void run() { if(view==null||view.getLayoutParams()==null){ return; } if (TextUtils.isEmpty(url)) { view.setImageBitmap(null); return; } String temp = url; if (url.startsWith(\"//\")) { temp = \"http:\" + url; } if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) { return; } Picasso.with(WXEnvironment.getApplication()) .load(temp) .into(view); } },0); }} Proguard Rules#If
  you want to using proguard to protect your source code, please add the following rules to your profile: -keep class com.taobao.weex.WXDebugTool{*;}-keep class com.taobao.weex.devtools.common.LogUtil{*;}-keepclassmembers class ** { @com.taobao.weex.ui.component.WXComponentProp public *;}-keep class com.taobao.weex.bridge.**{*;}-keep class com.taobao.weex.dom.**{*;}-keep class com.taobao.weex.adapter.**{*;}-keep class com.taobao.weex.common.**{*;}-keep class * implements com.taobao.weex.IWXObject{*;}-keep class com.taobao.weex.ui.**{*;}-keep class com.taobao.weex.ui.component.**{*;}-keep class com.taobao.weex.utils.**{ public <fields>; public <methods>; }-keep class com.taobao.weex.view.**{*;}-keep class com.taobao.weex.module.**{*;}-keep public class * extends com.taobao.weex.common.WXModule{*;}-keep public class * extends com.taobao
 .weex.ui.component.WXComponent{*;}-keep class * implements com.taobao.weex.ui.IExternalComponentGetter{*;}","type":"guide"},{"title":"Extend iOS","path":"guide/extend-ios.html","permalink":"https://weex.apache.org/guide/extend-ios.html","text":"Notice#All of the exported APIs in Weex are controllable and safe, they can not access private APIs or do any system hacks at runtime, neither can they change the primary purpose of the Application. If you are extending your custom modules/components, be sure NOT to export the ability of Objective-C runtime, be sure NOT to export dynamic and uncontrolled methods such as dlopen(), dlsym(), respondsToSelector:, performSelector:, method_exchangeImplementations(), be sure NOT to export any private methods. Module extend#Weex SDK provides only rendering capabilities, rather than have other capabilities, such as network, picture, and URL redirection. If you want these features, you need to implement it. For example: If you want 
 to implement an address jumping function, you can achieve a Module following the steps below. Step to customize a module# Module customized must implement WXModuleProtocol A macro named WX_EXPORT_METHOD must be added, as it is the only way to export methods to JavaScript. The weexInstance should be synthesized. Each module object is bind to a specific instance. Module methods will be invoked in UI thread, so do not put time consuming operation there. If you want to execute the whole module methods in other thread, please implement the method - (NSThread *)targetExecuteThread in protocol. In the way, tasks distributed to this module will be executed in targetExecuteThread. Weex params can be String or Map. Module supports to return results to Javascript in callback. This callback is type of WXModuleCallback, the params of which can be String or Map. @implementation WXEventModule@synthesize weexInstance;WX_EXPORT_METHOD(@selector(openURL:callback:))- (void)openURL:(NSString *)url call
 back:(WXModuleCallback)callback{ NSString *newURL = url; if ([url hasPrefix:@"//"]) { newURL = [NSString stringWithFormat:@"http:%@", url]; } else if (![url hasPrefix:@"http"]) { newURL = [NSURL URLWithString:url relativeToURL:weexInstance.scriptURL].absoluteString; } UIViewController *controller = [[WXDemoViewController alloc] init]; ((WXDemoViewController *)controller).url = [NSURL URLWithString:newURL]; [[weexInstance.viewController navigationController] pushViewController:controller animated:YES]; callback(@{@"result":@"success"});}@end export synchronous methods v0.10+#If you want to export synchronous methods which could make Javascript receive return values from natvie, you can use WX_EXPORT_METHOD_SYNC macro. native code: @implementation WXEventModuleWX_EXPORT_METHOD_SYNC(@selector(getString))- (NSString *)getString{ return @"testString";}@end js code: const eventMod
 ule = weex.requireModule('event')const returnString = syncTest.getString() // return \"testString\" You can alse return number/array/dictionary except string. notice: the exported synchronous native method can only be called on JS thread. Do not do heavy work which will block js execution. notice: Vue 2.0 has not supported this feature yet. It will be supported in version 0.12 at the soonest. Register the module#You can register the customized module by calling the method registerModule:withClass in WXSDKEngine. WXSDKEngine.h/*** @abstract Registers a module for a given name* @param name The module name to register* @param clazz The module class to register**/+ (void)registerModule:(NSString *)name withClass:(Class)clazz;[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]]; Handler extend#Weex SDK doesn’t have capabilitis, such as image download 、navigator operation，please implement these protocols by yourself. WXImgLoaderProtocol#Weex SDK has no ima
 ge download capability, you need to implement WXImgLoaderProtocol. Refer to the following examples. WXImageLoaderProtocol.h@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 Implement above protocol as follows. @implementation WXImgLoaderDefaultImpl#pragma mark -#pragma mark WXIm
 gLoaderProtocol- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock{ if ([url hasPrefix:@"//"]) { url = [@"http:" stringByAppendingString:url]; } return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) { } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) { if (completedBlock) { completedBlock(image, error, finished); } }];}@end Register the handler#You can register the handler which implements the protocol by calling registerHandler:withProtocol in WXSDKEngine. WXSDKEngine.h/*** @abstract Registers a handler for a given handler instance and specific protocol* @
 param handler The handler instance to register* @param protocol The protocol to confirm*/+ (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)]; Custom Native Components for iOS#Component extend#There are a lot of native components ready to be used in the Weex SDK, but users always have their own use cases. You might have written an awesome native UI widget in your previous work and just want to wrap up it and export to Weex. So we provide a way to enable developers to create their own custom fully-native components. This guide will use the implementation of existing component image to show you how to build a native component. It will also assume that you are familiar with iOS programming. Registration#Defining a custom native component is simple. Just call [WXSDKEngine registerComponent:withClass:] with the component’s tag name as first argument. [WXSDKEngine regi
 sterComponent:@"image" withClass:[WXImageComponent class]]; Then you can create a WXImageComponent class to represent the implementation of image component. Now you can use <image> wherever you want in the template. <image></image> Adding Properties#The next thing we can do is to extend some native properties to make the component more powerful. As an image, let’s say we should have a src attribute as image’s remote source and a resize attribute as image’s resize mode(contain/cover/stretch). @interface WXImageComponent ()@property (nonatomic, strong) NSString *imageSrc;@property (nonatomic, assign) UIViewContentMode resizeMode;@end All of the styles, attributes and events will be passed to the component’s initialization method, so here you can store the properties which you are interested in. @implementation WXImageComponent- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)at
 tributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance{ if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) { _imageSrc = [WXConvert NSString:attributes[@"src"]]; _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]]; } return self;}@end The properties getted in the attributes are of id type, so we have to convert them to the type we want using a conversion function. Basic conversion functions can be found in the WXConvert file, or you can just add your own conversion function. Hooking Render Life Cycle#A Native Component has a life cycle managed by Weex. Weex creates it, layout it, renders it and destroys it. Weex offers component life cycle hooks that give you visibility into these key moments and the ability to act when they occur. method description initWithRef:type:… Initializes a new component using the specified properties. layoutDi
 dFinish Called when the component has just laid out. loadView Creates the view that the component manages. viewWillLoad Called before the load of component’s view . viewDidLoad Called after the component’s view is loaded and set. viewWillUnload Called just before releasing the component’s view. viewDidUnload Called when the component’s view is released. updateStyles: Called when component’s style are updated. updateAttributes: Called when component’s attributes are updated. addEvent: Called when adding an event to the component. removeEvent: Called when removing an event frome the component. As in the image component example, if we need to use our own image view, we can override the loadView method. - (UIView *)loadView{ return [[WXImageView alloc] init];} Now Weex will use WXImageView to render the image component. As an image component, we will need to fetch the remote image and set it to the image view. This can be done in viewDidLoad method when the view is
  created and loaded. viewDidLoad is also the best time to perform additional initialization for your view， such as content mode changing. - (void)viewDidLoad{ UIImageView *imageView = (UIImageView *)self.view; imageView.contentMode = _resizeMode; imageView.userInteractionEnabled = YES; imageView.clipsToBounds = YES; imageView.exclusiveTouch = YES; // Do your image fetching and updating logic} If image’s remote source can be changed, you can also hook the updateAttributes: method to perform your attributes changing logic. Component’s view always has been loaded while updateAttributes: or updateStyles: is called. - (void)updateAttributes:(NSDictionary *)attributes{ if (attributes[@"src"]) { _imageSrc = [WXConvert NSString:attributes[@"src"]]; // Do your image updating logic } if (attributes[@"resize"]) { _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]]; self.view.contentMode = _resizeMode; &#1
 25;} Maybe there is even more life cycle hooks you might need to consider, such as layoutDidFinish while layout computing is finished. If you want to go deeper, check out the WXComponent.h file in the source code. Now you can use <image> and its attributes wherever you want in the template. <image style=\"your-custom-style\" src=\"image-remote-source\" resize=\"contain/cover/stretch\"></image> Component Method#from WeexSDK 0.9.5, you can define your component method by macro WX_EXPORT_METHODfor example: @implementation WXMyComponent +WX_EXPORT_METHOD(@selector(focus)) +- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance { if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) { // handle your attributes // handle your styles } retur
 n self; } - (void)focus { NSLog(@"you got it"); }@end after your registration for your own custom component, now you can call it in your js file. <template> <mycomponent ref='mycomponent'></mycomponent></template><script> module.exports = { created: function() { this.$refs.mycomponent.focus(); } }</script>","type":"guide"},{"title":"Extend JS framework","path":"guide/extend-js-framework.html","permalink":"https://weex.apache.org/guide/extend-js-framework.html","text":"Extend JS framework#This part of the extension of JS framework is still in the discussion, may be adjusted at any time, please pay attention. Weex wants to be able to respect as many developer development habits as possible.So, in addition to Weex official support Vue 2.0, the developer can also customize and horizontally extension their own or their favorite JS Framework.The steps to customize the JS Framework are as follows: First you ha
 ve a complete set of JS Framework. Learn about Weex’s JS engine feature support. Adapting Weex’s native DOM APIs. Adapting Weex’s initialization portal and multi-instance management mechanism. Add your own JS Framework to the framework configuration of the Weex JS runtime. Then pack it. Build JS bundles based on the JS Framework. You need to add a specific prefix comment so that the Weex JS runtime can recognize it. Weex JS engine features support# Under iOS, Weex uses the JavaScriptCore that comes with the system, so the ES support depends on the version of the operating system.The current conservative judgments, ES5 features on the market mainstream iOS devices are perfectly supported, but some of the features of ES6 + is not supported. Under Android, Weex uses the v8 kernel provided by UC. For performance and stability considerations, we are not using the latest version of the v8 kernel.The same conservative judgment, the ES5 feature can all support, including strict mode O
 bject.freeze and so on. The Weex JS engine does not support HTML DOM APIs and HTML5 JS APIs, including document, setTimeout`, and so on. We added Promise‘s polyfill, as well as the console‘s polyfill. In addition, in order to ensure that the JS engine can manage memory as much as possible, we have a generic global object for the Object.freeze () freeze operation, which includes: Object Object.prototype Array Array.prototype String.prototype Number.prototype Boolean.prototype Error.prototype Date.prototype RegExp.prototype Adapt to Weex’s initial entry and multi-instance management mechanism#The JS Framework provided by the developer needs to be packaged as a CommonJS package, and the package needs to be extension to the following methods: Framework initialization# init(config) config Document Element Comment TaskSender CallbackManager This method places the Native DOM class and two auxiliary classes provided by Weex in the config parameter and allows the framework itself to be
  initialized. Tip: At the same time, the author can pass in a different config in the framework of the initialization time. This allows for framework testing or environmental simulation. Introduction to parameter format# TaskSender: wip… CallbackManager: wip… Register available native components and modules# registerComponents(components) registerModules(modules) These two methods are called immediately after the frame is initialized. This framework will be able to know which components and modules the current client supports. Introduction to parameter format# components: Array: Describe the array of components, each of which includes: type: string: Component name, for example div。 methods: string[]: Optional, a list of method names supported by this component. These methods can follow the native DOM APIs call. modules: Object: Describe the hash table of a series of modules. Key is the module name, the value is an array. The elements of the array describe a method in the modul
 e. The information of the method includes: name: string: Method name args: string[]: Parameter number and type description E.g: registerComponents([ { type: 'web', methods: ['goBack', 'goForward', 'refresh']}])registerModules({ event: [ {name: 'openURL', args: ['string']} ]}) Multi - instance lifecycle management# createInstance(instanceId, code, config, data, env) refreshInstance(instanceId, data) destroyInstance(instanceId) Each Weex page has two stages: created and destroyed. At the same time in the Weex page running process, native can send messages to the Weex page. Different frameworks can follow their own ideas to achieve the message. Introduction to parameter format# instanceId: string: The unique id of the Weex page is generated by native. code: string:The Wex page’s JS bundle’s code is passed through native. config: Object?: The configuration information for the Wex page, such as the bundleUrl representing the bundle address, is generated 
 by the native configuration. It has nothing to do with the contents of the JS bundle itself. data: Object?: Native can import an external data when creating a Weex page. The JS framework can also generate different page content for the same JS bundle with different data. env: Object?:The current environment information about the Weex page, the meaning of each field: info: Object: Framework information, see the “JS Bundle format requirements” later. config: Object:Equivalent to the third parameter of the method config callbacks: CallbackManager: only CallbackManagerinstance of Weex page. created: number:The number of seconds that the Wex page was created. framework: string:The name of the framework used by the Wex page. Equivalent to info.framework. Native communication# receiveTasks(instanceId, tasks) Native can use the refreshInstance method to send a message to the JS framework layer. But in many cases will use receiveTasks to send user events or methods callback to the JS fra
 mework. For example, if the user clicks on a button, native will send a fireEvent type of task to the JS framework, and then the JS framework will handle the corresponding event logic. This part of the working mechanism is related to the design of the addEvent in the native DOM interface. Another example is the user using fetch to send network requests. When the request is done at the native end, it will be sent to the JS framework with a callback type of task. Since native can not pass the function in JavaScript, it actually only sends a callbackId to the JS framework. This part of the working mechanism is related to the design of CallbackManager. Auxiliary method# getRoot(instanceId): JSON This method returns the full JSON description of the document body node. Developers can view the full native DOM tree as a result. The format of the specific return value is the same as the return method of the toJSON () method in the native DOM interface. This feature is used extensively as a d
 eveloper tool extension. Configure the JS Framework in WeexSDK#Prepare your JS Framework code#// your-own-js-framework.jsexport function init (config) { ... }export function registerComponents (components) { ... }export function registerModules (modules) { ... }export function createInstance (id, code, config, data, env) { ... }export function destroyInstance (id) { ... }export function refreshInstance (id, data) { ... }export function recieveTasks (id, tasks) { ... }export function getRoot (id) { ... } Register a JS Framework#import * as Vue from '...'import * as React from '...'import * as Angular from '...'export default { Vue, React, Angular }; And then packaged JS runtime, integrated into WeexSDK. JS Bundle format requirements#Framework infoThe note(alias framework info) at the beginning of the JS Bundle file is very important. The format is as follows: // { \"framework\": \"Vue\" &#1
 25; So that the Weex JS engine will know that the JS bundle needs to use the Vue framework to resolve.Similarly, Weex supports multiple frameworks.It will be based on js bundle notes to select the corresponding framework resolution.","type":"guide"},{"title":"Extend Web Renderer","path":"guide/extend-web-render.html","permalink":"https://weex.apache.org/guide/extend-web-render.html","text":"Extend Web components#Vue.js is an independent front-end framework. In the browser, you can not use the Weex container for page rendering. So, the two things are the same: (1) for the Weex platform to expand Vue.js Web components. (2) directly using Vue.js to develop a Web component. The development of components can refer to its documentation: component. It is also recommended to use the file to write components. How to use it: [Single file component](https://vuejs.org/v2/guide/single-file-components.html).# Extend Web renderer's built-in componentsWeex itself offers a lot of built-in compo
 nents and modules, but also has the ability to expand horizontally. It allows developers to expand and customize themselves. But it is important to note that Weex is a cross-platform solution. When extending its built-in components or modules, you need to implement it on the three ends (Android, iOS, Web).After Weex switches the kernel to Vue 2.x, it will be easier to extend the Vue component on the Web side.We current use [weex-vue-render](https://github.com/weexteam/weex-vue-render) for Vue 2.x Web side rendering. Firstly import this library in your web page, then you can extend the render's built-in components using `weex.registerComponent` or `Vue.component`. Basically these two methods are doing the same thing.## Example of extension for weex built-in components.To extend ```<sidebar>``` as an example, you should first write the logic of the component itself:```html<!-- sidebar.vue --><template> <div class="sidebar"> <slot></slot&
 gt; </div></template><style scoped> .sidebar { /* ... */ }</style><script> export default { props: [], data () { return {} } }</script> And then register the component globally before using it:```javascriptimport Vue from 'vue'import weex from 'weex-vue-render'import Sidebar from './path/to/sidebar.vue'weex.init(Vue)// register the ```<sidebar>``` component globallyweex.registerComponent('sidebar', Sidebar)// or:// Vue.component('sidebar', Sidebar) When you extend the Weex component, if you only use the built-in components provided by Weex and use the styles that Weex supports, it is no different from the normal custom component and does not need to be implemented at the Native side. If you find a component that does not support labels and styles that are not supported by Weex, you will need to really extend the Weex component. At the same time, you als
 o need to extend in the Android side and the iOS side, or will lead to rendering exception. Extend the Web module#In addition to the common components, Weex also provides a common module, you can easily call the native API. In general, the registered Weex module requires three ends to be implemented, otherwise it will affect its normal use. Register the module#If we import the library, we can get the weex variable globally. You can register the module using the ```registerModule```method.## API format+ `registerModule` 1. ```name```: {String} Required, module name. 2. ```define```: {Object} Required, module definition. 3. `meta`: {Object} Optional, module meta info. Basically you won't need this except you want to pass a non iterable attribute or method from your module implementation object. In this case you should pass a `{ registerType: 'assignment' }` object to it. Otherwise only the iterables will be registered in the modul
 e.## The example of register moduleThe following code registers a module called guide:```javascriptweex.registerModule('guide', { greeting () { console.log('Hello, nice to meet you. I am your guide.') }, farewell () { console.log('Goodbye, I am always at your service.') }}) Use the module#Weex provides the require method for getting registered modules. You only need to pass the module name directly: //import moduleconst guide = weex.requireModule('guide')// use the methods of moduleguide.greeting()guide.farewell() The above wording is as useful as the native end, except that the methods in the module are provided by Native.","type":"guide"},{"title":"Front-End Frameworks","path":"guide/front-end-frameworks.html","permalink":"https://weex.apache.org/guide/front-end-frameworks.html","text":"Front-end Frameworks in Weex Vue.js Rax Front-end Frameworks in Weex#Front-end technologies seem flourishing and productive. Using front-
 end frameworks in production is a good way to manage apps wr. industry. collaborate, maintainable. However, Weex is not a front-end framework. Indeed, front-end frameworks are just the syntax layer or DSL (Domain-specific Language) of Weex, they are decoupled from native render engines. In another word, Weex does not relay on any specific front-end frameworks, with the evolution of technology, Weex can integrate more widely used front-end frameworks as well. Currently, Weex mainly supports Vue.js and Rax, and those frameworks are already integrated into Weex SDK, you don’t need to require them manually. Learn some basics of Vue.js or Rax could be very helpful when you are using Weex. It is better to learn some basics of Vue.js or Rax before using Weex. Vue.js#Weex integrated the v2 version of Vue.js since WeexSDK v0.10.0 is released at 2016/02/17. Vue (pronounced /vjuː/, like view) is a progressive front-end framework for building user interfaces. Please refer to its official web
 site for more information. Please refer to Use Vue.js on Weex document to learn more technics about Weex and Vue. Rax#Rax is a front-end framework with React-compatible APIs. Please refer to Rax’s official website to get more information.","type":"guide"},{"title":"Integrate Devtool to iOS","path":"guide/integrate-devtool-to-ios.html","permalink":"https://weex.apache.org/guide/integrate-devtool-to-ios.html","text":"Integrate Devtool to iOS#Weex devtools is a custom devtools for weex that implements Chrome Debugging Protocol inspired by Stetho, it is designed to help you quickly inspect your app and debug your JS bundle source in a Chrome web page. To make it work, at first you must integrate devtool to your App. This page will help you integrate devtool to your iOS App. Integrate to iOS#Installing Dependencies#There are two choices to install dependencies: No.1 From cocoapods#source https://github.com/CocoaPods/Specs.git，pod 'WXDevtool', '0.7.0', :configurati
 ons => ['Debug']， I strongly recommend you use the latest version since both Weex SDK and devtools are developed iteratively and rapidly. No.2 From source code# Get source code by GitHub. Copy source folder to your project. Choose options as the picture shows. Integrate#Step 1. Add header file in AppDelegate.m# From cocoapods: #import <TBWXDevtool/WXDevtool.h> ``- From source code #import “WXDevtool.h” #### Step 2. Initialize inspector when the APP launchedYou can see the WXDevtool header file as follows:```object-c#import <Foundation/Foundation.h>@interface WXDevTool : NSObject/*** set debug status* @param isDebug : YES:open debug model and inspect model;* default is NO,if isDebug is NO, open inspect only;* */+ (void)setDebug:(BOOL)isDebug;/*** get debug status* */+ (BOOL)isDebug;/*** launch weex debug* @param url : ws://ip:port/debugProxy/native, ip and port is your devtool server address* eg:@"ws://30.30.29.242:8088/debugProxy/native"* */+
  (void)launchDevToolDebugWithUrl:(NSString *)url;@end Note: The inspector API must be called before weex is initialized setDebug setDebug is used to control the state of debug mode, when its value is YES, open the debug mode, otherwise closed. (void)launchDevToolDebugWithUrl:(NSString *)url; wssip was the wss address showing in the chrome address bar. open debug model and inspector model eg： - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [WXDevTool setDebug:YES]; [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"]; } open inspect model, remove the @selector (setDebug:) or add [WXDevTool setDebug:NO] eg： - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"]; } Step 3. Auto refresh#Q: Why do we need auto refresh feature? A: As shown in 
 future, when you click the debugger button, Javascript runtime environment will change from the phone (JavaScriptCore) to PC (Chrome V8), then Weex need to re-initialize the Weex environment, re-render the page. Page rendering is required for the developer to add on its own page. Q: What kind of scene need to add refresh feature? Click debugger button Switch remoteDebug Refresh inspect page Q: How to add auto refresh feature? Register events when Weex initialization. [[NSNotificationCenter defaultCenter] addObserver:self selector:notificationRefreshInstance: name:@"RefreshInstance" object:nil]; Notes: You must cancel this event in the dealloc method. For example: - (void)dealloc{ [[NSNotificationCenter defaultCenter] removeObserver:self];} For example, First you can destroy the current instance, and then re-create instance: - (void)dealloc{ [[NSNotificationCenter defaultCenter] removeObserver:self];} 页面刷新实现，先销毁当前 instance，然�
 �重新创建 instance，举例如下: - (void)render { CGFloat width = self.view.frame.size.width; [_instance destroyInstance]; _instance = [[WXSDKInstance alloc] init]; _instance.viewController = self; _instance.frame = CGRectMake(self.view.frame.size.width-width, 0, width, _weexHeight); __weak typeof(self) weakSelf = self; _instance.onCreate = ^(UIView *view) { [weakSelf.weexView removeFromSuperview]; weakSelf.weexView = view; [weakSelf.view addSubview:weakSelf.weexView]; UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, weakSelf.weexView); }; _instance.onFailed = ^(NSError *error) { }; _instance.renderFinish = ^(UIView *view) { [weakSelf updateInstanceState:WeexInstanceAppear]; }; _instance.updateFinish = ^(UIView *view) { }; if (!self.url) { return; } NSURL *URL = [self testURL: [self.url absoluteString]]; NSString *randomURL = [NSString stringWithFormat:@"%@?random=%d",URL.absoluteString,a
 rc4random()]; [_instance renderWithURL:[NSURL URLWithString:randomURL] options:@{@"bundleUrl":URL.absoluteString} data:nil];} You can see the details in this case WXDemoViewController.m","type":"guide"},{"title":"Integrate Devtool to Android","path":"guide/integrate-devtool-to-android.html","permalink":"https://weex.apache.org/guide/integrate-devtool-to-android.html","text":"Integrate Devtool to Android#Weex devtools is a custom devtools for weex that implements Chrome Debugging Protocol inspired by Stetho, it is designed to help you quickly inspect your app and debug your JS bundle source in a Chrome web page. To make it work, at first you must integrate devtool to your App. This page will help you integrate devtool to your Android App. Integrate to Android#Installing Dependencies#Weex Devtools depend on weex_inspector. I strongly recommend you use the latest version since both Weex SDK and devtools are developed iteratively and rapidly. See the release ver
 sion list here. All the release version will publish to the jcenter repo. There are two choices to install it: From Gradle dependencies { compile 'com.taobao.android:weex_inspector:0.13.2'} From source code you need to copy the dir of inspector to the same dir of your app and add include ":inspector"in your project’s settings.gradle file just like playground have done, then add dependency in your app’s build.gralde. dependencies { compile project(':inspector')} Version compatibility# weex sdk weex inspector Debugger Server 0.8.0.1+ 0.0.8.1+ 0.2.39+ 0.7.0+ 0.0.7.13 0.2.38 0.6.0+ 0.0.2.2 - 0.16.0+ 0.12.1 - 0.17.0+ 0.13.2 - Adding Debug mode switch#The key to control the opening and closing of the debug mode can be summarized as three rules: No.1: Set the switch and Debugger Server addresses via sRemoteDebugMode and sRemoteDebugProxyUrl. WXEnvironment class has a pair of static variables mark Weex current debug mode: public static boolean sRemoteDebugM
 ode; // default closepublic static String sRemoteDebugProxyUrl; // Debugger Server addresses You have to set WXEnvironment.sRemoteDebugMode and WXEnvironment.sRemoteDebugProxyUrl at the right time, for example: private void initDebugEnvironment(boolean enable, String host) { WXEnvironment.sRemoteDebugMode = enable; WXEnvironment.sRemoteDebugProxyUrl = \"ws://\" + host + \":8088/debugProxy/native\";} You can find detail and suitable way of initialize inspector in Playground. No.2: You must call WXSDKEngine.reload() method when sRemoteDebugMode was changed. You can control a state of debug mode via the WXEnvironment.sRemoteDebugMode, but you need reset Weex runtime if you changed a state of debug mode. private void launchInspector(boolean remoteDebug) { if (WXEnvironment.isApkDebugable()) { try { if (mWxDebugProxy != null) { mWxDebugProxy.stop(); } HackedClass<Object> debugProxyClass = WXHack.into(\"com.taobao.weex.devtools.debug.DebugServerPro
 xy\"); mWxDebugProxy = (IWXDebugProxy) debugProxyClass.constructor(Context.class, WXBridgeManager.class) .getInstance(WXEnvironment.getApplication(), WXBridgeManager.this); if (mWxDebugProxy != null) { mWxDebugProxy.start(); if (remoteDebug) { mWXBridge = mWxDebugProxy.getWXBridge(); } else { if (mWXBridge != null && !(mWXBridge instanceof WXBridge)) { mWXBridge = null; } } } } catch (HackAssertionException e) { WXLogUtils.e(\"launchInspector HackAssertionException \", e); } }} In this way, You can control the debug mode flexibly. No.3: Auto refresh page via ACTION_DEBUG_INSTANCE_REFRESH broadcast ACTION_DEBUG_INSTANCE_REFRESH can be broadcast messages when the debug mode is switched or Chrome page refresh. You can use this mechanism to inform the current page to refresh in time. public class RefreshBroadcastReceiver extends BroadcastReceiver { @Override public void onReceive(Context context, Intent intent
 ) { if (IWXDebugProxy.ACTION_DEBUG_INSTANCE_REFRESH.equals(intent.getAction())) { if (mUri != null) { if (TextUtils.equals(mUri.getScheme(), \"http\") || TextUtils.equals(mUri.getScheme(), \"https\")) { loadWXfromService(mUri.toString()); } else { loadWXfromLocal(true); } } } }} Example#The easiest way is reuse the code of playground. On the other hand QR code is not necessary, if you review the source code you can draw a conclusion that QR CODE is just a way to set devtools server address. There are two examples of how to open debug modes in the Playground App: Set the debug mode via XXXApplication public class MyApplication extends Application { public void onCreate() { super.onCreate(); initDebugEnvironment(true, \"xxx.xxx.xxx.xxx\"/*\"DEBUG_SERVER_HOST\"*/); }} Set the debug mode by scan QR code You review the source code of playground. Debug mode switch control: WXApplication.java Refresh control WXPageA
 ctivity.java Known Issues#You can report issues and bugs here. We will reply as soon as possible.","type":"guide"},{"title":"Setup Develop Environment","path":"guide/set-up-env.html","permalink":"https://weex.apache.org/guide/set-up-env.html","text":"Setup Develop Environment#Using dotWe is a good choice, but if you want to develop locally on your own machine, you will need to set up your develop environment. You will need Node.js and the Weex CLI. Install Node.js 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 And npm comes with Node.js, with witch you can install the Weex command line tools. NOTE: After upgrading the weex-toolkit to v1.0.8, the npm-shrinkwrap.json npm 5 specification has been added to lock the package dependencies, it is needed to upgrade your npm version to 5 above by command: npm install npm @latest -g if your version is lower than this,
  please check your npm version before using it. Run the following commands in a terminal: $ npm install -g weex-toolkit$ weex -v You can use ‘weex update @x.x.x’ to update weex-devtool, weex-previewer, weex-builder and weexpack to a specific version.weex update weex-devtool@latest // Here latest means to install the latest version NOTE: If you receive an error like permission error, check out where permission problems occur, please delete the corresponding file and reinstall or run the chmod -R 777 [path] command to authorize. Then you can use the Weex command to verify if the installation is successful: Generate a new Weex project#Use the command line tool to generate a Weex project called “awesome-project”. Run the following command in a terminal: $ weex create awesome-project Then enter the awesome-project folder, you will see a standard project skeleton has been generated. Usage#The weex-toolkit will prompt you whether to automatically run npm install, if not running, ma
 nually into the folder and run npm install. In the awesome-project folder, install dependencies with the following command: npm start It will open the preview server automaticly, if you just want to see the web site, you can visite /index.html, like localhost:8081/index.html. NOTE When the port number is occupied, the port number may change, please pay attention to the console output. Folder Structure#| —— configs | —— config.js global config of webpack | —— helper.js helper functions | —— logo.png | —— plugin.js script for compile plugins | —— utils.js tool functions | —— vue-loader.conf.js loader config of weex | —— webpack.common.conf.js webpack configuration for common environment | —— webpack.dev.conf.js webpack configuration for develop environment | —— webpack.prod.conf.js webpack configuration for production environment | —— webpack.test.conf.js webpack configuration for test environment| —— platforms | —— platforms.json pl
 atform meta data| —— plugins | —— plugins.json plugin data| —— src | —— entry.js the entry file of whole bundle | —— index.vue vue file source| —— test | —— unit | —— specs test scripts | —— index.js source code and config test environment | —— karma.conf.js configuration for karma| —— web static source| —— .babelrc configuration for babel-loader| —— android.config.json configuration for packing android project| —— ios.config.json configuration for packing ios project| —— npm-shrinkwrap.json npm dependence lock file| —— package.json | —— README.md | —— webpack.config.js entry file of the webpack command For more technical details, please continue to read the next section. And don’t forget to write and preview your codes at dotWe.","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 App#Integrate to Android Platform#The following documents assume that you already have a certain Android development experience. Quick Start Five Steps#The keys to intergrating Weex into your Android application are the following five step: 1.Configure Gralde dependency in build.gradledependencies { ... // weex sdk and fastjson compile 'com.taobao.android:weex_sdk:0.5.1@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'} 2.Add required permissions in your AndroidManifest.xml <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\"/> 3.I
 nit Week SDK When Application Createpublic 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](https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/FrescoImageAdapter.java) [Picasso ImageAdapter](https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/ImageAdapter.java) 4. Create an WXSDKInstance, add IWXRenderListener and activity lifecycle on it. load weex bundle url. when page load success; target view will be send for you on onViewCreated callback, set target view to activity contentView.```javapublic class MainActivity extends AppCompatActivity implements IWXRenderListener { WXSDKInstance mWXSDKInstance; @Override protected void onCrea
 te(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)&#1
 23; 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(); } }} Run app, start activity, then you will see hello world demo. well done. Hello World Demo Source Tip: Click QRCode Image in Demo Source Page, your will see compiled bundle js. Integrated to iOS#Through 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 Dependencies#Import Weex iOS SDK to your existing project, if not, you can create a new project.Before proceeding, make sure that the Podfile file is under the p
 roject 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 'git@github.com: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 'git@github.com:CocoaPods/Specs.git'target 'YourTarget' do platform :ios, '7.0' pod 'WeexSDK', :path=>'./sdk/'end Step 2: Install Dependencies#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. Step 3: Initialize the Weex environmen
 t#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]; Step 4: Render weex Instance#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. Th
 e 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. Step 5: D
 estroy Weex Instance#In the dealloc phase of the viewController destroyed Weex instance, 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 APIs#WXSDKEngine# 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: public 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 requ
 est, OnHttpListener listener);} WXRequest defines the parameters related to the network 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 (JSLi
 b file size, Weex SDK version number, etc.).Interface definition: public interface IWXUserTrackAdapter { 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 JavaScript#Custom events#Used 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 (drop-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 callback#Used 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 }} OnWXScrollListener#Weex gets the scroll event You can register registerOnWXScrollListener via WXSDKInstanceThe interface is defined as follows: public in
 terface 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);} IActivityNavBarSetter#Weex provides WXNavigatorModule for navigation control, and the corresponding method can be customized by 
 setting the IActivityNavBarSetter interface. Instructions: WXSDKEngine.setActivityNavBarSetter(new IActivityNavBarSetter(){}); Other Introduction#setSize#You can use the mWXSDKInstance.setSize() method to change the size of the Weex container. Downgrade#Weex 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":"iOS APIs","path":"references/ios-apis.html","permalink":"https://weex.apache.org/references/io
 s-apis.html","text":"iOS APIs#Handler(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 inter
 acts 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. There 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&
 #123; callback(param,ture);} Set size of the Weex container#You can use the setFrame(CGRect) method to change the size of the Weex container. Downgrade#Weex 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 TemplateErrorType, 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 Service","path":"references/js-service.html","permalink":"https://weex.apache.org/references/js-service.html","text":"JS Service#v0.9.5+ JS service and Weex instance are parallel in js runtime. Weex instance lifecycle will invoke JS service lifecycle. Currently provide create, r
 efresh, destroy of lifecycle. !!!Important: JS Service is very powerful. Please be careful to use. Register JS Service#iOS#[WeexSDKEngine registerService:@"SERVICE_NAME" withScript: @"SERVICE_JS_CODE" withOptions: @{}]; Android#HashMap<String, String> options = new HashMap<>()options.put(\"k1\", \"v1\")String SERVICE_NAME = \"SERVICE_NAME\"String SERVICE_JS_CODE = \"SERVICE_JS_CODE\"boolean result = WXSDKEngine.registerService(SERVICE_NAME, SERVICE_JS_CODE, options) Web#<!-- Should be loaded after then jsfm --><script src=\"SERVICE_JS_CODE_URL\"></script> Write a JS Service#// options: native inject options// options.serviceName is native options nameservice.register(options.serviceName, { /** * JS Service lifecycle. JS Service `create` will before then each instance lifecycle `create`. The return param `instance` is Weex protected param. This object will return to instance global. Other params will in the `services` a
 t instance. * * @param {String} id instance id * @param {Object} env device environment * @return {Object} */ create: function(id, env, config) { return { instance: { InstanceService: function(weex) { var modal = weex.requireModule('modal') return { toast: function(title) { modal.toast({ message: title }) } } } }, NormalService: function(weex) { var modal = weex.requireModule('modal') return { toast: function(title) { modal.toast({ message: title }) } } } } }, /** * JS Service lifecycle. JS Service `refresh` will before then each instance lifecycle `refresh`. If you want to reset variable or something on instance refresh. * * @param {String} id instance id * @param {Object} env device environment */ refresh: function(id, env, config){ }, /** * JS Service lifecycle. JS Service `destroy` will before then each instance
  lifecycle `destroy`. You can deleted variable here. If you doesn't detete variable define in JS Service. The variable will always in the js runtime. It's would be memory leak risk. * * @param {String} id instance id * @param {Object} env device environment * @return {Object} */ destroy: function(id, env) { }}) Using JS Service (vuejs)#<script>var _InstanceService = new InstanceService(weex)var _NormalService = new service.normalService(weex)module.exports = { created: fucntion() { // called modal module to toast something _InstanceService.toast('Instance JS Service') _NormalService.toast('Normal JS Service') }}</script>","type":"references"},{"title":"Weex Variable","path":"references/weex-variable.html","permalink":"https://weex.apache.org/references/weex-variable.html","text":"Properties and Methods weex.config Weex Environment Object weex.document weex.requireModule Use Native Module weex.supports Examp
 les Each page of Weex contains a weex variable in the js runtime context. It can be assessed directly just like a global object, but it’s readonly and separated from different pages. NOTE: The weex variable only exposed in the Vue framework. It’s not available in Rax framework yet. Properties and Methods#The type declaration of the Weex variable is: declare type Weex = { config: WeexConfigAPI; document: WeexDocument; requireModule: (name: string) => Object | void; supports: (condition: string) => boolean | void;} weex.config#The weex.config contains all the environment information of current page. declare type WeexConfigAPI = { bundleUrl: string; bundleType?: string; env: WeexEnvironment;} bundleUrl: The URL of the js bundle in current page. bundleType: v0.17+ The type of the js bundle, it indicates which framework is using for current js bundle, could be "Vue" or "Rax". env: Weex environment object. Weex Environment Object#Sometimes
 , you still need to write some platform specific codes for compatibility or enhancement. Weex provides weex.config.env and a global object WXEnvironment (they are strictly equal) to get the information of current runtime environment. weex.config.env === WXEnvironment Properties in Weex environment object: Property Type Description platform String Current running platform, could be “Android”, “iOS” or “Web”. weexVersion String The version of Weex SDK. appName String Mobile app name or browser name. appVersion String The version of current app. osName String The OS name, could be “Android” or “iOS”. osVersion String The version of current OS. deviceModel String Mobile phone device model. (native only) deviceWidth Number Screen resolution width. deviceHeight Number Screen resolution height. This example prints all properties in the Weex environment object. weex.document#The weex.document is the document object of current page, it can be used to create or manipulate 
 the Elements in DOM tree. It’s part of Weex DOM API specification which is NOT the same with the document object in the W3C DOM API. However, it’s not a good practice to manipulate DOM directly when using modern front-end frameworks, such as Vue and Rax. Especially, there is no actually DOM in Weex, it was simulated on the native (Android or iOS). This API is mainly used inside of the Vue and Rax framework to convert the virtual-dom into render directives and send them to native render engines of Weex. Not recommended for using it when developing pages. weex.requireModule#For those features which does not rely on the UI, Weex wraps them into modules. It is a way to access native capabilities in javascript. Except for the built-in modules, it’s quite easy to integrate the existing native modules to Weex platform. After that, you can use weex.requireModule to require both customized and built-in modules. weex.requireModule(name: string): Object | void; Parameter: A case-sensitiv
 e module name. Return Value: If the module is registered, return a Proxy or plain object if the context doesn’t support Proxy. You can use it to call the registered methods in the module. If the module is unregistered, return undefined. Use Native Module#You can require a native module and use its APIs just like normal javascript functions. Here is a simple example of using the modal module: <template> <div><text>Toast</text></div></template><script> const modal = weex.requireModule('modal') modal.toast({ message: 'I am a toast.', duration: 3 })</script> weex.supports# This API only available in v0.15+. As you may know, components and modules are extendable and configurable in Weex. So it could be various in different apps or running context. You can use weex.supports to detect whether a feature is supported in the current environment at runtime. weex.supports(condition: string): boolean | void; Parameter: A formatted condi
 tion string: @{type}/{name}. The type must be "component" or "module". The name could be a tag name, module name or the method name in specific module. Return Value: If the feature is supported, return true. If the feature is unsupported, return false. If not sure about whether this feature is supported, return null. Examples#Detects whether the specific component is supported: weex.supports('@component/slider') // trueweex.supports('@component/my-tab') // false Detects whether the specific module is supported: weex.supports('@module/stream') // trueweex.supports('@module/abcdef') // false Detects whether the method in specific module is supported: weex.supports('@module/dom.getComponentRect') // trueweex.supports('@module/navigator.jumpToPage') // false Invalid input or unknown features: weex.supports('div') // nullweex.supports('module/*') // nullweex.supports('@stream/fetch') // nullweex.supports('getComponentRect') // null","type":"references"},{"title":"Weex
  Language Support Plugin","path":"tools/helpers.html","permalink":"https://weex.apache.org/tools/helpers.html","text":"Weex Language Support Plugin#Weex Language Support is a official tools to code highlight, automatic completion，lint and other functions in IDEA, WebStorm or the others IDEs. Supported IDEs#You can install and use this plugin on the following IDEs on any operating system:IntelliJ IDEA Ultimate, PhpStorm, WebStorm, PyCharm, RubyMine, AppCode, CLion, Gogland, Rider Install#Just searching the Weex Language Support in plugin repo to install, next you need restart IDE to enable it. Configurations#Open Preferences -> Other Settings -> Weex language support to configuration plugin Target Weex Version: Config the version of Weex that your current project in use, default is LATEST, it means always using the latest version Vue Support: Config whether to support Vue, you need to restart IDE after turning on or off the set to take effect Custom Rules: Import the custom W
 eex DSL rules, The format of the custom rules will be listed later Global Weex Components: Sets the location of the module that is applied in the project, in particular, the node_modules directory in current project and npm root will be automatically included, you do not need to add them here Format of Custom DSL Rules#Custom rules are included in a json file, the root node of the json file is an array, each element in the array corresponds to a label in the DSL.Let’s take the example of the loading> tag:{ \"tag\": \"loading\", //tag name, not null \"attrs\": [ //attributes of tag, can be null { \"name\": \"display\", //attribute name, not null \"valuePattern\": null, //pattern expression to check the attribute value, can be null \"valueEnum\": [ //attribute value enumeration, can be null \"show\", \"hide\" ], \"valueType\": \"var\", //type of attribute value, must be var or function \"since\": 0, //which version the attribute is added to sdk, such as 0.11 \"weexOnly\
 ": false //whether the attribute is available only in 1.0 syntax, default is false } ], \"events\": [ //events list, can be null { \"name\": \"loading\", //event name, not null \"since\": 0 //which version the event is added to sdk } ], \"parents\": [ //The tag is allowed to be a child of which tags, null means no restrictions \"list\", \"scroller\" ], \"childes\": [ //which tags are allowed as their own child tags, null means no restrictions \"text\", \"image\", \"loading-indicator\" ], \"document\": \"/references/components/loading.html\" //document link } Contribution#Please commiting Issues and Pull Requests into the weex-language-support project","type":"tools"},{"title":"Use weex-toolkit","path":"tools/toolkit.html","permalink":"https://weex.apache.org/tools/toolkit.html","text":"weex-toolkit#weex-toolkit is an official command line tool to help developers to create, debug and build their Weex project. Install#$ npm install -g weex-toolkit You can use the w
 eex -v command to confirm that the installation is successful. If you have never installed node.js, you should go node.js.org to download and install it. NOTE: The node version needs to be upper 6.0. You can try n to manage your node versions. If you meet some errors when installing, please go weex-toolkit issues or weex-toolkit faq to find some solution or have a discuss with us. Commands#create#$ weex create awesome-project Creates a new weex project. After command running, you can find awesome-project directory and there are some Weex templates in it.There are some useful npm scripts you will use in the future: build: build the source code and generate the JS bundle dev: run webpack watch configuration serve: start a hot-reload web server You need to run npm i before running npm start to install project dependencies，after that, the development page will open in the browser automatically preview#weex-toolkit supports previewing your Weex file(.vue) in a watch mode. You only need
  specify your file path. $ weex preview src/foo.vue The browser automatically opens the preview page and you can see the layout and effects of your weex page. If you have a Playground app in your mobile devices, you can scan the QR code at the opened page. Try the command below, you’ll preview the whole directory files. $ weex preview src --entry src/foo.vue You need to specify the folder path to preview and the entry file (passed in via --entry). compile#Use weex compile o compile a single weex file or a weex file in an entire folder. $ weex compile [source] [dist] [options] options# Option Description -w, --watch watch we file changes auto build them and refresh debugger page! [default true] -d,--devtool [devtool] set webpack devtool mode -e,--ext [ext] set enabled extname for compiler default is vue -m, --min set jsbundle uglify or not. [default false] You can use like this: $ weex compile src dest --devtool source-map -m platform#Use weex platform [add|remove] [ios|android] to
  add or remove ios / android project templates. $ weex platform add ios$ weex platform remove ios Use weex platform list to show what platforms your application supported. run#You can use weex-toolkit to run project on android/ios/web. $ weex run ios$ weex run android$ weex run web debug# Weex devtools is a custom devtools for Weex that implements Chrome Debugging Protocol, it is designed to help you quickly inspect your app and debug your JS bundle source in a Chrome web page, both android and iOS platform are supported. So you can use weex-devtools feature by weex-toolkit. usage#weex d

<TRUNCATED>