wqyfavor closed pull request #282: Draft URL: https://github.com/apache/incubator-weex-site/pull/282
This is a PR merged from a forked repository. As GitHub hides the original diff on merge, it is displayed below for the sake of provenance: As this is a foreign pull request (from a fork), the diff is supplied below (as it won't show otherwise due to GitHub magic): diff --git a/docs/docs/components/cell.md b/docs/docs/components/cell.md index 50a8d586a..ddcc4896a 100644 --- a/docs/docs/components/cell.md +++ b/docs/docs/components/cell.md @@ -12,12 +12,12 @@ This type of component supports all kinds of weex component as its child compone **Notes:** You can't give `<cell>` a `flex` value. Width of `<cell>` is equal to the width of its parent list/recycler/waterfall component, and you don't need to specify its height. -* **keep-scroll-position** boolean, <span class="api-version">v0.11+</span>. It controls whether to keep the last sliding position after inserting the cell. +* **keep-scroll-position** boolean. It controls whether to keep the last sliding position after inserting the cell. * **insert-animation** string, cell insert animation. Only support `none` and `default` now. * **delete-animation** string, cell delete animation. Only support `none` and `default` now. -* **recycle** boolean, <span class="api-version">iOS</span>, default true. It controls whether the cell's view in a list should be recycled when the UITableView is scrolling. You should always use true for iOS. +* **recycle** boolean, <Badge text="iOS" type="warning"/>, default true. It controls whether the cell's view in a list should be recycled when the UITableView is scrolling. You should always use true for iOS. ## Styles diff --git a/docs/docs/components/image.md b/docs/docs/components/image.md index 1ff873c84..22a4886b6 100644 --- a/docs/docs/components/image.md +++ b/docs/docs/components/image.md @@ -1,10 +1,6 @@ ---- -title: <image> -type: references -group: Build-in Components -order: 8.04 -version: 2.1 ---- +# <image> + +## Summary `<image>` is used to display a single image in your interface. diff --git a/docs/docs/components/list.md b/docs/docs/components/list.md index f608555bc..f121590c3 100644 --- a/docs/docs/components/list.md +++ b/docs/docs/components/list.md @@ -1,4 +1,6 @@ -# List +# <list> + +## Summary <span class="weex-version">v0.6.1+</span> @@ -17,7 +19,7 @@ It can provide excellent experience and performance while still maintaining smoo [list cell appear event](http://dotwe.org/vue/ce0e953112b132e5897725b3149f3924) -### Child Components +## Child Components Notes: The list now supports the following child components: cell, header, refresh, loading and fixed-position components. Other kinds of components will not be guaranteed to be displayed correctly. @@ -27,7 +29,7 @@ Notes: The list now supports the following child components: cell, header, refre * loading 0.6.1 used inside list to add pull-up-to-load-more functionality. -### Attributes +## Attributes * `show-scrollbar`: true/false whether show the scroll bar or not, default value is true * `loadmoreoffset` : `Number` default value is 0. The loadmore event will be triggered when the list is loadmoreoffset left to reach the bottom of the list view. e.g. a list has total content length of 1000, and the loadmoreoffset is set to 400, the loadmore event will be triggered when 600 has beed scrolled and there is less than 400 left. @@ -38,7 +40,7 @@ Notes: The list now supports the following child components: cell, header, refre Please checkout [Scroller Component Attributes](./scroller.html) to have a look at the inherited attributes from direct parent. -### Styles +## Styles common styles: check out [common styles for components](/wiki/common-styles.html) @@ -48,7 +50,7 @@ common styles: check out [common styles for components](/wiki/common-styles.html * support position related styles * support opacity, background-color etc. -### Events +## Events onloadmore 0.5 used with loadmoreoffset attribute. if the view has less than loadmoreoffset to scroll down, the onloadmore event will be triggered. @@ -60,7 +62,7 @@ common events: check out the [common events](/wiki/common-events.html) * support onappear / ondisappear event. Check out [common events](/wiki/common-events.html) -### API +## API All cells or cell's subcomponents in list support the scrollToElement API in [dom module](../modules/dom.html) @@ -69,7 +71,7 @@ All cells or cell's subcomponents in list support the scrollToElement API in [do loading is a child component that can response to the onloading event, and this event can only be triggered when the scroller/list has been scrolled down to the bottom. onloadmore is an event that will be triggered when the rest of the scroller/list is less than loadmoreoffset long. -### Restrictions +## Restrictions Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions. For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal. diff --git a/docs/docs/components/loading.md b/docs/docs/components/loading.md index 93e33ba43..f91d2a5d5 100644 --- a/docs/docs/components/loading.md +++ b/docs/docs/components/loading.md @@ -1,6 +1,6 @@ # <loading> -### <span class="weex-version">v0.6.1+</span> +## Summary The `<loading>` Component provide a pullup to loading function for some special containers, its usage and attributes are similar to the `<refresh>` Component. > **Note：** To be rendered properly, the `<loading>` Component must appear > inside the special Component such as > `<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>`. diff --git a/docs/docs/components/recycle-list.md b/docs/docs/components/recycle-list.md index 255ae80cf..9ba0255ec 100644 --- a/docs/docs/components/recycle-list.md +++ b/docs/docs/components/recycle-list.md @@ -1,5 +1,6 @@ -# <Recycle List> -<span class="weex-version">v0.18.0+</span> +# <recycle-list> <Badge text="v0.18+" type="warning"/> + +## Summary `<recycle-list>` is a new list container with the ability to recycle and reuse, which can greatly optimize memory usage and rendering performance. diff --git a/docs/docs/components/refresh.md b/docs/docs/components/refresh.md index 1a93600a4..8e2361164 100644 --- a/docs/docs/components/refresh.md +++ b/docs/docs/components/refresh.md @@ -1,6 +1,6 @@ # <refresh> -### <span class="weex-version">v0.6.1+</span> +## Summary The `<refresh>` Component provide a pulldown-refresh function for some special containers, its usage and attributes are similar to the `<loading>` Component. > **Note：** To be rendered properly, the `<refresh>` Component must appear > inside the special Component such as > `<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>`. diff --git a/docs/docs/components/richtext.md b/docs/docs/components/richtext.md index f638347c0..05aad2ded 100644 --- a/docs/docs/components/richtext.md +++ b/docs/docs/components/richtext.md @@ -1,4 +1,4 @@ -# <richtext> +# <richtext> <Badge text="v0.20+" type="warning"/> ## Summary diff --git a/docs/docs/components/scroller.md b/docs/docs/components/scroller.md index 1e51e8a2d..e308ab62f 100644 --- a/docs/docs/components/scroller.md +++ b/docs/docs/components/scroller.md @@ -1,6 +1,6 @@ # <scroller> -<span class="weex-version">v0.6.1+</span> +## Summary Scroller is a component which can have multiple child components in one column. It supports both direcitons. If the content size of child components exceeds the frame of the scroller, the whole child components will be scrollable. diff --git a/docs/docs/components/text.md b/docs/docs/components/text.md index 3000cf0d4..4ec4c677c 100644 --- a/docs/docs/components/text.md +++ b/docs/docs/components/text.md @@ -1,4 +1,6 @@ -# Text +# <text> + +## Summary The weex builtin component 'text' is used to render text with specified style rule. diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md index ec3294b03..cdd1d2199 100644 --- a/docs/docs/components/textarea.md +++ b/docs/docs/components/textarea.md @@ -47,7 +47,7 @@ The difference between `active` and `focus` is that when the cursor is inside th * @param returnKeyType, "default" | "go" | "next" | "search" | "send" | "done". * **keyboard**. Fired when keyborad is shown or hidden. * @param isShow: boolean, showing or hiding the keyboard. - * @param keyboardSize: keyboard size in web pixel format. + * @param keyboardSize: keyboard height in web pixel format. ## Example diff --git a/docs/docs/components/video.md b/docs/docs/components/video.md index 9d9c40dda..5f037b5ef 100644 --- a/docs/docs/components/video.md +++ b/docs/docs/components/video.md @@ -13,8 +13,8 @@ A `text` is the only valid type of child component. * **src**, string. The URL of the video to embed. * **play-status**, string. Valid options are 'play' | 'pause'. Use it to control video's play status. Default value is `pause`。 * **auto-play**, boolean. Use it to control whether it is playing when the page initialization finished. Defalut value is false. -* **poster**, string, <span class="weex-version">v0.18+ & iOS</span>. Post image URL of this video if any. -* **controls**, string, <span class="weex-version">v0.19+</span>. If set to `nocontrols`, native video component will hide its play-back control panel. +* **poster**, string, <Badge text="v0.18+ & iOS" type="warning"/>. Post image URL of this video if any. +* **controls**, string, <Badge text="v0.19+" type="warning"/>. If set to `nocontrols`, native video component will hide its play-back control panel. ## Styles diff --git a/docs/docs/components/waterfall.md b/docs/docs/components/waterfall.md index 188b40d78..6a98923b9 100644 --- a/docs/docs/components/waterfall.md +++ b/docs/docs/components/waterfall.md @@ -1,17 +1,17 @@ -# waterfall +# <waterfall> -<span class="weex-version">v0.11.0+</span> +## Summary A component providing waterfall layout over list component. -### Child Components +## Child Components Notes: The waterfall only supports the following child components: cell, header, refresh, loading and fixed-position components. Other kinds of components will not be guaranteed to be displayed correctly. * cell: presents the content for a single data item in waterfall * header: components that need to stretch across multiple columns. It can be sticky by using css position. -### Attributes +## Attributes * **column-width** : This property describes the width of columns in waterfall elements. * `auto`: means that the column width will be determined by other properties(e.g., column-count, if it has a non-auto value). @@ -25,7 +25,7 @@ Notes: The waterfall only supports the following child components: cell, header, To see other attributes in list, please checkout [List Component Attributes](./list.html) -### Styles +## Styles common styles: check out [common styles for components](/wiki/common-styles.html) @@ -34,17 +34,17 @@ common styles: check out [common styles for components](/wiki/common-styles.html * support position related styles * support opacity, background-color etc. -### Events +## Events common events: check out the [common events](/wiki/common-events.html) * support onclick event. Check out [common events](/wiki/common-events.html) * support onappear / ondisappear event. Check out [common events](/wiki/common-events.html) -### API +## API All subcomponents in waterfall support the scrollToElement API in [dom module](../modules/dom.html) -### Example +## Example [waterfall example](http://dotwe.org/vue/7a9195643e9e8da352b0d879cdbe68c0) diff --git a/docs/docs/components/web.md b/docs/docs/components/web.md index a5b5c120c..ba50345d5 100644 --- a/docs/docs/components/web.md +++ b/docs/docs/components/web.md @@ -1,6 +1,6 @@ -# Web +# <web> -<span class="weex-version">v0.5+</span> +## Summary `<web>` is used to display web content that specified by `src` attribute in weex page. You also can use `webview` module to control WebView behavior such as goBack, goForward and reload, See [webview module](../modules/webview.html) for more information. diff --git a/docs/guide/develop/integrate-to-iOS-app.md b/docs/guide/develop/integrate-to-iOS-app.md index f36123b05..aef6b115e 100644 --- a/docs/guide/develop/integrate-to-iOS-app.md +++ b/docs/guide/develop/integrate-to-iOS-app.md @@ -8,65 +8,67 @@ version: 2.1 <!-- toc --> -# Integrate to iOS App +# Integrate Weex to iOS App -Through the [CocoaPods](https://cocoapods.org/) or [Carthage](https://github.com/Carthage/Carthage) integrated Weex iOS SDK to your project. -First assume that you have finished installing the [iOS development environment](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html) and [CocoaPods](https://guides.cocoapods.org/using/getting-started.html)(or [Carthage](https://github.com/Carthage/Carthage#installing-carthage)). +You may integrate Weex to your iOS app through the [CocoaPods](https://cocoapods.org/) or [Carthage](https://github.com/Carthage/Carthage). We assume that you have already installed the Xcode and CocoaPods or Carthage. -## Step 1: Add Dependencies +## 1. Configure dependency -Import Weex iOS SDK to your existing project, if not, you can create a new project according to the [tutorial](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html)). -Before proceeding, make sure that the Podfile file is under the project file. If not, create one and open with text editor(if Carthage, please ensure the [`Cartfile`](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile) in your project directory). You can choose one of Integration method. +### Using CocoaPods -### using [CocoaPods](https://cocoapods.org/) +The latest WeexSDK version on iOS could be obtained from [here](https://cocoapods.org/pods/WeexSDK). -WeexSDK The latest version on cocoaPods can be obtained [here](https://cocoapods.org/pods/WeexSDK) . - Add the following to the Podfile file: +Add WeexSDK to your Podfile. - ```object-c - source '[email protected]:CocoaPods/Specs.git' - target 'YourTarget' do - platform :ios, '7.0' - pod 'WeexSDK', '0.17.0' ## latest Weex SDK recommended - end - ``` - Open the command line, switch to the directory of the Podfile file, and run the pod install command. If there are no errors, it means that the environment has been configured. +```ruby +source '[email protected]:CocoaPods/Specs.git' +target 'YourTarget' do + platform :ios, '8.0' + pod 'WeexSDK', '0.20.1' +end +``` + +Then run `pod install` command in your project directory. -### using [Carthage](https://github.com/Carthage/Carthage) +### Using Carthage + +Create a Cartfile in your project directory. [Carthage Manual](https://github.com/Carthage/Carthage#adding-frameworks-to-an-application) -- [here](https://github.com/apache/incubator-weex/tags) you can get the latest version of WeexSDK. -- Add `github "apache/incubator-weex"` to [`Cartfile`](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile) -- Open the command line, switch to the directory of the Cartfile, and run `carthage update`. +Add `github "apache/incubator-weex"` to [`Cartfile`](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile) -[Add Carthage build framework to your project](https://github.com/Carthage/Carthage#adding-frameworks-to-an-application) +Run `carthage update` in your project directory. +## 2. Initialize Weex -## Step 2: Initialize the Weex environment +We recommend initializing Weex in `didFinishLaunchingWithOptions` callback of your App delegate. -In the AppDelegate.m file to do the initialization operation, usually in the didFinishLaunchingWithOptions method as follows to add. +```Objective-C +// App configuration +[WXAppConfiguration setAppGroup:@"Your app group"]; +[WXAppConfiguration setAppName:@"Your app name"]; +[WXAppConfiguration setAppVersion:@"Your app version"]; -```object-c -//business configuration -[WXAppConfiguration setAppGroup:@"AliApp"]; -[WXAppConfiguration setAppName:@"WeexDemo"]; -[WXAppConfiguration setAppVersion:@"1.0.0"]; -//init sdk environment +//Initialize WeexSDK [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]; + +//Register custom modules and components, optional. +[WXSDKEngine registerComponent:@"myview" withClass:[MyViewComponent class]]; +[WXSDKEngine registerModule:@"mymodule" withClass:[MyWeexModule class]]; + +//Register the implementation of protocol, optional. +[WXSDKEngine registerHandler:[WXAppNavigationImpl new] withProtocol:@protocol(WXNavigationProtocol)]; + +//Set the log level, optional +[WXLog setLogLevel: WXLogLevelWarning]; ``` -## Step 3: Render weex Instance +## 3. Create a 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. The parent container is generally a viewController. +You can render a Weex instance in full page or in a view. All you need to do is to create a Weex instance and set callbacks of it, then provide it with a valid URL. In the `onCreate` callback, add the root view to your desired parent view and set the view frame using `instance.frame = `. -```object-c +```Objective-C #import <WeexSDK/WXSDKInstance.h> + - (void)viewDidLoad { [super viewDidLoad]; @@ -77,10 +79,10 @@ Weex supports both full page rendering and partial rendering. What you need to d _instance.onCreate = ^(UIView *view) { [weakSelf.weexView removeFromSuperview]; weakSelf.weexView = view; - [weakSelf.view addSubview:weakSelf.weexView]; + [weakSelf.view addSubview:view]; }; _instance.onFailed = ^(NSError *error) { - //process failure + //process failure, you could open an h5 web page instead or just show the error. }; _instance.renderFinish = ^ (UIView *view) { //process renderFinish @@ -90,57 +92,10 @@ Weex supports both full page rendering and partial rendering. What you need to d } ``` -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 4: Destroy Weex Instance - -In the dealloc phase of the viewController destroyed Weex instance, can play a role in avoiding memory leaks. - -```object-c -- (void)dealloc -{ - [_instance destroyInstance]; -} -``` - -## 5. Extend-iOS - -Weex SDK provides only rendering capabilities, rather than have other capabilities. There are some internal components, modules and handlers. If you want these features which weexSDK doesn't provide, you can to extend. - - -- [Extend iOS](../extend/extend-ios.html) -- [Extend iOS with swift](../extend/extend-ios-with-swift.html) - -## More: Build framework - -more, Build your own WeexSDK.framework and Import to your project. - -The Weex SDK can be compiled from the source code. You can try the latest feature in the new feature or bugfix branch. - -- `git clone https://github.com/apache/incubator-weex.git' - you can use SSH - - ``` - git clone [email protected]:apache/incubator-weex.git - ``` - or use https - - ``` - git clone https://github.com/apache/incubator-weex.git - ``` - -- open WeexSDK.xcodeproj in `weex/ios/sdk` - switch target just below -  +## 4. Destroy the instance -- Build this project or just use the xcode default hot key `⌘ + b` +You should destroy the Weex instance explicitly using `[instance destroyInstance]`. -- Finally you can find `Products` directory in `weex/ios/sdk`, `WeexSDK.framework` was here -  +## 5. Extend Weex -- Add `js-framework`(which is in the `WeexSDK.framework` and renamed to `native-bundle-main.js`) to your main bundle -  -- Import the framework you get above and import system framework -  -- add `-ObjC` to your project settings,just like this - +You can extend Weex functionality by writing your own components, modules. For more details please refer to [Extend iOS](../extend/extend-ios.html) and [Extend iOS with swift](../extend/extend-ios-with-swift.html). diff --git a/docs/guide/extend/extend-ios.md b/docs/guide/extend/extend-ios.md index d1181d0c4..2426b6789 100644 --- a/docs/guide/extend/extend-ios.md +++ b/docs/guide/extend/extend-ios.md @@ -177,19 +177,19 @@ A native Component has a life cycle managed by Weex. Weex creates it, layout 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. | - | layoutDidFinish | 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. | +| method | description | +| :------------------: | ---------------------------------------- | +| initWithRef:type:... | Initializes a new component using the specified properties. | +| layoutDidFinish | 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. | #### Add method for component diff --git a/docs/zh/docs/components/cell.md b/docs/zh/docs/components/cell.md index 4cacf9047..11ee3abfd 100644 --- a/docs/zh/docs/components/cell.md +++ b/docs/zh/docs/components/cell.md @@ -12,12 +12,12 @@ Cell 支持添加任意类型的组件作为自己的子组件。 **注意:** 不要指定 `<cell>` 的 `flex` 值。Cell 的宽度是由它的父容器决定的，你也不需要指定它的高度。 -* **keep-scroll-position** boolean, <span class="api-version">v0.11+</span>. 控制当 Cell 被添加到列表中时，列表的滚动位置是否要保持不变。 +* **keep-scroll-position** boolean. 控制当 Cell 被添加到列表中时，列表的滚动位置是否要保持不变。 * **insert-animation** string, cell 的插入动画。当前只支持 `none` 和 `default`。 * **delete-animation** string, cell 的删除动画。当前只支持 `none` 和 `default`。 -* **recycle** boolean, <span class="api-version">iOS</span>, 默认值 true。这个属性控制这个 Cell 的 view 和子 views 是否在列表滚动时进行回收，在 iOS 上通常必须指定为 true （因为默认为 true，所以一般不需要写这个属性），如果设置为 false，列表滚动时，页面会占用非常高的内存。 +* **recycle** boolean, <Badge text="iOS" type="warning"/>, 默认值 true。这个属性控制这个 Cell 的 view 和子 views 是否在列表滚动时进行回收，在 iOS 上通常必须指定为 true （因为默认为 true，所以一般不需要写这个属性），如果设置为 false，列表滚动时，页面会占用非常高的内存。 ## 样式 diff --git a/docs/zh/docs/components/image.md b/docs/zh/docs/components/image.md index 2792d1abb..b6ee27319 100644 --- a/docs/zh/docs/components/image.md +++ b/docs/zh/docs/components/image.md @@ -1,4 +1,6 @@ -# Image +# <image> + +## 简介 `<image>` 用于在界面中显示单个图片。 diff --git a/docs/zh/docs/components/list.md b/docs/zh/docs/components/list.md index 17645649d..0dfdae529 100644 --- a/docs/zh/docs/components/list.md +++ b/docs/zh/docs/components/list.md @@ -1,4 +1,7 @@ # <list> + +## 简介 + `<list>` 组件是提供垂直列表功能的核心组件，拥有平滑的滚动和高效的内存管理，非常适合用于长列表的展示。最简单的使用方法是在 `<list>` 标签内使用一组由简单数组循环生成的 `<cell>` 标签填充。 ```vue{2} diff --git a/docs/zh/docs/components/loading.md b/docs/zh/docs/components/loading.md index 4f80fb126..b54aea63e 100644 --- a/docs/zh/docs/components/loading.md +++ b/docs/zh/docs/components/loading.md @@ -1,4 +1,7 @@ # <loading> + +## 简介 + `<loading>` 为容器提供上拉加载功能。 ::: warning 注意 diff --git a/docs/zh/docs/components/recycle-list.md b/docs/zh/docs/components/recycle-list.md index e2f0fb694..71b22b6fe 100644 --- a/docs/zh/docs/components/recycle-list.md +++ b/docs/zh/docs/components/recycle-list.md @@ -1,12 +1,7 @@ ---- -title: <recycle list> -type: references -group: Build-in Components -order: 8.10 -version: 2.1 ---- -# <Recycle List> -### <span class="weex-version">v0.18.0+</span> +# <recycle-list> <Badge text="v0.18+" type="warning"/> + +## 简介 + `<recycle-list>` 是一个新的列表容器，具有回收和复用的能力，可以大幅优化内存占用和渲染性能。 > * 设计思路请参考 > [Design.md](https://github.com/Hanks10100/weex-native-directive/blob/master/Design.md)，具体的实现细节请参考 > > [Implementation.md](https://github.com/Hanks10100/weex-native-directive/blob/master/Implementation.md) > * 该功能部分依赖于编译工具，请确保 weex-loader 的版本升级到最新（v0.7.2+） diff --git a/docs/zh/docs/components/refresh.md b/docs/zh/docs/components/refresh.md index 5a48bb601..d229ba9e5 100644 --- a/docs/zh/docs/components/refresh.md +++ b/docs/zh/docs/components/refresh.md @@ -1,4 +1,6 @@ # <refresh> + +## 简介 `<refresh>` 为容器提供下拉刷新功能。 ::: warning 注意 diff --git a/docs/zh/docs/components/richtext.md b/docs/zh/docs/components/richtext.md index 0b7f2e61d..103ecc160 100644 --- a/docs/zh/docs/components/richtext.md +++ b/docs/zh/docs/components/richtext.md @@ -1,4 +1,4 @@ -# <richtext> +# <richtext> <Badge text="v0.20+" type="warning"/> ## 简介 diff --git a/docs/zh/docs/components/scroller.md b/docs/zh/docs/components/scroller.md index 7fb047d6a..41071f92c 100644 --- a/docs/zh/docs/components/scroller.md +++ b/docs/zh/docs/components/scroller.md @@ -1,5 +1,7 @@ # <scroller> +## 简介 + `<scroller>` 是一个容纳子组件进行横向或竖向滚动的容器组件。如果你的组件需要进行滚动，可以将 `<scroller>` 当作根元素或者父元素使用，否则页面无法滚动（ `<list>` 组件除外， `<list>` 默认可以滚动）。 ::: warning diff --git a/docs/zh/docs/components/text.md b/docs/zh/docs/components/text.md index 929066161..baf7172e2 100644 --- a/docs/zh/docs/components/text.md +++ b/docs/zh/docs/components/text.md @@ -1,4 +1,6 @@ -# Text +# <text> + +## 简介 `<text>` 是 Weex 内置的组件，用来将文本按照指定的样式渲染出来. diff --git a/docs/zh/docs/components/textarea.md b/docs/zh/docs/components/textarea.md index 146cf82bd..bfe6a48e5 100644 --- a/docs/zh/docs/components/textarea.md +++ b/docs/zh/docs/components/textarea.md @@ -48,7 +48,7 @@ * @param returnKeyType, "default" | "go" | "next" | "search" | "send" | "done". * **keyboard**. 当键盘弹起或收起时触发。 * @param isShow: boolean, 显示或隐藏键盘。 - * @param keyboardSize: 键盘的尺寸，以前端使用的样式单位返回。 + * @param keyboardSize: 键盘的高度，以前端使用的样式单位返回。 ## 示例 diff --git a/docs/zh/docs/components/video.md b/docs/zh/docs/components/video.md index 1f6ac3ec1..15597cc93 100644 --- a/docs/zh/docs/components/video.md +++ b/docs/zh/docs/components/video.md @@ -13,8 +13,8 @@ Video 组件用于在页面中嵌入视频内容。 * **src**, string. 内嵌的视频指向的URL。 * **play-status**, string. 可选值为 `play` | `pause`，用来控制视频的播放状态，`play` 或者 `pause`，默认值是 `pause`。 * **auto-play**, boolean. 当页面加载初始化完成后，用来控制视频是否立即播放，默认值是 `false`。 -* **poster**, string, <span class="weex-version">v0.18+ & iOS</span>. 指定视频首图的图片链接。 -* **controls**, string. 可选值为 `controls` | `nocontrols`，控制视频播放组件是否显示回放控制面板，默认会显示，当指定为 `nocontrols` 时不显示回放控制面板。 +* **poster**, string, <Badge text="v0.18+ & iOS" type="warning"/>. 指定视频首图的图片链接。 +* **controls**, string, <Badge text="v0.19+" type="warning"/>. 可选值为 `controls` | `nocontrols`，控制视频播放组件是否显示回放控制面板，默认会显示，当指定为 `nocontrols` 时不显示回放控制面板。 ## 样式 diff --git a/docs/zh/docs/components/waterfall.md b/docs/zh/docs/components/waterfall.md index 41f878f42..3281de580 100644 --- a/docs/zh/docs/components/waterfall.md +++ b/docs/zh/docs/components/waterfall.md @@ -1,5 +1,7 @@ # <waterfall> +## 简介 + `<waterfall>` 组件是提供瀑布流布局的核心组件。瀑布流，又称瀑布流式布局是比较流行的一种页面布局，视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，这种布局还可以不断加载数据块并附加至当前尾部。 ```vue <template> diff --git a/docs/zh/docs/components/web.md b/docs/zh/docs/components/web.md index 11f1a2b36..8d7b37303 100644 --- a/docs/zh/docs/components/web.md +++ b/docs/zh/docs/components/web.md @@ -1,6 +1,7 @@ - # <web> +## 简介 + `<web>` 用于在 WEEX 页面中显示由 src 属性指定的网页内容。 <div style="text-align: center"><img src="https://img.alicdn.com/tfs/TB161pxoiLaK1RjSZFxXXamPFXa-1465-758.png"; width="850"></div> diff --git a/docs/zh/guide/develop/integrate-to-iOS-app.md b/docs/zh/guide/develop/integrate-to-iOS-app.md index 6e8e556ac..178c8b2dc 100644 --- a/docs/zh/guide/develop/integrate-to-iOS-app.md +++ b/docs/zh/guide/develop/integrate-to-iOS-app.md @@ -8,83 +8,67 @@ version: 2.1 <!-- toc --> -# 集成到iOS应用 +# 集成 Weex 到 iOS +使用 [CocoaPods](https://cocoapods.org/) 或 [Carthage](https://github.com/Carthage/Carthage) 可以方便地将 Weex 集成到自己的项目中。 -通过 [CocoaPods](https://cocoapods.org/) 或者 [Carthage](https://github.com/Carthage/Carthage) 集成 Weex iOS SDK 到您的项目中。 +## 1. 配置依赖 -首先确认您的开发环境是OK的 +### 使用 CocoaPods -- [iOS development environment](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html) -- [CocoaPods](https://guides.cocoapods.org/using/getting-started.html) 或者 [Carthage](https://github.com/Carthage/Carthage#installing-carthage)). +从 Cocoapods [仓库](https://cocoapods.org/pods/WeexSDK)中获取 WeexSDK 的最新版本。 -## 1. 添加依赖 +将 WeexSDK 添加到你的 Podfile 中。 -集成 Weex iOS SDK 到您现有的工程中, 如果没有的话, 可以参照[tutorial](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html))创建一个新的工程。 - -在开始之前，确认您的工程下有podfile文件，如果没有，手动创建一个。（如果使用的是`Cartfile`,确认[`Cartfile`](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile)在您的工程下） - -选择一种方式集成 - -### 使用[CocoaPods](https://cocoapods.org/) - -修改您的podfile - -```object-c - source '[email protected]:CocoaPods/Specs.git' - target 'YourTarget' do - platform :ios, '7.0' - pod 'WeexSDK', '0.17.0' ## 建议使用最新的版本 - end +```ruby +source '[email protected]:CocoaPods/Specs.git' +target 'YourTarget' do + platform :ios, '8.0' + pod 'WeexSDK', '0.20.1' +end ``` -可以从这里查[weex最新的版本地址](https://cocoapods.org/pods/WeexSDK) . +运行 `pod install` 命令安装依赖。 + +### 使用 Carthage -在podfile目录下，运行命令 -``` -pod install -``` -如果没有`error`提示的话，集成完毕 - -### 使用 [Carthage](https://github.com/Carthage/Carthage) - -- 获取[weex最新的版本地址](https://github.com/apache/incubator-weex/tags) . -- 添加 `github "apache/incubator-weex"` 到 [`Cartfile`](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile) -- 打开命令行，cd 到 artfile所在目录, 运行 `carthage update`. +在工程中创建一个 Cartfile，[Carthage 使用方法](https://github.com/Carthage/Carthage#adding-frameworks-to-an-application)。 -[使用Carthage添加framework](https://github.com/Carthage/Carthage#adding-frameworks-to-an-application) +添加 `github "apache/incubator-weex"` 到 [`Cartfile`](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile) +运行 `carthage update`。 -## 2. 初始化WEEX +## 2. 初始化 Weex -同常在 `AppDelegate.m`的 `didFinishLaunchingWithOptions`方法中进行初始化工作。 +建议在 `didFinishLaunchingWithOptions` 回调中初始化 Weex，你也可以在子线程中异步初始化，但需要确保渲染 Weex 页面前初始化已经全部完成。 +```Objective-C +// App configuration +[WXAppConfiguration setAppGroup:@"Your app group"]; +[WXAppConfiguration setAppName:@"Your app name"]; +[WXAppConfiguration setAppVersion:@"Your app version"]; -```object-c -//业务设置 -[WXAppConfiguration setAppGroup:@"AliApp"]; -[WXAppConfiguration setAppName:@"WeexDemo"]; -[WXAppConfiguration setAppVersion:@"1.0.0"]; -//初始化weex sdk +//Initialize WeexSDK [WXSDKEngine initSDKEnvironment]; -//注册自定义的组件 和模块 -[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]]; -[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]]; -//注册接口实现，如网络库、图片库 -[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)]; -//设置log等级 -[WXLog setLogLevel: WXLogLevelAll]; -``` -[__初始化源码case__ ](https://github.com/apache/incubator-weex/blob/master/ios/playground/WeexDemo/AppDelegate.m) +//Register custom modules and components, optional. +[WXSDKEngine registerComponent:@"myview" withClass:[MyViewComponent class]]; +[WXSDKEngine registerModule:@"mymodule" withClass:[MyWeexModule class]]; -## 3. 创建instnace +//Register the implementation of protocol, optional. +[WXSDKEngine registerHandler:[WXAppNavigationImpl new] withProtocol:@protocol(WXNavigationProtocol)]; -我们同时支持全页页面 和 部分卡片渲染方式。您只需要在调用函数时，制定需要展示的尺寸，并且讲view 添加到容器view上。 +//Set the log level, optional +[WXLog setLogLevel: WXLogLevelWarning]; +``` +## 3. 创建一个 Weex 实例 -```object-c +你既可以在全页面中使用 Weex，也可以在一个 view 中渲染 Weex。只需要创建一个 Weex 实例并指定好回调方法，提供一个合法的 URL 就可以了。在 `onCreate` 回调方法中将根 view 添加到你想显示内容的地方，并通过 `instance.frame = ` 来设置它的尺寸和位置。 + +```Objective-C #import <WeexSDK/WXSDKInstance.h> + - (void)viewDidLoad { [super viewDidLoad]; @@ -95,10 +79,10 @@ pod install _instance.onCreate = ^(UIView *view) { [weakSelf.weexView removeFromSuperview]; weakSelf.weexView = view; - [weakSelf.view addSubview:weakSelf.weexView]; + [weakSelf.view addSubview:view]; }; _instance.onFailed = ^(NSError *error) { - //process failure + //process failure, you could open an h5 web page instead or just show the error. }; _instance.renderFinish = ^ (UIView *view) { //process renderFinish @@ -108,42 +92,17 @@ pod install } ``` -WXSDKInstance 是一个非常重要的类，提供很多功能，比如渲染函数renderWithURL,各种事件回调, 比如, onCreate, onFailed, etc., 具体函数参见[WXSDKInstance](https://github.com/apache/incubator-weex/blob/master/ios/sdk/WeexSDK/Sources/Model/WXSDKInstance.h) - -## 4. 销毁 Instance +## 4. 销毁实例 -在`viewController `销毁时，需要同步调用instance的`destroyInstance`方法，weex会做内存回收，否则会出现内存泄漏。 +必须**显式地**销毁 Weex 实例，否则可能引起内存泄漏。 -```object-c -- (void)dealloc -{ - [_instance destroyInstance]; -} +```Objective-C +[instance destroyInstance]; ``` -## 5. 扩展iOS能力 - -Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你需要一些特性但 Weex 并未提供，可以通过扩展自定义的一些插件来实现，通过 WeexSDK 加载。 - -- [Extend iOS](../extend/extend-ios.html) -- [Extend iOS with swift](../extend/extend-ios-with-swift.html) - -## 进阶：构建framework - -构建framework并且引入到您的工程中 - -如果您需要尝试最新的feature或者其它需求，可以根据master上最新的源码进行构建 +## 5. 扩展 Weex -- `git clone https://github.com/apache/incubator-weex.git` -- 打开 WeexSDK.xcodeproj in `weex/ios/sdk`，选择target -  -- 点击编译图标 或者使用快捷键`⌘ + b` -- 产物在 `weex/ios/sdk/Products ` -  +Weex 支持自定义组件、模块，可以参考以下两篇文档。 -- 添加 `js-framework` 到工程中 -  -- 导入framework 和依赖的系统framework -  -- 添加`-ObjC` 到工程设置 - +* [Extend iOS](../extend/extend-ios.html) +* [Extend iOS with swift](../extend/extend-ios-with-swift.html) ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services
![https://img.alicdn.com/tfs/TB161pxoiLaK1RjSZFxXXamPFXa-1465-758.png"](https://img.alicdn.com/tfs/TB161pxoiLaK1RjSZFxXXamPFXa-1465-758.png"){kind=link}