http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/cn/v-0.10/references/wxc/wxc-navpage.md ---------------------------------------------------------------------- diff --git a/doc/source/cn/v-0.10/references/wxc/wxc-navpage.md b/doc/source/cn/v-0.10/references/wxc/wxc-navpage.md deleted file mode 100644 index 6b15175..0000000 --- a/doc/source/cn/v-0.10/references/wxc/wxc-navpage.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: <wxc-navpage> -type: references -order: 3.1 -version: 0.10 ---- - -# <wxc-navpage> <sup>(v0.5+)</sup> - -`<wxc-navpage>` ç»ä»¶æ¯ä¸ä¸ªå å« navbar ç容å¨ç»ä»¶ï¼å¯ä»¥æ ¹æ®ä¸å¡åºæ¯å®å¶ navbar ç»ä»¶ãåæ¶ï¼å¯ä»¥ä½¿ç¨ `navigator` 模åæ§å¶é¡µé¢ç跳转ï¼å ·ä½åè [`navigator module`](../modules/navigator.html)ãä¸è¬æ åµï¼é½æ¯é å navbar ç»ä»¶ä½¿ç¨ãå¦æä¸äºè§£ navigator ç¸å ³ç¥è¯ï¼å»ºè®®å äºè§£ä¸ iOS æè Android çç¸å ³ç»ä»¶ãå¨ H5 ä¸ï¼å ¶å®æ¯ç¸å½äºå¯¼èªæ ã - -ç¨æ³ï¼å¨ `script` æ ç¾ä¸éè¿ä¸ä¸ª `require` è¯å¥å¼å ¥ï¼å³ï¼`require('weex-components');` - -**示ä¾** - -```html -<template> - <div style="flex-direction: column;"> - <wxc-navpage tab-items = {{tabItems}}></wxc-navpage> - </div> -</template> - -<script> - require('weex-components'); - // more -</script> -``` - -å¨ `require('weex-components');` ä¹å ï¼éè¦å¨å·¥ç¨ç®å½ä¸æ§è¡ä»¥ä¸å½ä»¤ï¼ - -```bash -npm install weex-components -``` - -## åç»ä»¶ - -`<wxc-navpage>` ç»ä»¶æ¯æä»»æ Weex ç»ä»¶ã - -## ç¹æ§ - -`<wxc-navpage>` ç»ä»¶çç¹æ§å ¶å®æ¯å¯¹ navbar è¿è¡åè½è®¾ç½®ï¼å¦ä¸å¾æ示ï¼æ¯ navbar çä¸ä¸ªç®å示æã - -![mobile_preview](../images/nav.jpg) - -- `height {number}`ï¼navbar çé«åº¦ï¼é»è®¤æ¯ 88ã - -- `background-color {color}`ï¼navbar çèæ¯é¢è²ï¼é»è®¤æ¯ç½è²ã - -- `title {string}`ï¼navbar çæ é¢ã - -- `title-color {color}`ï¼navbar æ é¢çé¢è²ï¼é»è®¤é»è²ã - -- `left-item-title {string}`ï¼navbar 左侧æé®çæ é¢ã - -- `left-item-color {color}`ï¼navbar 左侧æé®æ é¢é¢è²ï¼é»è®¤é»è²ã - -- `right-item-title {string}`ï¼navbar å³ä¾§æé®æ é¢ã - -- `right-item-color {color}`ï¼navbar å³ä¾§æé®æ é¢é¢è²ï¼é»è®¤é»è²ã - -- `left-item-src {string}`ï¼navbar 左侧æé®çå¾æ ã - -- `right-item-src {string}`ï¼navbar å³ä¾§æé®çå¾æ ã - -### æ ·å¼ - -- éç¨æ ·å¼ï¼æ¯æææéç¨æ ·å¼ - - - ç模å - - `flexbox` å¸å± - - `position` - - `opacity` - - `background-color` - - æ¥ç [ç»ä»¶éç¨æ ·å¼](../common-style.html) - -## äºä»¶ - -`<wxc-navpage>` ç»ä»¶æ¯æå·¦å³ä¸¤é¡¹ç¹å»äºä»¶ã - -- `naviBar.leftItem.click`: å½ navbar ç左侧æé®è¢«ç¹å»æ¶è§¦åäºä»¶ï¼éè¦å¨ `created` æ¶æ注åäºä»¶ã -- `naviBar.rightItem.click`: å½ navbar çå³ä¾§æé®è¢«ç¹å»æ¶è§¦åäºä»¶ï¼éè¦å¨ `created` æ¶æ注åäºä»¶ã - -**示ä¾ï¼** - -```html -<template> - <wxc-navpage height={{...}} background-color="..." title="..." title-color="..." left-item-title="..." left-item-color="..." right-item-src="..."> - <content> ...</content> - </wxc-navpage> -</template> -<script> - require('weex-components'); - module.exports = { - created: function() { - this.$on('naviBar.rightItem.click',function(e){ - //handle your click event here. - }); - - this.$on('naviBar.leftItem.click',function(e){ - //handle your click event here. - }); - } - } -</script> -``` - -- éç¨äºä»¶ - - æ¯æææéç¨äºä»¶ï¼ - - - `click` - - `longpress` - - `appear` - - `disappear` - - æ¥ç [éç¨äºä»¶](../common-event.html) - -## ç¤ºä¾ - -**注æï¼** - -[dotwe](http://dotwe.org) å¹³å°æä¸æ¯æ `wxc-xxx` ç±»åçç»ä»¶ã - -```html -<template> - <wxc-navpage data-role="none" height={{navBarHeight}} background-color="#ff5898" title={{title}} title-color="white" left-item-title="More" left-item-color="white" right-item-src="http://gtms02.alicdn.com/tps/i2/TB1ED7iMpXXXXXEXXXXWA_BHXXX-48-48.png"> - <wxc-panel title="push a new page"> - <wxc-button type="primary" size="small" value="push" onclick="push"></wxc-button> - </wxc-panel> - <wxc-panel title="pop to the last page"> - <wxc-button type="success" size="small" value="pop" onclick="pop"></wxc-button> - </wxc-panel> - </wxc-navpage> -</template> - -<script> - require('weex-components'); - module.exports = { - data: { - navBarHeight: 88, - title: 'Navigator', - dir: 'examples', - baseURL: '', - }, - created: function() { - this.$getConfig(function (config) { - var env = config.env; - if(env.platform == 'iOS'){ - var scale = env.scale; - var deviceWidth = env.deviceWidth / scale; - this.navBarHeight = 64.0 * 750.0 / deviceWidth; - } - }.bind(this)); - - this.$on('naviBar.rightItem.click',function(e){ - duration = 2; - this.$call('modal', 'toast', { - 'message': 'naviBar.rightItem.click', - 'duration': duration - }); - }); - - this.$on('naviBar.leftItem.click',function(e){ - duration = 2; - this.$call('modal', 'toast', { - 'message': 'naviBar.leftItem.click', - 'duration': duration - }); - }); - }, - methods: { - push: function() { - var vm = this; - var params = { - 'url': 'http://dotwe.org/raw/dist/33dfcbe81979c60ba5de72c235d7d0f8.js', - 'animated' : 'true', - } - vm.$call('navigator','push',params, function () {}); - }, - - pop: function() { - var vm = this; - var params = { - 'animated' : 'true', - } - vm.$call('navigator','pop',params, function () {}); - } - } - } -</script> -```
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/cn/v-0.10/references/wxc/wxc-tabbar.md ---------------------------------------------------------------------- diff --git a/doc/source/cn/v-0.10/references/wxc/wxc-tabbar.md b/doc/source/cn/v-0.10/references/wxc/wxc-tabbar.md deleted file mode 100644 index 492c1cd..0000000 --- a/doc/source/cn/v-0.10/references/wxc/wxc-tabbar.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: <wxc-tabbar> -type: references -order: 3.2 -version: 0.10 ---- - -# <wxc-tabbar> - -`<wxc-tabbar>` æ¯ä¸ä¸ªå为 `weex-components` ä¾èµåºçèªå®ä¹ç»ä»¶ã`<wxc-tabbar>` è½å¨çªå£çåºé¨æ¾ç¤º tab 页é¢ï¼æ们å¯ä»¥å¨ä¸åç tab 页é¢ä¹é´åæ¢ã - -ç¨æ³ï¼å¨ `script` æ ç¾ä¸éè¿ä¸ä¸ª `require` è¯å¥å¼å ¥ï¼å³ï¼`require('weex-components');` - -**示ä¾** - -```html -<template> - <div style="flex-direction: column;"> - <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar> - </div> -</template> - -<script> - require('weex-components'); - - module.exports = { - data: {}, - methods: { - // more - } - } -</script> -``` - -å¨ `require('weex-components');` ä¹å ï¼éè¦å¨å·¥ç¨ç®å½ä¸æ§è¡ä»¥ä¸å½ä»¤ï¼ - -```bash -npm install weex-components -``` - -## åç»ä»¶ - -该ç»ä»¶ä¸æ¯æåç»ä»¶ã - -## ç¹æ§ - -- `selected-index {number}`ï¼è®¾ç½®é»è®¤éä¸ç tab ç´¢å¼ï¼é»è®¤å¼ä¸º 0ï¼ç¬¬ä¸ä¸ª tabï¼ã -- `selected-color {color}`ï¼è®¾ç½®å½æ é¢è¢«éä¸æ¶æ é¢çé¢è²ï¼é»è®¤ä¸ºçº¢è²ã -- `unselected-color {color}`ï¼è®¾ç½®å½æ é¢ä¸è¢«éä¸æ¶æ é¢çé¢è²ï¼é»è®¤ä¸ºé»è²ã -- `tab-items {Array[Object]}`ï¼è¯¥å±æ§æ¥åä¸ä¸ª `tabitems` 对象æ°ç», åå«å¯¹åºå°å¯¹åºç tab 页é¢ï¼tab 页é¢ç顺åºè·å¯¹è±¡æ°ç»çä½ç½®å¯¹åºã - æ们å¯ä»¥éè¿è®¾ç½®æ¯ä¸é¡¹çå±æ§æ¥é ç½® tabbar çå¤è§ï¼ - - - `index {integer}`ï¼å¿ å¡«å±æ§ï¼ææäº tabitem ç次åºã - - `title {string}`ï¼è®¾ç½® tabitem çæ é¢ï¼éå¿ å¡«ï¼å½æ é¢ä¸ºç©ºæ¶ï¼æ é¢å°ä¸ä¼è¢«æ¾ç¤º - - `titleColor {color}`ï¼è®¾ç½® tabitem çæ é¢é¢è²ï¼é»è®¤æ¯é»è² - - `image {string}`ï¼å½ tab 页é¢ä¸è¢«éä¸æ¶æ¾ç¤ºç iconï¼å½ä¸æä¾æ¶ï¼ä»ä¹ä¹ä¸æ¾ç¤ºã - - `selectedImage {string}`ï¼è®¾ç½® tab 页é¢è¢«éä¸æ¶æ¾ç¤ºçå¾çï¼ä¸æä¾å¾çæ¶ï¼ä»ä¹ä¹ä¸æ¾ç¤ºã - - `src {string}`ï¼è®¾ç½® tab 对åºç Weex 页é¢ç urlï¼ä¸º http å¼å¤´ã - - `visibility {string}`ï¼å¼ä¸º `visible` | `hidden`ï¼è¯¥å±æ§ææäº tab 页é¢çæ¾ç¤ºç¶æï¼é»è®¤å¼æ¯ visible - -## æ ·å¼ - -- éç¨æ ·å¼ï¼æ¯æææéç¨æ ·å¼ - - - ç模å - - `flexbox` å¸å± - - `position` - - `opacity` - - `background-color` - - æ¥ç [ç»ä»¶éç¨æ ·å¼](../common-style.html) - -## äºä»¶ - -- `tabBar.onClick`ï¼å½ tab 页é¢è¢«éä¸æ¶è§¦åï¼éè¦å¨ `ready` æè `create` çå½å¨æä¸æ³¨åï¼å¦ï¼ - - **示ä¾** - - ```html - <template> - <div style="flex-direction: column;"> - <wxc-tabbar tab-items="{{tabItems}}"></wxc-tabbar> - </div> - </template> - - <script> - require('weex-components'); - module.exports = { - data: { - // ... - }, - created: function() { - var vm = this; - vm.$on('tabBar.onClick',function(e){ - var detail= e.detail; - console.log('tabBar.onClick ' + detail.index); - }); - }, - methods: { - } - } - </script> - ``` - -- éç¨äºä»¶ - æ¯æææéç¨äºä»¶ï¼ - - - `click` - - `longpress` - - `appear` - - `disappear` - - æ¥ç [éç¨äºä»¶](../common-event.html) - -## ç¤ºä¾ - -**注æï¼** - -[dotwe](http://dotwe.org) å¹³å°æä¸æ¯æ `wxc-xxx` ç±»åçç»ä»¶ã - -```html -<template> - <div> - <wxc-tabbar tab-items="{{tabItems}}"></wxc-tabbar> - </div> -</template> - -<script> - require('weex-components'); - module.exports = { - data: { - dir: 'examples', - tabItems: [ - { - index: 0, - title: 'tab1', - titleColor: '#000000', - icon: '', - image: 'http://gtms01.alicdn.com/tps/i1/TB1qw.hMpXXXXagXXXX9t7RGVXX-46-46.png', - selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB16jjPMpXXXXazXVXX9t7RGVXX-46-46.png', - src: 'http://dotwe.org/raw/dist/ba202bcd277285c7f3cf79f9b1055dce.js?itemId=tab1', - visibility: 'visible', - }, - { - index: 1, - title: 'tab2', - titleColor: '#000000', - icon: '', - image: 'http://gtms03.alicdn.com/tps/i3/TB1LEn9MpXXXXaUXpXX9t7RGVXX-46-46.png', - selectedImage: 'http://gtms02.alicdn.com/tps/i2/TB1qysbMpXXXXcnXXXX9t7RGVXX-46-46.png', - src: 'http://dotwe.org/raw/dist/7e24b83c5868dbd4462e30549999245d.js?itemId=tab2', - visibility: 'hidden', - }, - { - index: 2, - title: 'tab3', - titleColor: '#000000', - icon: '', - image: 'http://gtms01.alicdn.com/tps/i1/TB1B0v5MpXXXXcvXpXX9t7RGVXX-46-46.png', - selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB1NxY5MpXXXXcrXpXX9t7RGVXX-46-46.png', - src: 'http://dotwe.org/raw/dist/8a8b49b67084423e097a6b7f549f1453.js?itemId=tab3', - visibility: 'hidden', - } - ], - }, - created: function() { - var vm = this; - vm.$on('tabBar.onClick',function(e){ - var detail= e.detail; - console.log('tabBar.onClick ' + detail.index); - }); - }, - methods: {} - } -</script> -``` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/cn/v-0.10/tools/devtools-android.md ---------------------------------------------------------------------- diff --git a/doc/source/cn/v-0.10/tools/devtools-android.md b/doc/source/cn/v-0.10/tools/devtools-android.md deleted file mode 100644 index 9ce8991..0000000 --- a/doc/source/cn/v-0.10/tools/devtools-android.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Devtools for Android -type: tools -order: 2.1 -version: 0.10 ---- - -# Devtools for Android - -[![GitHub release](https://img.shields.io/github/release/weexteam/weex_devtools_android.svg)](https://github.com/weexteam/weex_devtools_android/releases) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/af0790bf45c9480fb0ec90ad834b89a3)](https://www.codacy.com/app/weex_devtools/weex_devtools_android?utm_source=github.com&utm_medium=referral&utm_content=weexteam/weex_devtools_android&utm_campaign=Badge_Grade) [![Code Climate](https://codeclimate.com/github/weexteam/weex_devtools_android/badges/gpa.svg)](https://codeclimate.com/github/weexteam/weex_devtools_android) [![Issue Count](https://codeclimate.com/github/weexteam/weex_devtools_android/badges/issue_count.svg)](https://codeclimate.com/github/weexteam/weex_devtools_android) [![GitHub issues](https://img.shields.io/github/issues/weexteam/weex_devtools_android.svg)](https://github.com/weexteam/weex_devtools_android/issues) [ ![Download](https://api.bintray.com/packages/alibabaweex/maven/weex_inspector/ima ges/download.svg) ](https://bintray.com/alibabaweex/maven/weex_inspector/_latestVersion) - -Weex devtools is a custom devtools for weex that implements [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol) inspired by [Stetho](https://github.com/facebook/stetho), it is designed to help you quickly inspect your app and debug your JS bundle source in a chrome web page.At present The devtools consist of two part : `Inspector` and `Debugger`. If you want it work well, you must install a `weex-devtool` as debug server. - -- **Inspector** - Inspector can be used to show your `Element` \ `NetWork` \ `Console log` \ `ScreenCast` \ `BoxModel` \ `Native View` and so on. - -- **Debugger** - Debugger can be used to debug your bundle js source, you can set `Breakpoint` \ watch `CallStack`. - -## Install and launch devtools server -Open your terminal then type `npm install -g weex-toolkit` and run.Launch it just type and run the command `weex debug`, then a Chrome web page will be opened. - -## Use on an android device or emulator - -### Taste of first debug with playground -If you are a green hand to the debug of weex, we recommend you to try your first debug with `playground`, what you need to do is just launch the playground and scan the QR code shown in the debug page which wound opened if the `devtools server` have been launched. after you scan the QR code, the web page will list your connected devices. - -![devtools-main](https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png "connecting (multiple) devices") - -#### How Debugger Works -Devtools expands [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol) and the mechanism of communication between client and debug sever is based on [JSON-RPC](https://en.wikipedia.org/wiki/JSON-RPC). - -##### Devtools Client -Devtools Client is integrated in App as aar, it connects to debug server through webscoket protocol with out permission check. I recommend you just packaged it in your debug version consider of the security mechanism. - -##### Devtools Debug Server -Devtools Debug Server is the center node of the communication, it connects to both app and chrome, acts as the turn server of debugging protocol messages and the manager of the js runtime. - -##### Chrome FrontEnd -Chrome's V8 engine acts as the javascript runtime, when debug mode is enabled, all the js code run on it. On the other side we also reuse most of the Chrome's debugging user interface, such as set breakpoint, see call stack and so on. - -![debug sequence diagram](https://img.alicdn.com/tps/TB1igLoMVXXXXawapXXXXXXXXXX-786-1610.jpg "debug sequence diagram") - -### Enable devtools in your own app -Of course you can reuse the code of playground to build your own app, that is the simplest way to let your app's js code debuggable. On the other hand QR code is not necessary, if your review the source code you can draw a conclusion that QR CODE is just a way to set `devtools server` address. following those steps you can do the same thing. - -#### Gradle dependency on inspector. -There are two choices to set the dependency, the Choice A is recommanded if you have no change to weex_sdk or inspector, while if you use your own custom weex_sdk or inspector Choice B is suitable. - - * *A - aar dependency from jcenter*. - ```` - dependencies { - compile 'com.taobao.android:weex_inspector:0.0.8.1' - } - ```` -I strongly recommend you use the latest version since both weex sdk and devtools are developed iteratively and rapidly. See the release version list [here](https://github.com/weexteam/weex_devtools_android/releases). All the release version will publish to the [jcenter repo](https://bintray.com/alibabaweex/maven/weex_inspector). - - * *B - source code dependency.* - - 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 | debug 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 | | - - -#### Initialize in your XXXApplication file. -```` - public class MyApplication extends Application { - public void onCreate() { - super.onCreate(); - initDebugEnvironment(true, "xxx.xxx.xxx.xxx"/*"DEBUG_SERVER_HOST"*/); - } - private void initDebugEnvironment(boolean enable, String host) { - WXEnvironment.sRemoteDebugMode = enable; - WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native"; - } -} -```` - -#### Ship It! - 1. You must launch your bundle server firstly. In your weex dir, run command "./start"; - 2. Launch your remote debug server. Run command `weex debug`, chrome will open a web page show a simply guidance and QR code; - 3. Launch your app and make sure debug mode was enabled. You will see a device list in the chrome web page opened by last step, each device item have two button, `Debugger` and `Inspector`;There are two way to enable debug mode: - * scaning the QR code and handle the content just like the playground have done. - * init it in the XXXApplication by calling `initDebugEnvironment(true, "xxx.xxx.xxx.xxx")`, if you call `initDebugEnvironment(true, "xxx.xxx.xxx.xxx")` after weex sdk inited, you need to call `WXSDKEngine.reload()` to refresh the runtime. - 4. Once you click the button `Inspector` chrome will open a page show the inspector view, on the other side, click the button `Debugger` chrome will open a new page to show the debug view; - - - - - ---- - -#### OPTIONS - -##### [**OPTION**] *set your remote bundle server ip.* - - For example, in the playground it is in the `IndexActivity.java`, you need to change the value of `DEFAULT_IP` in IndexActivity.java from `"your_current_IP"` to a server ip like `"30.30.30.150"`: -```` - private static final String DEFAULT_IP = "30.30.30.150"; // "your_current_IP"; -```` - -##### [**OPTION**] *enable network inspection.* -```` -OkHttpClient client = new OkHttpClient(); -client.networkInterceptors().add(new OkHttpInterceptor()); -```` - -###### Notice - The network inspection only support OKHttpClient right now!!! If you want to use the network inspection to catch your bundle request, you must change your bundle server ip to the real server ip. - -#### Known Issues - You can report issues and bugs [here](https://github.com/weexteam/weex_devtools_android/issues). We will reply as soon as possible. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/cn/v-0.10/tools/devtools-ios.md ---------------------------------------------------------------------- diff --git a/doc/source/cn/v-0.10/tools/devtools-ios.md b/doc/source/cn/v-0.10/tools/devtools-ios.md deleted file mode 100644 index 801b80d..0000000 --- a/doc/source/cn/v-0.10/tools/devtools-ios.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Devtools for iOS -type: tools -order: 2.2 -version: 0.10 ---- - -# Devtools for iOS - -éè¿Chromeå¼åè å·¥å ·è¿ç¨è°è¯ä½ çåçiOS app -## å¯å¨weex-devtoolï¼ -1. å®è£ åè¿è¡ weex-devtool - - ``` - $:npm install -g weex-devtool - - $:weex-devtool - ``` - - å®ä¼å¯å¨chromeæµè§å¨ï¼å±ç¤ºwss ip å°åå¨chromeå°åæ ã -## playground å®è£ WXDevtool -1. å®è£ ä¾èµ. - - $:pod install -### ä½¿ç¨ -1. AppDelegate.m 头æ件 - - ``` - #import "WXDevTool.h" - ``` -2. å¨Appå¯å¨çæ¶ååå§å inspector - - **注æ: The inspector API å¿ é¡»å¨weexåå§åä¹åè°ç¨** - - (void)setDebug:(BOOL)isDebug; - - isDebugé»è®¤æ¯NOï¼é£ä¹ä½ æå¼çæ¯inspect模å¼ãåå¦è®¾ç½®isDebug为YESï¼é£ä¹æå¼debug模å¼åinspect模å¼ã - - (void)launchDevToolDebugWithUrl:(NSString *)url; - - wssip æ¯ å±ç¤ºå¨ chrome å°åæ çwss å°å. - - æå¼ debug æ¨¡å¼ å inspector æ¨¡å¼ - - egï¼- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions - { - [WXDevTool setDebug:YES]; - [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"]; - } - - æå¼ inspect 模å¼, ç§»é¤ @selector(setDebug:) æè å¢å [WXDevTool setDebug:NO] - - egï¼- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions - { - [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"]; - } -3. ç¼è¯åè¿è¡APPï¼chromeä¼æ¾ç¤ºä½ ç设å¤ï¼éæ©inspectorã -4. æ¯æä¸å级å«çLogæå°ã - - eg: #import "WXDevTool.h" - PDLogE()/PDLogW() -### WXDevtoolä¾èµ - -ä½ çappå¿ é¡»é¾æ¥ä¸é¢çframeworks/dylibs -- libicucore.dylib -- CFNetwork.framework -- CoreData.framework -- Security.framework -- Foundation.framework http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/cn/v-0.10/tools/devtools.md ---------------------------------------------------------------------- diff --git a/doc/source/cn/v-0.10/tools/devtools.md b/doc/source/cn/v-0.10/tools/devtools.md deleted file mode 100644 index ab7ddb3..0000000 --- a/doc/source/cn/v-0.10/tools/devtools.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Devtools -type: tools -order: 2 -has_chapter_content: true -version: 0.10 ---- - -# Devtools - -**weex devtools**æ¯ä¸é¨ä¸ºweexå®å¶çä¸æ¬¾å®ç°äº[**Chrome Debugging Protocol**](https://developer.chrome.com/devtools/docs/debugger-protocol)çinspect/debugå·¥å ·ï¼è½å¤å¸®å©ä½ å¿«éæ¥çappè¿è¡ç¶æåè°è¯weexä¸çJavascript代ç ï¼å½åæ¯æ**IOS**å**Android**两个平å°ã -## å®è£ - -``` -$ npm install -g weex-toolkit -``` -## ç¨æ³ - - weex debug [options] [we_file|bundles_dir] - - é项: - -``` --h, --help æ¾ç¤ºå¸®å© --V, --verbose æ¾ç¤ºdebugæå¡å¨è¿è¡æ¶çåç§log --v, --version æ¾ç¤ºçæ¬ --p, --port [port] 设置debugæå¡å¨ç«¯å£å· é»è®¤ä¸º8088 --e, --entry [entry] debugä¸ä¸ªç®å½æ¶,è¿ä¸ªåæ°æå®æ´ä¸ªç®å½çå ¥å£bundleæ件,è¿ä¸ªbundleæ件çå°åä¼æ¾ç¤ºå¨debug主页ä¸(ä½ä¸ºäºç»´ç ) --m, --mode [mode] 设置æ建weæ件çæ¹å¼,transformer æåºç¡çé£æ ¼éååæ件,loader:wepacké£æ ¼ éå模ååçå¤æ件.é»è®¤ä¸ºtransformer -``` -#### å¼å¯è°è¯ - -``` -$weex debug -``` - -å纯å¯å¨ä¸ä¸ªè°è¯æå¡å¨,并åæ¶å¤èµ·chromeæµè§å¨æå¼`è°è¯ä¸»é¡µ`. -è¿ä¸ª`è°è¯ä¸»é¡µ`ä¸ä¼æä¸ä¸ªäºç»´ç ,使ç¨Playground Appæ«è¿ä¸ªäºç»´ç å¯ä»¥å¼å¯Playgroundè°è¯. -å¼å¯è°è¯å,设å¤å表ä¸ä¼åºç°æ¨ç设å¤,æ ¹æ®æ示è¿è¡åç»çè°è¯æä½ -#### è°è¯ weæ件 - -``` -$weex debug your_weex.we -``` - -è¿ä¸ªå½ä»¤ä¼å°your_weex.weç¼è¯æbundlejsæ件 é¨ç½²å°debugæå¡å¨ -并å¯å¨debugæå¡å¨å¦ä¸è¿°å½ä»¤é£æ ·.æå¼ç`è°è¯ä¸»é¡µ`ä¼å¤æ¾ç¤ºä¸ä¸ªäºç»´ç ,使ç¨playground app -æ«è¿ä¸ªç å¯ä»¥å è½½your_weex.we.(注æè¦å æ«æå¼å¯è°è¯çé£ä¸ªç ) -è¿ä¸ªå½ä»¤ä¼èªå¨æ£æµyour_weex.weæ件åå¨,å¦æåç°å 容被修æ¹åç«å³éæ°ç¼è¯é¨ç½²,并å·æ°debuggeré¡µé¢ -. -#### è°è¯æ´ä¸ªbundle/weæ件夹 - -``` -$weex debug your/we/path -e index.we -``` - -è¿ä¸ªå½ä»¤ä¼ç¼è¯ä½ æå®ç®å½ä¸çææçweæ件,并æç¼è¯å¥½çbundlejsé¨ç½²å°debugæå¡å¨,ä»ä»¬çå°åä¼æ å°å° http://lcoalhost:8088/weex/ ä¸ -æ¯å¦ your/we/path/`index.we` å¯ä»¥éè¿http://lcoalhost:8088/weex/index.jsè®¿é® -your/we/path/`demo/test.we` å¯ä»¥éè¿http://lcoalhost:8088/weex/demo/index.js - --eåæ°å¯ä»¥æå®ä¸ä¸ªå ¥å£çweæ件,è¿ä¸ªæ件çå°åä¼æ¾ç¤ºå¨`è°è¯ä¸»é¡µ`ä¸(ä½ä¸ºäºç»´ç ) -## ç¹æ§ -### è¿æ¥è®¾å¤ - -![devtools-main](https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png) -### Inspector - - Inspector è½å¤ç¨æ¥æ¥ç `Element` \ `NetWork` \ `Console log` \ `ScreenCast` \ `BoxModel` \ `Native View` çã - -![devtools-inspector](https://img.alicdn.com/tps/TB1O.nwKFXXXXX8XpXXXXXXXXXX-1436-811.png) -#### Element - -![inspector-element](https://img.alicdn.com/tps/TB1.02bKFXXXXXwaXXXXXXXXXXX-2880-1800.png) -#### NetWork -##### æ¥çç½ç»è¯·æ±çæ»èæ¶åå»¶æ¶ - -![inspector-network](https://img.alicdn.com/tps/TB1NjO_KFXXXXcaaXXXXXXXXXXX-2880-1800.png) -##### æ¥çç½ç»è¯·æ±çheaderåresponse - -![inspector-network](https://img.alicdn.com/tps/TB1ck6lKFXXXXbZXFXXXXXXXXXX-2880-1800.png) -#### æ§å¶å° - -![inspector-console](https://img.alicdn.com/tps/TB1a7HqKFXXXXXMXFXXXXXXXXXX-2880-1800.png) -#### èµæº - -![inspector-resource](https://img.alicdn.com/tps/TB1oY6cKFXXXXXQaXXXXXXXXXXX-2880-1800.png) -### Debugger - - è°è¯å¨ç¨æ¥è°è¯weexä¸çjs代ç ï¼è½å¤è®¾ç½®æç¹ãæ¥çè°ç¨æ ã - -![devtools-debugger](https://img.alicdn.com/tps/TB1aPTEKFXXXXXaXXXXXXXXXXXX-1436-813.png) -##### Breakpoint and CallStack - -![debugger-breakpoint](https://img.alicdn.com/tps/TB1_trbKFXXXXc0XVXXXXXXXXXX-2880-1800.png) -#### éædevtools -- Android - - 请åèææ¡£ [Weex devtools (Android)](../advanced/integrate-devtools-to-android.html), å ¶ä¸æ详ç»è¯´æã -- IOS - - 请åèææ¡£ [Weex devtools (IOS)](../advanced/integrate-devtools-to-ios.html), å ¶ä¸æ详ç»è¯´æã http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/cn/v-0.10/tools/index.md ---------------------------------------------------------------------- diff --git a/doc/source/cn/v-0.10/tools/index.md b/doc/source/cn/v-0.10/tools/index.md deleted file mode 100644 index 06c424a..0000000 --- a/doc/source/cn/v-0.10/tools/index.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: CLI (è±) -type: tools -order: 1 -has_chapter_content: true -version: 0.10 ---- - -# CLI - -Please access [npmjs.com](https://www.npmjs.com/package/weex-toolkit) for latest version - -Weex CLI tool set - -## Pre Install -some dependencies need recent version of npm to install - -if your -``` -$ npm --version -``` -output less than `2.15.1`, please run below cmd to upgrade your npm at first -``` -sudo npm install -g npm -``` - -## Install -``` -$npm install -g weex-toolkit -``` - -## Usage - -``` -$weex foo/bar/input_path [options] - -$weex create file_name [options] - -Options: - --qr display QR code for native runtime, **default action** - -o,--output transform weex we file to JS Bundle, output path (single JS bundle file or dir) - [for create sub cmd] it specified we file output path - --watch using with -o, watch input path, auto run transform if change - happen - -s,--server start a http file server, weex .we file will be transformed to JS - bundle on the server, specify local root path using the option - --port http listening port number, default is 8081 - --wsport websocket listening port number, default is 8082 - -f, --force [for create sub cmd] force to replace exsisting file(s) - --version show version of weex toolkit - --help Show help -``` - -## Examples - -#### create a `we file`(weex source file) using standard template -``` -$weex create hello-world-weex -``` -a file named 'hello-world-weex.we' will be created in current directory - - -#### transform a `we file` to JS Bundle -``` -$weex your_best_weex.we -o . -``` -`your_best_weex.we` will be transformed to JS Bundle file `your_best_weex.js` and saved in your current directory - -#### transform a `we file` to JS Bundle, watch this fileï¼auto run transformer if any change happens. -``` -$weex your_best_weex.we -o . --watch -``` - -#### transform every we file in a directory -``` -$weex we/file/storage/path -o outputpath -``` -every `we file` in `we/file/storage/path` will be transformed to JS Bundle and saved in `outputpath` path - -#### preview your we file using Weex Playground App -download & install [weex playground App](http://alibaba.github.io/weex/download.html) -``` -$weex your_best_weex.we --qr -``` -a QR code will display in your terminal, using Playground App scan that. - - -#### start http server -``` -$weex -s . -``` -a http server will start running, your current directory(.) will be the document root for the server, every weex.we file will be transformed to JS Bundle when accessed through the server - -## Issue & Feedback - -[Github Issue List](https://github.com/weexteam/weex-toolkit/issues) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/cn/v-0.10/tools/playground.md ---------------------------------------------------------------------- diff --git a/doc/source/cn/v-0.10/tools/playground.md b/doc/source/cn/v-0.10/tools/playground.md deleted file mode 100644 index dc7bbec..0000000 --- a/doc/source/cn/v-0.10/tools/playground.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Playground -type: tools -order: 4 -has_chapter_content: true -version: 0.10 ---- - -Weex Playground App -=================== - -Weex çææ£çä¸ä¸ªé¨åæ¯ Native Runtimeãä½ ç `.we` æ件å¯ä»¥ä½¿ç¨ weex-toolkit CLI å¨æµè§å¨ä¸é¢è§ Web ææï¼ä¹å¯ä»¥éè¿ Weex Playground App è¿æ ·ä¸ä¸ªåç¬çåºç¨æ¥é¢è§åçææãä¸ä» å¦æ¤ï¼Weex playground App è¿å ç½®äºå¤§éç Demo åå±ç¤ºæ¡ä¾ï¼è¿æ ·ä½ å°±å¯ä»¥æ´å 容æå°ä½éªå° Weex å¨ Native å±é¢çææäºã - -Playground App çä¸è½½å°åå¨ [è¿é](http://alibaba.github.io/weex/download.html)ã - -æªå¾ï¼ - -![mobile_preview](http://gtms01.alicdn.com/tps/i1/TB1bC5LMpXXXXb7XXXXA0gJJXXX-720-1280.png) - -ä¸å¾å°±æ¯ Weex Playground App ç主çé¢ï¼ç¹å»å表ä¸çæ¯ä¸é¡¹å³å¯è¿å ¥æ个 Demo æè å±ç¤ºæ¡ä¾ãç¨ Weex toolkit CLI çæäºç»´ç ï¼ç¨ Weex Playground App æ«æäºç»´ç ï¼ç¹å»å³ä¸è§å¾æ å³å¯å¼å§æ«æï¼å¯ä»¥é¢è§ä½ çæ件ã - -请åé [èµ·æ¥æç¨](/get-started.md)ã http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/cn/v-0.10/tools/transformer.md ---------------------------------------------------------------------- diff --git a/doc/source/cn/v-0.10/tools/transformer.md b/doc/source/cn/v-0.10/tools/transformer.md deleted file mode 100644 index 47a7b4c..0000000 --- a/doc/source/cn/v-0.10/tools/transformer.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Transormer (è±) -type: tools -order: 3 -has_chapter_content: true -version: 0.10 ---- - -# gulp-weex - -> gulp plugin for weex transformer - -## Usage - -```javascript -var gulp = require('gulp') -var weex = require('gulp-weex') - -gulp.task('default', function () { - return gulp.src('src/*.html') - .pipe(weex({})) - .pipe(gulp.dest('./dest')) -}) -``` - -## Options - -### oldFormat - -whether transform to old format. - -default: `false`. - -### isEntry - -whether is an entry module which has `bootstrap(...)`. - -default: `true`. \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/download.ejs ---------------------------------------------------------------------- diff --git a/doc/source/download.ejs b/doc/source/download.ejs deleted file mode 100644 index ef2c86f..0000000 --- a/doc/source/download.ejs +++ /dev/null @@ -1,3 +0,0 @@ -layout: download -type: download ---- \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/a.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/a.md b/doc/source/examples/a.md deleted file mode 100644 index 1080cb9..0000000 --- a/doc/source/examples/a.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: a -type: example -layout: example -bundle_name: a ---- - -```html -<template> - <div class="wrapper"> - <a class="button" href="http://dotwe.org/raw/dist/3e0e40f9ddad79f98cd236753965ffd8.js"> - <text class="text">Jump</text> - </a> - </div> -</template> - -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .button { - width: 450px; - margin-top: 30px; - margin-left: 150px; - padding-top: 20px; - padding-bottom: 20px; - border-width: 2px; - border-style: solid; - border-color: #DDDDDD; - background-color: #F5F5F5 - } - .text { - font-size: 60px; - color: #666666; - text-align: center; - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/animation.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/animation.md b/doc/source/examples/animation.md deleted file mode 100644 index 819fd9e..0000000 --- a/doc/source/examples/animation.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: animation -type: example -layout: example -web_bundle_url: ../js/examples/animation.web.js ---- - -```html -<template> - <div class="wrapper"> - <div ref="test" @click="move" class="box"></div> - </div> -</template> - -<script> - const animation = weex.requireModule('animation') - const modal = weex.requireModule('modal') - - export default { - methods: { - move () { - var testEl = this.$refs.test; - animation.transition(testEl, { - styles: { - color: '#FF0000', - transform: 'translate(250px, 100px)', - transformOrigin: 'center center' - }, - duration: 800, //ms - timingFunction: 'ease', - delay: 0 //ms - }, function () { - modal.toast({ message: 'animation finished.' }) - }) - } - } - } -</script> - -<style scoped> - .box { - width: 250px; - height: 250px; - background-color: #DDD; - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/clipboard.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/clipboard.md b/doc/source/examples/clipboard.md deleted file mode 100644 index 7eab9e9..0000000 --- a/doc/source/examples/clipboard.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: clipboard -type: example -layout: example -web_bundle_url: ../js/examples/clipboard.web.js ---- - -```html -<template> - <div> - <div class="div"> - <text class="text" @click="onItemClick">{{message}}</text> - </div> - <div class="div"> - <text class="text" @click="setContent">Click to copy: {{tobecopied}}</text> - </div> - </div> -</template> - -<script> - const clipboard = weex.requireModule('clipboard') - - export default { - data () { - return { - tobecopied: 'yay!', - message: 'nothing.' - } - }, - - methods: { - setContent () { - clipboard.setString(this.tobecopied) - }, - onItemClick () { - this.message = 'clicked! ' - clipboard.getString(ret => { - this.message = 'text from clipboard:' + ret.data - }) - } - } - } -</script> - -<style scoped> - .div { - flex-direction: row; - justify-content: space-between; - align-items: center; - width: 750px; - height: 90px; - padding-left: 30px; - padding-right: 30px; - - border-bottom-width: 1px; - border-style: solid; - border-color: #DDDDDD; - } - .text { - width: 750px; - height: 90px; - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/div.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/div.md b/doc/source/examples/div.md deleted file mode 100644 index b67f061..0000000 --- a/doc/source/examples/div.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: div -type: example -layout: example -web_bundle_url: ../js/examples/div.web.js ---- - -```html -<template> - <div> - <div class="box"></div> - </div> -</template> - -<style scoped> - .box { - border-width: 2px; - border-style: solid; - border-color: #BBB; - width: 250px; - height: 250px; - margin-top: 250px; - margin-left: 250px; - background-color: #EEE; - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/dom-rect.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/dom-rect.md b/doc/source/examples/dom-rect.md deleted file mode 100644 index 9b786ba..0000000 --- a/doc/source/examples/dom-rect.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: dom-rect -type: example -layout: example -web_bundle_url: ../js/examples/dom-rect.web.js ---- - -```html -<template> - <div class="wrapper" style='margin-top:200px'> - <div ref="box" class="box"> - <text class="info">Width: {{size.width}}</text> - <text class="info">Height: {{size.height}}</text> - <text class="info">Top: {{size.top}}</text> - <text class="info">Bottom: {{size.bottom}}</text> - <text class="info">Left: {{size.left}}</text> - <text class="info">Right: {{size.right}}</text> - </div> - - <text class="info btn" @click='click()'>{{this.tip}}</text> - - </div> -</template> - -<script> - const dom = weex.requireModule('dom') - - function round(size) { - var roundSize = { - 'width': Math.round(size.width), - 'height': Math.round(size.height), - 'top': Math.round(size.top), - 'bottom': Math.round(size.bottom), - 'left': Math.round(size.left), - 'right': Math.round(size.right) - } - return roundSize - } - - export default { - data () { - return { - size: { - width: 0, - height: 0, - top: 0, - bottom: 0, - left: 0, - right: 0 - }, - ref:"viewport", - tip:"get box rect" - } - }, - mounted () { - const result = dom.getComponentRect(this.ref, option => { - console.log('getComponentRect:', option) - this.size = round.call(this,option.size); - }) - }, - - methods:{ - click:function() { - if (this.ref === 'viewport') { - this.ref = this.$refs.box; - this.tip = "get viewport rect" - } else { - this.ref = 'viewport' - this.tip = "get box rect" - } - - const result = dom.getComponentRect(this.ref, option => { - console.log('getComponentRect:', option) - this.size = round.call(this,option.size); - }) - } - } - - } -</script> - -<style scoped> - .btn { - margin-top:20px; - border-width:2px; - border-style: solid; - border-radius:10px; - width:300px; - margin-left:170px; - padding-left:35px; - border-color: rgb(162, 217, 192); - - } - .btn:active { - background-color: #8fbc8f; - border-color: gray; - } - - .box { - align-items:center; - margin-left: 150px; - width: 350px; - height: 400px; - background-color: #DDD; - border-width: 2px; - border-style: solid; - border-color: rgb(162, 217, 192); - background-color: rgba(162, 217, 192, 0.2); - } - .info { - font-size: 40px; - top:30px; - margin-left:20px; - font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; - color: #41B883; - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/dom-scroll.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/dom-scroll.md b/doc/source/examples/dom-scroll.md deleted file mode 100644 index dca612f..0000000 --- a/doc/source/examples/dom-scroll.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: dom-scroll -type: example -layout: example -web_bundle_url: ../js/examples/dom-scroll.web.js ---- - -```html -<template> - <div class="wrapper"> - <scroller class="scroller"> - <div class="row" v-for="(name, index) in rows" :ref="'item'+index"> - <text class="text" :ref="'text'+index">{{name}}</text> - </div> - </scroller> - <div class="group"> - <text @click="goto10" class="button">Go to 10</text> - <text @click="goto20" class="button">Go to 20</text> - </div> - </div> -</template> - -<script> - const dom = weex.requireModule('dom') - - export default { - data () { - return { - rows: [] - } - }, - created () { - for (let i = 0; i < 30; i++) { - this.rows.push('row ' + i) - } - }, - methods: { - goto10 (count) { - const el = this.$refs.item10[0] - dom.scrollToElement(el, {}) - }, - goto20 (count) { - const el = this.$refs.item20[0] - dom.scrollToElement(el, { offset: 0 }) - } - } - } -</script> - -<style scoped> - .scroller { - width: 700px; - height: 700px; - border-width: 3px; - border-style: solid; - border-color: rgb(162, 217, 192); - margin-left: 25px; - } - .row { - height: 100px; - flex-direction: column; - justify-content: center; - padding-left: 30px; - border-bottom-width: 2px; - border-bottom-style: solid; - border-bottom-color: #DDDDDD; - } - .text { - font-size: 45px; - color: #666666; - } - .group { - flex-direction: row; - /*justify-content: space-around;*/ - justify-content: center; - margin-top: 60px; - } - .button { - width: 200px; - padding-top: 20px; - padding-bottom: 20px; - font-size: 40px; - margin-left: 30px; - margin-right: 30px; - text-align: center; - color: #41B883; - border-width: 2px; - border-style: solid; - border-color: rgb(162, 217, 192); - background-color: rgba(162, 217, 192, 0.2); - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/image.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/image.md b/doc/source/examples/image.md deleted file mode 100644 index f3b1015..0000000 --- a/doc/source/examples/image.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: image -type: example -layout: example -web_bundle_url: ../js/examples/image.web.js ---- - -```html -<template> - <scroller class="wrapper" > - <div class="page-head" > - <image class="title-bg" resize="cover" src="https://img.alicdn.com/tps/TB1dX5NOFXXXXc6XFXXXXXXXXXX-750-202.png"></image> - <div class="title-box"> - <text class="title">Alan Mathison Turing</text> - </div> - </div> - <div class="article"> - <text class="paragraph">Alan Mathison Turing ( 23 June 1912 â 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.</text> - <text class="paragraph">During the Second World War, Turing worked for the Government Code and Cypher School (GC&CS) at Bletchley Park, Britain's codebreaking centre. For a time he led Hut 8, the section responsible for German naval cryptanalysis. He devised a number of techniques for speeding the breaking of German ciphers, including improvements to the pre-war Polish bombe method, an electromechanical machine that could find settings for the Enigma machine. Turing played a pivotal role in cracking intercepted coded messages that enabled the Allies to defeat the Nazis in many crucial engagements, including the Battle of the Atlantic; it has been estimated that this work shortened the war in Europe by more than two years and saved over fourteen million lives.</text> - <text class="paragraph">After the war, he worked at the National Physical Laboratory, where he designed the ACE, among the first designs for a stored-program computer. In 1948 Turing joined Max Newman's Computing Machine Laboratory at the Victoria University of Manchester, where he helped develop the Manchester computers and became interested in mathematical biology. He wrote a paper on the chemical basis of morphogenesis, and predicted oscillating chemical reactions such as the BelousovâZhabotinsky reaction, first observed in the 1960s.</text> - <text class="paragraph">Turing was prosecuted in 1952 for homosexual acts, when by the Labouchere Amendment, "gross indecency" was still criminal in the UK. He accepted chemical castration treatment, with DES, as an alternative to prison. Turing died in 1954, 16 days before his 42nd birthday, from cyanide poisoning. An inquest determined his death as suicide, but it has been noted that the known evidence is also consistent with accidental poisoning. In 2009, following an Internet campaign, British Prime Minister Gordon Brown made an official public apology on behalf of the British government for "the appalling way he was treated." Queen Elizabeth II granted him a posthumous pardon in 2013.</text> - </div> - </scroller> -</template> - -<style> - .page-head { - width: 750px; - height: 200px; - } - .title-bg { - width: 750px; - height: 200px; - } - .title-box { - width: 750px; - height: 200px; - justify-content: center; - align-items: center; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - .title { - color: #ffffff; - font-size: 32px; - font-weight: bold; - } - .article { - padding: 20px; - } - .paragraph{ - margin-bottom: 15px; - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/indicator.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/indicator.md b/doc/source/examples/indicator.md deleted file mode 100644 index 837e4df..0000000 --- a/doc/source/examples/indicator.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: indicator -type: example -layout: example -web_bundle_url: ../js/examples/indicator.web.js ---- - -```html -<template> - <div> - <slider class="slider" interval="4500" @change="onchange"> - <div class="frame" v-for="img in imageList"> - <image class="image" resize="cover" :src="img.src"></image> - <text class="title">{{img.title}}</text> - </div> - <indicator class="indicator"></indicator> - </slider> - </div> -</template> - -<style> - .image { - width: 700px; - height: 700px; - } - .slider { - margin-top: 25px; - margin-left: 25px; - width: 700px; - height: 700px; - border-width: 2px; - border-style: solid; - border-color: #41B883; - } - .title { - position: absolute; - top: 20px; - left: 20px; - padding-left: 20px; - width: 200px; - color: #FFFFFF; - font-size: 36px; - line-height: 60px; - background-color: rgba(0, 0, 0, 0.3); - } - .frame { - width: 700px; - height: 700px; - position: relative; - } - .indicator { - width: 700px; - height: 700px; - item-color: green; - item-selected-color: red; - item-size: 50px; - top: 200px; - left: 200px; - } -</style> - -<script> - export default { - data () { - return { - imageList: [ - { title: 'item A', src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'}, - { title: 'item B', src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'}, - { title: 'item C', src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'} - ] - } - }, - methods: { - onchange (event) { - console.log('changed:', event.index) - } - } - } -</script> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/input.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/input.md b/doc/source/examples/input.md deleted file mode 100644 index a6e1df4..0000000 --- a/doc/source/examples/input.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: input -type: example -layout: example -web_bundle_url: ../js/examples/input.web.js ---- - -```html -<template> - <div class="wrapper"> - <input ref="input" class="input" type="text" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"> - </div> -</template> - -<script> - const modal = weex.requireModule('modal') - - export default { - methods: { - oninput (event) { - console.log('oninput:', event.value) - modal.toast({ - message: `oninput: ${event.value}`, - duration: 0.8 - }) - }, - onchange (event) { - console.log('onchange:', event.value) - modal.toast({ - message: `onchange: ${event.value}`, - duration: 0.8 - }) - }, - onfocus (event) { - console.log('onfocus:', event.value) - modal.toast({ - message: `onfocus: ${event.value}`, - duration: 0.8 - }) - }, - onblur (event) { - console.log('onblur:', event.value) - modal.toast({ - message: `input blur: ${event.value}`, - duration: 0.8 - }) - } - } - } -</script> - -<style> - .input { - font-size: 50px; - width: 650px; - margin-top: 50px; - margin-left: 50px; - padding-top: 20px; - padding-bottom: 20px; - padding-left: 20px; - padding-right: 20px; - color: #666666; - border-width: 2px; - border-style: solid; - border-color: #41B883; - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/list.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/list.md b/doc/source/examples/list.md deleted file mode 100644 index d95e631..0000000 --- a/doc/source/examples/list.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: list -type: example -layout: example -web_bundle_url: ../js/examples/list.web.js ---- - -```html -<template> - <list class="list" @loadmore="fetch" loadmoreoffset="10"> - <cell class="cell" v-for="num in lists"> - <div class="panel"> - <text class="text">{{num}}</text> - </div> - </cell> - </list> -</template> - -<script> - const modal = weex.requireModule('modal') - const LOADMORE_COUNT = 4 - - export default { - data () { - return { - lists: [1, 2, 3, 4, 5] - } - }, - methods: { - fetch (event) { - modal.toast({ message: 'loadmore', duration: 1 }) - - setTimeout(() => { - const length = this.lists.length - for (let i = length; i < length + LOADMORE_COUNT; ++i) { - this.lists.push(i + 1) - } - }, 800) - } - } - } -</script> - -<style scoped> - .panel { - width: 600px; - height: 250px; - margin-left: 75px; - margin-top: 35px; - margin-bottom: 35px; - flex-direction: column; - justify-content: center; - border-width: 2px; - border-style: solid; - border-color: rgb(162, 217, 192); - background-color: rgba(162, 217, 192, 0.2); - } - .text { - font-size: 50px; - text-align: center; - color: #41B883; - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/modal.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/modal.md b/doc/source/examples/modal.md deleted file mode 100644 index 7a9c3cd..0000000 --- a/doc/source/examples/modal.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: modal -type: example -layout: example -web_bundle_url: ../js/examples/modal.web.js ---- - -```html -<template> - <div class="wrapper"> - <text class="button" @click="showToast">Toast</text> - <text class="button" @click="showAlert">Alert</text> - <text class="button" @click="showConfirm">Confirm</text> - <text class="button" @click="showPrompt">Prompt</text> - </div> -</template> - -<script> - var modal = weex.requireModule('modal') - - export default { - methods: { - showToast (event) { - console.log('will show toast') - modal.toast({ - message: 'This is a toast', - duration: 0.3 - }) - }, - showAlert (event) { - console.log('will show alert') - modal.alert({ - message: 'This is a alert', - duration: 0.3 - }, function (value) { - console.log('alert callback', value) - }) - }, - showConfirm (event) { - console.log('will show confirm') - modal.confirm({ - message: 'Do you confirm ?', - duration: 0.3 - }, function (value) { - console.log('confirm callback', value) - }) - }, - showPrompt (event) { - console.log('will show prompt') - modal.prompt({ - message: 'This is a prompt', - duration: 0.3 - }, function (value) { - console.log('prompt callback', value) - }) - } - } - }; -</script> - -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .button { - font-size: 60px; - width: 450px; - text-align: center; - margin-top: 30px; - margin-left: 150px; - padding-top: 20px; - padding-bottom: 20px; - border-width: 2px; - border-style: solid; - color: #666666; - border-color: #DDDDDD; - background-color: #F5F5F5 - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/navigator.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/navigator.md b/doc/source/examples/navigator.md deleted file mode 100644 index a2fcd9a..0000000 --- a/doc/source/examples/navigator.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: navigator -type: example -layout: example -web_bundle_url: ../js/examples/navigator.web.js ---- - -```html -<template> - <div class="wrapper"> - <text class="button" @click="jump">Jump</text> - </div> -</template> - -<script> - var navigator = weex.requireModule('navigator') - var modal = weex.requireModule('modal') - - export default { - methods: { - jump (event) { - console.log('will jump') - navigator.push({ - url: 'http://dotwe.org/raw/dist/519962541fcf6acd911986357ad9c2ed.js', - animated: "true" - }, event => { - modal.toast({ message: 'callback: ' + event }) - }) - } - } - }; -</script> - -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .button { - font-size: 60px; - width: 450px; - text-align: center; - margin-top: 30px; - margin-left: 150px; - padding-top: 20px; - padding-bottom: 20px; - border-width: 2px; - border-style: solid; - color: #666666; - border-color: #DDDDDD; - background-color: #F5F5F5 - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/refresh.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/refresh.md b/doc/source/examples/refresh.md deleted file mode 100644 index b5f200c..0000000 --- a/doc/source/examples/refresh.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: refresh -type: example -layout: example -web_bundle_url: ../js/examples/refresh.web.js ---- - -```html -<template> - <scroller class="scroller"> - <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'"> - <text class="indicator">Refreshing ...</text> - </refresh> - <div class="cell" v-for="num in lists"> - <div class="panel"> - <text class="text">{{num}}</text> - </div> - </div> - </scroller> -</template> - -<script> - const modal = weex.requireModule('modal') - - export default { - data () { - return { - refreshing: false, - lists: [1, 2, 3, 4, 5] - } - }, - methods: { - onrefresh (event) { - console.log('is refreshing') - modal.toast({ message: 'refresh', duration: 1 }) - this.refreshing = true - setTimeout(() => { - this.refreshing = false - }, 2000) - }, - onpullingdown (event) { - console.log('is onpulling down') - modal.toast({ message: 'pulling down', duration: 1 }) - } - } - } -</script> - -<style scoped> - .indicator { - color: #888888; - font-size: 42px; - text-align: center; - } - .panel { - width: 600px; - height: 250px; - margin-left: 75px; - margin-top: 35px; - margin-bottom: 35px; - flex-direction: column; - justify-content: center; - border-width: 2px; - border-style: solid; - border-color: #DDDDDD; - background-color: #F5F5F5; - } - .text { - font-size: 50px; - text-align: center; - color: #41B883; - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/scroller.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/scroller.md b/doc/source/examples/scroller.md deleted file mode 100644 index 43c5c85..0000000 --- a/doc/source/examples/scroller.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: scroller -type: example -layout: example -web_bundle_url: ../js/examples/scroller.web.js ---- - -```html -<template> - <div class="wrapper"> - <scroller class="scroller"> - <div class="row" v-for="(name, index) in rows" :ref="'item'+index"> - <text class="text" :ref="'text'+index">{{name}}</text> - </div> - </scroller> - <div class="group"> - <text @click="goto10" class="button">Go to 10</text> - <text @click="goto20" class="button">Go to 20</text> - </div> - </div> -</template> - -<script> - const dom = weex.requireModule('dom') - - export default { - data () { - return { - rows: [] - } - }, - created () { - for (let i = 0; i < 30; i++) { - this.rows.push('row ' + i) - } - }, - methods: { - goto10 (count) { - const el = this.$refs.item10[0] - dom.scrollToElement(el, {}) - }, - goto20 (count) { - const el = this.$refs.item20[0] - dom.scrollToElement(el, { offset: 0 }) - } - } - } -</script> - -<style scoped> - .scroller { - width: 700px; - height: 700px; - border-width: 3px; - border-style: solid; - border-color: rgb(162, 217, 192); - margin-left: 25px; - } - .row { - height: 100px; - flex-direction: column; - justify-content: center; - padding-left: 30px; - border-bottom-width: 2px; - border-bottom-style: solid; - border-bottom-color: #DDDDDD; - } - .text { - font-size: 45px; - color: #666666; - } - .group { - flex-direction: row; - justify-content: center; - margin-top: 60px; - } - .button { - width: 200px; - padding-top: 20px; - padding-bottom: 20px; - font-size: 40px; - margin-left: 30px; - margin-right: 30px; - text-align: center; - color: #41B883; - border-width: 2px; - border-style: solid; - border-color: rgb(162, 217, 192); - background-color: rgba(162, 217, 192, 0.2); - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/slider.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/slider.md b/doc/source/examples/slider.md deleted file mode 100644 index 89e11e5..0000000 --- a/doc/source/examples/slider.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: slider -type: example -layout: example -web_bundle_url: ../js/examples/slider.web.js ---- - -```html -<template> - <div> - <slider class="slider" interval="3000" auto-play="true"> - <div class="frame" v-for="img in imageList"> - <image class="image" resize="cover" :src="img.src"></image> - </div> - </slider> - </div> -</template> - -<style scoped> - .image { - width: 700px; - height: 700px; - } - .slider { - margin-top: 25px; - margin-left: 25px; - width: 700px; - height: 700px; - border-width: 2px; - border-style: solid; - border-color: #41B883; - } - .frame { - width: 700px; - height: 700px; - position: relative; - } -</style> - -<script> - export default { - data () { - return { - imageList: [ - { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'}, - { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'}, - { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'} - ] - } - } - } -</script> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/storage.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/storage.md b/doc/source/examples/storage.md deleted file mode 100644 index e5819bb..0000000 --- a/doc/source/examples/storage.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: storage -type: example -layout: example -web_bundle_url: ../js/examples/storage.web.js ---- - -```html -<template> - <div class="list"> - <div class="group center"> - <div class="panel"><text class="text">{{state}}</text></div> - </div> - <div class="group"> - <div class="panel"><text class="text" @click="setItem">set</text></div> - <div class="panel"><text class="text" @click="getItem">get</text></div> - <div class="panel"><text class="text" @click="removeItem">remove</text></div> - <div class="panel"><text class="text" @click="getAll">all</text></div> - </div> - </div> -</template> - -<script> - const storage = weex.requireModule('storage') - const modal = weex.requireModule('modal') - - export default { - data () { - return { - keys: '[]', - length: 0, - state: '----' - } - }, - methods: { - setItem () { - storage.setItem('name', 'Hanks', event => { - this.state = 'set success' - console.log('set success') - }) - }, - getItem () { - storage.getItem('name', event => { - console.log('get value:', event.data) - this.state = 'value: ' + event.data - }) - }, - removeItem () { - storage.removeItem('name', event => { - console.log('delete value:', event.data) - this.state = 'deleted' - }) - }, - getAll () { - storage.getAllKeys(event => { - // modal.toast({ message: event.result }) - if (event.result === 'success') { - modal.toast({ - message: 'props: ' + event.data.join(', ') - }) - } - }) - } - } - } -</script> - -<style scoped> - .panel { - height: 100px; - flex-direction: column; - justify-content: center; - border-width: 2px; - border-style: solid; - border-color: rgb(162, 217, 192); - background-color: rgba(162, 217, 192, 0.2); - } - .group { - flex-direction: row; - justify-content: space-between; - width: 650px; - margin-left: 50px; - margin-top: 50px; - margin-bottom: 50px; - } - .center { - justify-content: center; - } - .text { - font-size: 50px; - text-align: center; - padding-left: 25px; - padding-right: 25px; - color: #41B883; - } - .small { - font-size: 32px; - padding-left: 35px; - padding-right: 35px; - color: #41B883; - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/stream.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/stream.md b/doc/source/examples/stream.md deleted file mode 100644 index 2a4d47a..0000000 --- a/doc/source/examples/stream.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: stream -type: example -layout: example -web_bundle_url: ../js/examples/stream.web.js ---- - -```html -<template> - <div class="wrapper"> - <div class="group"> - <text class="title">Weex Star :</text> - <text class="count">{{weexStar}}</text> - </div> - <div class="group"> - <text class="title">Vue Star :</text> - <text class="count">{{vueStar}}</text> - </div> - </div> -</template> - -<script> - var stream = weex.requireModule('stream') - export default { - data () { - return { - weexStar: 'unknown', - vueStar: 'unknown' - } - }, - - methods: { - getStarCount (repo, callback) { - return stream.fetch({ - method: 'GET', - type: 'json', - url: 'https://api.github.com/repos/' + repo - }, callback) - } - }, - created () { - this.getStarCount('alibaba/weex', res => { - this.weexStar = res.ok ? res.data.stargazers_count : '(network error)' - }) - this.getStarCount('vuejs/vue', res => { - this.vueStar = res.ok ? res.data.stargazers_count : '(network error)' - }) - } - } -</script> - - -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .group { - flex-direction: row; - justify-content: center; - margin-bottom: 40px; - } - .title { - font-size: 45px; - color: #888888; - } - .count { - font-size: 45px; - font-weight: bold; - margin-left: 12px; - color: #41B883; - } -</style> -``` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/switch.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/switch.md b/doc/source/examples/switch.md deleted file mode 100644 index 12b2a2e..0000000 --- a/doc/source/examples/switch.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: switch -type: example -layout: example -web_bundle_url: ../js/examples/switch.web.js ---- - -```html -<template> - <div> - <div class="example"> - <text class="label">normal</text> - <switch></switch> - </div> - <div class="example"> - <text class="label">checked</text> - <switch checked="true"></switch> - </div> - <div class="example"> - <text class="label">disabled</text> - <switch disabled="true" checked="true"></switch> - <switch disabled="true"></switch> - </div> - <div class="example"> - <text class="label">onchange</text> - <switch @change="onchange"></switch> - <text class="info">{{checked}}</text> - </div> - </div> -</template> - -<script> - export default { - data () { - return { - checked: false - } - }, - methods: { - onchange (event) { - console.log(`onchage, value: ${event.value}`) - this.checked = event.value - } - } - } -</script> - -<style scoped> - .example { - flex-direction: row; - justify-content: flex-start; - margin-top: 60px; - } - .label { - font-size: 40px; - line-height: 60px; - width: 350px; - color: #666; - text-align: right; - margin-right: 20px; - } - .info { - font-size: 30px; - line-height: 60px; - color: #BBB; - margin-left: 10px; - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/text.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/text.md b/doc/source/examples/text.md deleted file mode 100644 index 83438ae..0000000 --- a/doc/source/examples/text.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: text -type: example -layout: example -web_bundle_url: ../js/examples/text.web.js ---- - -```html -<template> - <div class="wrapper"> - <div class="panel"> - <text class="text" lines="3">Weex æ¯ä¸å¥ç®åæç¨ç跨平å°å¼åæ¹æ¡ï¼è½ä»¥ Web çå¼åä½éªæ建é«æ§è½ãå¯æ©å±çåçåºç¨ãVue æ¯ä¸ä¸ªè½»é并ä¸åè½å¼ºå¤§çæ¸è¿å¼å端æ¡æ¶ã</text> - </div> - <div class="panel"> - <text class="text" lines="3">Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework. </text> - </div> - </div> -</template> - - -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .panel { - width: 600px; - margin-left: 75px; - border-width: 2px; - border-style: solid; - border-color: #BBB; - padding-top: 15px; - padding-bottom: 15px; - padding-left: 15px; - padding-right: 15px; - margin-bottom: 30px; - } - .text { - lines: 3; - color: #666666; - font-size: 32px; - } -</style> -``` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/textarea.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/textarea.md b/doc/source/examples/textarea.md deleted file mode 100644 index 3e682db..0000000 --- a/doc/source/examples/textarea.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: textarea -type: example -layout: example -web_bundle_url: ../js/examples/textarea.web.js ---- - -```html -<template> - <div class="wrapper"> - <textarea class="textarea" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></textarea> - </div> -</template> - -<script> - const modal = weex.requireModule('modal') - - export default { - methods: { - oninput (event) { - console.log('oninput:', event.value) - modal.toast({ - message: `oninput: ${event.value}`, - duration: 0.8 - }) - }, - onchange (event) { - console.log('onchange:', event.value) - modal.toast({ - message: `onchange: ${event.value}`, - duration: 0.8 - }) - }, - onfocus (event) { - console.log('onfocus:', event.value) - modal.toast({ - message: `onfocus: ${event.value}`, - duration: 0.8 - }) - }, - onblur (event) { - console.log('onblur:', event.value) - modal.toast({ - message: `input blur: ${event.value}`, - duration: 0.8 - }) - } - } - } -</script> - -<style> - .textarea { - font-size: 50px; - width: 650px; - margin-top: 50px; - margin-left: 50px; - padding-top: 20px; - padding-bottom: 20px; - padding-left: 20px; - padding-right: 20px; - color: #666666; - border-width: 2px; - border-style: solid; - border-color: #41B883; - } -</style> -``` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/video.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/video.md b/doc/source/examples/video.md deleted file mode 100644 index a8a35f0..0000000 --- a/doc/source/examples/video.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: video -type: example -layout: example -web_bundle_url: ../js/examples/video.web.js ---- - -```html -<template> - <div> - <video class="video" :src="src" autoplay controls - @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video> - <text class="info">state: {{state}}</text> - </div> -</template> - -<style scoped> - .video { - width: 630px; - height: 350px; - margin-top: 60px; - margin-left: 60px; - } - .info { - margin-top: 40px; - font-size: 40px; - text-align: center; - } -</style> - -<script> - export default { - data () { - return { - state: '----', - src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4' - } - }, - methods:{ - onstart (event) { - this.state = 'onstart' - }, - onpause (event) { - this.state = 'onpause' - }, - onfinish (event) { - this.state = 'onfinish' - }, - onfail (event) { - this.state = 'onfinish' - } - } - } -</script> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/examples/web.md ---------------------------------------------------------------------- diff --git a/doc/source/examples/web.md b/doc/source/examples/web.md deleted file mode 100644 index 6192985..0000000 --- a/doc/source/examples/web.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: web -type: example -layout: example -web_bundle_url: ../js/examples/web.web.js ---- - -```html -<template> - <div class="wrapper"> - <div class="group"> - <input class="input" ref="input" type="url" autofocus="false" value="https://m.taobao.com"></input> - </div> - <div class="group"> - <text class="button" @click="loadURL">LoadURL</text> - <text class="button" @click="reload">reload</text> - </div> - <web ref="webview" :src="url" class="webview" @pagestart="start" @pagefinish="finish" @error="error"></web> - </div> -</template> - -<script> - const webview = weex.requireModule('webview') - const modal = weex.requireModule('modal') - - export default { - data () { - return { - url : 'https://m.alibaba.com' - } - }, - methods: { - loadURL (event) { - this.url = this.$refs.input.value - modal.toast({ message: 'load url:' + this.url }) - setTimeout(() => { - console.log('will go back.') - modal.toast({ message: 'will go back' }) - webview.goBack(this.$refs.webview) - }, 10000) - }, - reload (event) { - console.log('will reload webview') - modal.toast({ message: 'reload' }) - webview.reload(this.$refs.webview) - }, - start (event) { - console.log('pagestart', event) - modal.toast({ message: 'pagestart' }) - }, - finish (event) { - console.log('pagefinish', event) - modal.toast({ message: 'pagefinish' }) - }, - finish (event) { - console.log('error', event) - modal.toast({ message: 'error' }) - } - } - } -</script> - -<style scoped> - .group { - flex-direction: row; - justify-content: space-around; - margin-top: 20px; - } - .input { - width: 600px; - font-size: 36px; - padding-top: 15px; - padding-bottom: 15px; - border-width: 2px; - border-style: solid; - border-color: #BBBBBB; - } - .button { - width: 225px; - text-align: center; - background-color: #D3D3D3; - padding-top: 15px; - padding-bottom: 15px; - margin-bottom: 30px; - font-size: 30px; - } - - .webview { - margin-left: 75px; - width: 600px; - height: 750px; - border-width: 2px; - border-style: solid; - border-color: #41B883; - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/faq.md ---------------------------------------------------------------------- diff --git a/doc/source/faq.md b/doc/source/faq.md deleted file mode 100644 index afff270..0000000 --- a/doc/source/faq.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: FAQ -type: faq -layout: post ---- - -# FAQ - -## Where are legacy docs? - -- [Guide](./v-0.10/guide/index.html) -- [References](./v-0.10/references/index.html) -- [Advanced](./v-0.10/advanced/index.html) -- [Tools](./v-0.10/tools/index.html) - -## Command errors in MS Windows - -Please install [Git for Windows](https://git-scm.com/download/win) first, see [For Windows](https://github.com/apache/incubator-weex/tree/dev#for-windows) for more information. - - -## Gradle errors in Android Studio - -Downloading `license-gradle-plugin.jar` may trigger errors, like `Connection reset` or `peer not authenticated`. -Maybe a network problem, try a proxy or VPN. - -## Use local image -Weex's native runtime support load image file from device's disk, all you have to do set the file url like `file:///sdcard/image_new0.png`. As to load image file in your project, Weex is not support yet. - -## Errorï¼`The header content contains invalid characters`) in windows -This's is caused by weex-toolkit's dependency 'http-server', whose old version is not working well in chinese windows environment. We have fixed that, you should upgrade weex-toolkit before use that. - -## Playground app display nothing (white screen) after scan -Best way to find out what's happening is read debug log, you can follow [this document](./guide/index.html) to firgure out how to do that. - -## About ECMAScript Version - -Weex uses JSCore in iOS and uses v8 in Android. So they both support ECMAScript 5 spec. Additionally, we do some polyfills in native environment: - -* `Promise` in iOS/Android -* Timer APIs (`setTimeout` / `clearTimeout` / `setInterval` / `clearInterval`) in iOS/Android -* `console` in iOS/Android - -In Browser we contains a polyfill of `Promise` temporarily. In the future developers can choose whether to import a polyfill by configurations. - -You can also write ES6 syntax by `babel` with `webpack`. The loader will convert ES6 syntax into ES5 automatically. - -If you want more ES6 polyfills you can import them into the JS Bundle as you like. - -## Dependencies in frontend - -In Weex you may have some ways to import/require a component or a JS module. Take ES5 syntax for example: - -* `require('xxx.js')`: depends on a JS file -* `require('npm-module-name')`: depends on a NPM module -* `require('xxx.we')`: include a `we` file to register a Weex custom component -* `require('@weex-module/xxx')`: depends on a Weex native module. Notice that it is supported only in `*.we` file not `*.js` file. If you want to use Weex native module in a `*.js` file, temporarily you may write like this: - -```javascript -// use this piece of code below to get Weex native module "modal" -var modal -__weex_define__('@weex-temp/x', function (__weex_require__) { - modal = __weex_require__('@weex-module/modal') -}) - -// use APIs in "modal" module -modal.toast({message: 'hello'}) -``` - -We will bring a better syntax design in the future. - -## iOS text line-height style is abnormal - -`line-height` style in text component is different from h5 and Android, text value will be placed at bottom of line box because of iOS native api. We are trying to optimize it. - -## Android only support `overflow:hidden` -The `overflow` style in android is `hidden` and cannot be changed. This is the result of Android View framework. This only happens on Android, iOS will work as expected. - -## How to get rid of 750 adaption and calculate width/height in real pixelsï¼ - -The deviceHeight and deviceWidth got in `this.$getConfig()` is the real device width/height in pixels, not the ones with 750-adapted. - -So you can use them to calculate width/height in real pixels. - -Suppose you need to display a navigation bar of fixed 88 pixels, the bar's height will be: - -``` -var height = 88 * 750 / env.deviceWidth -``` - - -## How to detect an native module/component supported in JavaScript? - -### Detect native module - -```javascript -var xxx = require('@weex-module/xxx') -if (xxx) { - // todo: use this module -} -else { - // todo: handle the exception -} -``` - -### Detect native component - -```html -<template> - <component is="{{type}}"></component> -</template> - -<script> - var type = 'xxx' - var xxx = require('@weex-component/xxx') - if (!xxx) { - type = 'div' // downgrade to <div> - } - module.exports = { - data: function () { - return { - type: type - } - } - } -</script> -``` - -## How to transfer data between pages - -If you have 2 pages, A and B. - -0. A -> B, use [storage module](./references/modules/storage.html) to transfer data -0. B -> A, use [storage module](./references/modules/storage.html) to transfer data - -## How to use `repeat` in Parent-Child components - -If you want, You can make a `repeat` operation between Parent-Child components. But you must be strictly in accordance with the document syntax to write code. If there is no child component defined data, or there is no specify `props` that need to be passed down. It will lead to the page does not render properly. - -A correct example: - -```html -<element name="child"> - <template> - <div> - <text style="font-size:100">{{title}}</text> - </div> - </template> - - <script> - module.exports = { - data: { - title: null - } - } - </script> -</element> -<template> - <div> - <child repeat="item in lists" title="{{ item.title }}"></child> - </div> -</template> -<script> - module.exports = { - data: { - lists: [ - { title: 'A' }, - { title: 'B' }, - { title: 'C' } - ] - }, - ready: function () { - this.lists.splice(0, 1) - } - } -</script> -``` - -A wrong exampleï¼ - -```html -<element name="child"> - <template> - <div> - <text style="font-size:100">{{title}}</text> - </div> - </template> -</element> -<template> - <div> - <child repeat="item in lists"></child> - </div> -</template> -<script> - module.exports = { - data: { - lists: [ - { title: 'A' }, - { title: 'B' }, - { title: 'C' } - ] - }, - ready: function () { - this.lists.splice(0, 1) - } - } -</script> -``` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/guide/.gitkeep ---------------------------------------------------------------------- diff --git a/doc/source/guide/.gitkeep b/doc/source/guide/.gitkeep deleted file mode 100644 index e69de29..0000000 http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/guide/contributing.md ---------------------------------------------------------------------- diff --git a/doc/source/guide/contributing.md b/doc/source/guide/contributing.md deleted file mode 100644 index 00cb979..0000000 --- a/doc/source/guide/contributing.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: How to Contribute -type: guide -order: 6 -has_chapter_content: true -version: 2.1 ---- - -# How to Contribute - -Welcome to create [pull requests](https://github.com/apache/incubator-weex/compare) or join in our [mailing list](http://mail-archives.apache.org/mod_mbox/incubator-weex-dev/) for bugfix, doc, example, suggestion and anything. - -## Join in Weex Mailing List - -In Weex community all discussion will happen on mailing list. - -Just send an email to `dev-subscr...@weex.incubator.apache.org` and follow the instructions to subscribe Weex dev mailing list. And then you will receive all discussions and community messages by your personal email. In the same time you can freely send your own emails to join in us. - -At the same time you can see the archives of all the mails through the web: [http://mail-archives.apache.org/mod_mbox/incubator-weex-dev/](http://mail-archives.apache.org/mod_mbox/incubator-weex-dev/) - -*If you won't follow the mailing list any more. There is another way to unsubscribe it: send an email to `dev-unsubscr...@weex.incubator.apache.org` and follow the instructions.* - -Besides Weex dev mailing list, we also have some other mailing lists for you. You can check them out here: http://mail-archives.apache.org/mod_mbox/#weex.incubator - -## Branch Management - -``` -release - â -{version} - â -master <--- PR(feature/hotfix/typo) -``` - -0. `master` branch - 0. `master` is the stable developing branch. - 0. ***It's RECOMMENDED to commit hotfix (like typo) or feature PR to `master `***. -0. `{version}` branch - 0. `{version}` is used for every version which we consider for stable publish. - 0. e.g. `v0.16` -0. `release` branch - 0. `release` is the latest release branch,we will make tag and publish version on this branch. - -### Branch Name For PR - -``` -{module}-{action}-{shortName} -``` - -* `{module}`, see [commit log module](#commit-log) -* `{action}` - * `feature`: checkout from `{module}` and merge to `{module}` later. If `{module}` not exists, merge to `dev` - * `bugfix`: like `feature`, for bugfix only - * `hotfix`: checkout from `master` or release `tag`, merge to `master` and `{module}` later. If `{module}` not exists, merge to `dev` - -for example: - -* `android-bugfix-memory` -* `jsfm-feature-communication` -* `android-hotfix-compute-layout` - -## Commit Log - -``` -{action} [{module}] {description} -``` - -* `{action}` - * `+` add - * `*` update or bugfix - * `-` remove -* `{module}` - * Including: android, ios, jsfm, html5, component, doc, website, example, test, all -* `{description}` - * Just make it as clear and simple as possible. - -for example: - -* `+ [android] close #123, add refreshing for WebView` -* `* [doc] fix #123, update video auto-play property` -* `- [example] remove abc` - -## Pull Request - -You can [create pull requests](https://github.com/apache/incubator-weex/compare) in GitHub. - -1. First we suggest you have some discussion with the community (commonly in our mailing list) before you code. -2. Fork repo from [https://github.com/apache/incubator-weex/](https://github.com/apache/incubator-weex/) -3. Finish the job you want to do. -4. Create a pull request. - -## Code Style Guide - -### 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](https://github.com/github/objective-c-style-guide) - -### Java & Android - -* Use [Google Java Style](https://google.github.io/styleguide/javaguide.html) as basic guidelines of java code. -* Follow [AOSP Code Style](https://source.android.com/source/code-style.html) for rest of android related code style. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/guide/images/flow.png ---------------------------------------------------------------------- diff --git a/doc/source/guide/images/flow.png b/doc/source/guide/images/flow.png deleted file mode 100644 index c5a1b61..0000000 Binary files a/doc/source/guide/images/flow.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/guide/images/tut-cli-qrcode.png ---------------------------------------------------------------------- diff --git a/doc/source/guide/images/tut-cli-qrcode.png b/doc/source/guide/images/tut-cli-qrcode.png deleted file mode 100644 index 9068c14..0000000 Binary files a/doc/source/guide/images/tut-cli-qrcode.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/guide/images/tut-first.png ---------------------------------------------------------------------- diff --git a/doc/source/guide/images/tut-first.png b/doc/source/guide/images/tut-first.png deleted file mode 100755 index c8505e6..0000000 Binary files a/doc/source/guide/images/tut-first.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/guide/images/tut-second.png ---------------------------------------------------------------------- diff --git a/doc/source/guide/images/tut-second.png b/doc/source/guide/images/tut-second.png deleted file mode 100755 index 1259abf..0000000 Binary files a/doc/source/guide/images/tut-second.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/guide/images/tut1.jpg ---------------------------------------------------------------------- diff --git a/doc/source/guide/images/tut1.jpg b/doc/source/guide/images/tut1.jpg deleted file mode 100644 index 8af0f3f..0000000 Binary files a/doc/source/guide/images/tut1.jpg and /dev/null differ