Weex

https://github.com/weexteam/website
Admin
This repository contains the source code for the official Weex website, providing information and...
Tokens:102,336
Snippets:557
Trust Score:6.4
License:Apache-2.0
Update:1 year ago
Show doc for...
Tokens:
Raw
### Start Weex Debug Console

Source: https://github.com/weexteam/website/blob/master/docs/zh/guide/debug/debug.md

After installation, run this command to launch the Weex debugging console. This will automatically open the debug interface in your browser.

```Shell
weex debug
```

--------------------------------

### Install Weex Toolkit Globally

Source: https://github.com/weexteam/website/blob/master/docs/zh/guide/debug/debug.md

This snippet shows how to install the `weex-toolkit` globally using npm and verify the installation by checking its version. The `@beta` tag specifies installing the beta version.

```Shell
npm i weex-toolkit@beta -g
weex -v // Check for successful installation
```

--------------------------------

### Example of Using a Registered Weex Module

Source: https://github.com/weexteam/website/blob/master/docs/guide/extend/extend-web.md

This JavaScript code illustrates how to retrieve and use a previously registered Weex module. It uses `weex.requireModule('guide')` to get an instance of the 'guide' module and then calls its `greeting` and `farewell` methods. This demonstrates the standard way to interact with custom or built-in Weex modules.

```javascript
//import module
const guide = weex.requireModule('guide')
// use the methods of module
guide.greeting()
guide.farewell()
```

--------------------------------

### Create and Run a New Weex Project

Source: https://github.com/weexteam/website/blob/master/docs/guide/develop/create-a-new-app.md

Demonstrates how to initialize a new Weex + Vue.js project, navigate into its directory, install necessary dependencies, and start the development server for local preview in a web browser.

```bash
weex create awesome-app
cd awesome-app
npm install
npm start
```

--------------------------------

### Example of Registering a Custom Weex Module

Source: https://github.com/weexteam/website/blob/master/docs/guide/extend/extend-web.md

This JavaScript snippet provides a concrete example of how to register a custom module named 'guide' using `weex.registerModule`. The module defines two methods, `greeting` and `farewell`, which simply log messages to the console. This demonstrates the structure for creating and registering custom functionalities as Weex modules.

```javascript
weex.registerModule('guide', {
  greeting () {
    console.log('Hello, nice to meet you. I am your guide.')
  },
  farewell () {
    console.log('Goodbye, I am always at your service.')
  }
})
```

--------------------------------

### Install Weex CLI on macOS and Windows

Source: https://github.com/weexteam/website/blob/master/docs/guide/develop/setup-develop-environment.md

This snippet provides commands to install the Weex CLI (weex-toolkit) globally using npm for both macOS and Windows. It also includes a step for macOS to adjust directory permissions and commands to verify the installation.

```bash
$ sudo chmod -R 777 /usr/local/lib/node_modules/
$ npm i -g weex-toolkit // Do not use sudo
$ weex -v
```

```bash
$ npm i -g weex-toolkit 
$ weex -v
```

--------------------------------

### Rax.js Example for Weex Video Component

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/components/video.md

This Rax.js example demonstrates the usage of `rax-video`, a higher-level wrapper component that abstracts the underlying `<video>` component for both Web and Weex environments. It shows a basic setup with autoplay and a specified video source.

```JSX
import { createElement, Component, render } from "rax";
import Video from "rax-video";
import Driver from "driver-universal";

render(
  <Video
    style={{ width: '750rpx', height: '400rpx' }}
    autoPlay
    src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4"
  />,
  document.body,
  { driver: Driver }
);
```

--------------------------------

### Define Weex Example Description Object in JavaScript

Source: https://github.com/weexteam/website/blob/master/examples/README.md

This JavaScript object demonstrates the required and optional fields for defining a Weex example's metadata. It includes a 'hash' for the online playground link, a 'title' which can be a simple string or a multi-language object, and an optional 'screenshot' URL. This structure is used when adding new examples to the Weex project's `examples` array.

```js
examples: [{
  hash: '44e635d920aaac5e3bbcbe293b6f0b81',
  // title: 'Need Screenshot', // use the same title for all languages
  title: { zh: '缺截图', en: 'Need Screenshot' }, // set titles for different languages
  screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png'
}]
```

--------------------------------

### Registering Weex Native Components and Modules Example

Source: https://github.com/weexteam/website/blob/master/docs/guide/extend/extend-framework.md

Illustrates how a custom JavaScript framework registers available native components and modules with the Weex runtime, providing type and method information for components, and method signatures for modules.

```js
registerComponents([
  { "type": "web", "methods": ["goBack", "goForward", "refresh"]}
])

registerModules({
  "event": [
    {"name": "openURL", "args": ["string"]}
  ]
})
```

--------------------------------

### Rax Video Component Usage Example

Source: https://github.com/weexteam/website/blob/master/docs/docs/components/video.md

Illustrates how to use the `rax-video` component in a Rax application, showing basic setup with `createElement`, `Component`, `render`, and `Driver` for rendering. It demonstrates embedding a video with specified dimensions and auto-play functionality.

```jsx
import { createElement, Component, render } from "rax";
import Video from "rax-video";
import Driver from "driver-universal";

render(
  <Video
    style={{ width: '750rpx', height: '400rpx' }}
    autoPlay
    src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4"
  />,
  document.body,
  { driver: Driver }
);
```

--------------------------------

### Example Webpack Configuration for Weex Projects

Source: https://github.com/weexteam/website/blob/master/docs/guide/use-vue-in-weex.md

This comprehensive `webpack.config.js` example demonstrates a full setup for compiling Weex projects. It configures entry and output paths, defines rules for processing `.vue` and `.js` files with `weex-loader` and `babel-loader`, and includes a `BannerPlugin` for adding a framework comment.

```javascript
const webpack = require('webpack');
const path = require('path');
module.exports = {
  entry: '<your-input-file>',
  output: {
    path: path.resolve(__dirname, './'),
    filename: '<your-output-file>'
  },
  module: {
    rules: [
      {
        test: /\.vue(\?[^?]+)?$/,
        loaders: ['weex-loader']
      },
      {
        test: /\.js$/,
        loaders: ['babel-loader']
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin({
      raw: true ,
      banner: '// { "framework": "Vue" }\n'
    })
  ]
}
```

--------------------------------

### Install and Verify Weex Toolkit

Source: https://github.com/weexteam/website/blob/master/docs/guide/debug/debug.md

This snippet demonstrates how to install the `weex-toolkit` globally using npm and verify its successful installation by checking the version. It's a prerequisite for using the Weex debugging features.

```shell
npm i weex-toolkit@beta -g
weex -v // check if the installation is successful
```

--------------------------------

### Install Weex CLI Toolkit Globally

Source: https://github.com/weexteam/website/blob/master/docs/guide/develop/create-a-new-app.md

Installs the `weex-toolkit` command-line interface globally using npm, making the `weex` command available system-wide for project management and development tasks.

```bash
npm install weex-toolkit -g
```

--------------------------------

### Install Node.js Dependencies for Weex Website

Source: https://github.com/weexteam/website/blob/master/README.md

This command installs all necessary Node.js packages and dependencies required to run and develop the Weex official website. It should be executed in the project root directory after cloning the repository and ensuring Node.js is installed.

```bash
npm install
```

--------------------------------

### Generate a New Weex Project

Source: https://github.com/weexteam/website/blob/master/docs/guide/develop/setup-develop-environment.md

This command demonstrates how to create a new Weex project using the `weex create` command from the weex-toolkit. Executing this command will generate a standard project structure in the specified directory.

```bash
$ weex create awesome-project
```

--------------------------------

### Example Weex Module Registration (Java)

Source: https://github.com/weexteam/website/blob/master/docs/zh/guide/extend/extend-android.md

Provides a concrete Java example of registering a built-in Weex module (`WXPickersModule`) using `WXSDKEngine.registerModule`, illustrating the practical application of the registration API.

```Java
WXSDKEngine.registerModule("picker", WXPickersModule.class);
```

--------------------------------

### Vue.js Example for Weex Video Component

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/components/video.md

This example demonstrates how to integrate and use the Weex `<video>` component within a Vue.js application. It showcases binding video source, enabling autoplay and controls, and handling various playback events like start, pause, finish, and fail.

```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>
```

--------------------------------

### Install Weex Android SDK with Gradle

Source: https://github.com/weexteam/website/blob/master/docs/download/download.md

Add Weex Android SDK dependencies to your Gradle project. Note the package name change from 'com.taobao.android' to 'org.apache.weex' and the introduction of 'sdk_legacy' starting from version 0.28.0.

```Gradle
compile 'org.apache.weex:sdk:0.28.0'
compile 'org.apache.weex:sdk_legacy:0.28.0'
```

```Gradle
compile 'com.taobao.android:weex_sdk:0.26.0'
```

```Gradle
compile 'com.taobao.android:weex_sdk:0.24.0'
```

--------------------------------

### Rax RecyclerView Component Usage Example

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/components/list.md

This Rax component example illustrates the implementation of a `RecyclerView` using `rax-recyclerview`. It showcases how to define custom cells (`RecyclerView.Cell`) and sticky headers (`RecyclerView.Header`) within a scrollable list, demonstrating the unification of list rendering between Web and Weex environments. The example also includes basic styling for the components.

```JavaScript
import { createElement, Component, render } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Driver from "driver-universal"
import RecyclerView from 'rax-recyclerview';

function Thumb() {
  return (
    <RecyclerView.Cell>
      <View style={styles.button}>
        <View style={styles.box} />
      </View>
    </RecyclerView.Cell>
  );
}
let THUMBS = [];
for (let i = 0; i < 20; i++) THUMBS.push(i);
let createThumbRow = (val, i) => <Thumb key={i} />;

function App() {
  return (
    <View style={styles.root}>
      <View style={styles.container}>
        <RecyclerView
          style={{
            height: 500
          }}>
          <RecyclerView.Header>
            <Text>Sticky view is not header</Text>
          </RecyclerView.Header>
          <RecyclerView.Header>
            <View style={styles.sticky}>
              <Text>Sticky view must in header root</Text>
            </View>
          </RecyclerView.Header>
          {THUMBS.map(createThumbRow)}
        </RecyclerView>
      </View>
    </View>
  );
}

let styles = {
  root: {
    width: '750rpx',
  },
  container: {
    padding: '20rpx',
    borderStyle: 'solid',
    borderColor: '#dddddd',
    borderWidth: '1rpx',
    marginLeft: '20rpx',
    height: '1000rpx',
    marginRight: '20rpx',
    marginBottom: '10rpx',
  },
  button: {
    margin: '7rpx',
    padding: '5rpx',
    alignItems: 'center',
    backgroundColor: '#eaeaea',
    borderRadius: '3rpx',
  },
  box: {
    width: '64rpx',
    height: '64rpx',
  }
};

render(<App />, document.body, { driver: Driver });
```

--------------------------------

### JavaScript Example: Using enableFullScreenHeight in Weex

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/modules/deviceInfo.md

This JavaScript example demonstrates how to use the `enableFullScreenHeight` method from the `deviceInfo` module in a Weex application. It retrieves the full screen height and displays it in a toast message using the `modal` module, showcasing a common usage pattern for full-screen adaptation.

```javascript
var deviceInfo = weex.requireModule('deviceInfo')
var modal = weex.requireModule('modal')
deviceInfo.enableFullScreenHeight(
function (e) {
  modal.toast({
    message:"full screen height:" + e.fullScreenHeight,
    duration:1,
  });
  
},{});
```

--------------------------------

### Example: Enable Full Screen Height in Weex

Source: https://github.com/weexteam/website/blob/master/docs/docs/modules/deviceInfo.md

This JavaScript example demonstrates how to use the `deviceInfo.enableFullScreenHeight` method to obtain and display the full screen height in a Weex application, typically used for adjusting UI elements in full-screen contexts.

```javascript
  var deviceInfo = weex.requireModule('deviceInfo')
  var modal = weex.requireModule('modal')
  deviceInfo.enableFullScreenHeight(
  function (e) {
    modal.toast({
      message:"full screen height:" + e.fullScreenHeight,
      duration:1,
    });
    
},{});
```

--------------------------------

### Rax rax-textinput Component Usage Example

Source: https://github.com/weexteam/website/blob/master/docs/docs/components/textarea.md

Illustrates the use of `rax-textinput`, Rax's equivalent for `textarea`, demonstrating multi-line input and basic styling within a Rax application.

```jsx
import { createElement, render } from "rax";
import Driver from 'driver-universal';
import TextInput from "rax-textinput";

function App() {
  return (
    <View style={{margin: '20rpx'}}>
      <TextInput
        multiline={true}
        numberOfLines={3}
        style={{
          height: '150rpx',
          width: '600rpx',
          borderWidth: '1rpx',
          borderColor: '#dddddd',
          borderStyle: 'solid'
        }}
      />
    </View>
  );
}

render(<App />, document.body, { driver: Driver });
```

--------------------------------

### Handle Weex WebSocket Open Event

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/modules/websockets.md

Provides an example of setting up an event listener for the `onopen` event. This event fires when the WebSocket connection is successfully established and is ready for data exchange.

```JavaScript
const ws = weex.requireModule('webSocket')
ws.WebSocket('ws://echo.websocket.org','');
ws.onopen(function(event) {
  console.log('onopen', event);
});
```

--------------------------------

### Examples of Weex `supports` for Component and Module Detection

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/api/weex-variable.md

Provides various examples demonstrating how to use `weex.supports` to check for component availability, module availability, and specific module method availability, including cases for valid and invalid inputs.

```JavaScript
weex.supports('@component/slider') // true
weex.supports('@component/my-tab') // false

weex.supports('@module/stream')  // true
weex.supports('@module/abcdef')  // false

weex.supports('@module/dom.getComponentRect') // true
weex.supports('@module/navigator.jumpToPage') // false

weex.supports('div') // null
weex.supports('module/*') // null
weex.supports('@stream/fetch') // null
weex.supports('getComponentRect') // null
```

--------------------------------

### Using rax-image Component for Cross-Platform Image Display

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/components/image.md

Demonstrates how to use the `rax-image` component, which abstracts the `<image>` component for both Web and Weex, showing basic setup with source and style.

```JSX
import { createElement, render } from 'rax';
import Driver from "driver-universal";
import Image from 'rax-image';

const App = () => {
 return (
   <Image
     source={{
       uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',
     }}
     style={{
       height: '68rpx',
       width: '67rpx'
     }}
  />
 );
};

render(<App />, document.body, { driver: Driver });
```

--------------------------------

### Vue.js Video Component Usage Example

Source: https://github.com/weexteam/website/blob/master/docs/docs/components/video.md

Demonstrates how to integrate and use the video component within a Vue.js application, including template structure, styling, data binding, and event handling for video playback. It shows how to bind attributes like `src`, `autoplay`, and `controls`, and how to capture `start`, `pause`, `finish`, and `fail` events to update UI state.

```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>
```

--------------------------------

### Weex Core Environment Setup on iOS

Source: https://github.com/weexteam/website/blob/master/docs/guide/advanced/multi-size-screen.md

Illustrates how Weex initializes its core environment on iOS, setting platform, scale, and device screen dimensions from `UIScreen.mainScreen.bounds.size`. This setup is fundamental for Weex's coordinate conversion.

```C
@implementation WXCoreBridge

+ (void)install
{
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        WeexCore::WXCoreEnvironment* env = WeexCore::WXCoreEnvironment::getInstance();
        env->SetPlatform(OS_iOS);
        env->AddOption("scale", "1");
        
        CGSize screenSize = [UIScreen mainScreen].bounds.size;
        env->SetDeviceWidth(std::to_string(screenSize.width));
        env->SetDeviceHeight(std::to_string(screenSize.height));
        // ...
        // ...
}

```

--------------------------------

### Rax RefreshControl Component Full Example

Source: https://github.com/weexteam/website/blob/master/docs/docs/components/refresh.md

A comprehensive Rax example demonstrating the `rax-refreshcontrol` component, which is the Rax equivalent of Weex's `<refresh>`. It includes state management for the refreshing status, event handling for `onRefresh`, and integration within a `RecyclerView`.

```jsx
import { createElement, Component, render } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Driver from 'driver-universal';
import RecyclerView from 'rax-recyclerview';
import RefreshControl from 'rax-refreshcontrol';

class RefreshControlDemo extends Component {
  state = {
    isRefreshing: false,
    loaded: 0,
    refreshText: '↓ Pull To Refresh'
  };

  handleRefresh = (e) => {
    this.setState({
      isRefreshing: true,
      refreshText: 'Refreshing',
    });
    setTimeout(() => {
      // update Data
      this.setState({
        isRefreshing: false,
        refreshText: '↓ Pull To Refresh',
      });
    }, 1000);
  };

  render() {
    return (
      <View>
        <RecyclerView
          refreshControl={null}>
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={this.handleRefresh}
          >
            <Text>{this.state.refreshText}</Text>
          </RefreshControl>
          <RecyclerView.Cell>
            <View>
              <Text>this is list</Text>
            </View>
          </RecyclerView.Cell>
        </RecyclerView>
      </View>
   );
  }
}

render(<RefreshControlDemo/>, document.body, { driver: Driver });
```

--------------------------------

### Pushing a Weex Page with Navigator.push

Source: https://github.com/weexteam/website/blob/master/docs/docs/modules/navigator.md

Demonstrates how to push a new Weex page onto the navigation stack using `weex.requireModule('navigator').push`. The example specifies the target URL and enables animation, also showing how to handle the asynchronous callback.

```javascript
var navigator = weex.requireModule('navigator')
var modal = weex.requireModule('modal')
var bundleUrl = weex.config.bundleUrl;
navigator.push({
  url: bundleUrl,
  animated: "true"
}, event => {
  modal.toast({ message: 'callback: ' + event)
})
```

--------------------------------

### Rax Link Component for Cross-Platform Navigation

Source: https://github.com/weexteam/website/blob/master/docs/docs/components/a.md

Demonstrates the `rax-link` component, Rax's equivalent to `<a>`, for creating navigation links that work across web and Weex. Includes an `onPress` event handler example.

```JSX
import { createElement, render } from 'rax';
import Driver from "driver-universal";
import Link from 'rax-link';
import Text from 'rax-text';

function App() {
	return <Link href={"//www.google.com"} onPress={(e)=>{console.log(e)}}>
	  <Text>click me</Text>
	</Link>
}
```

--------------------------------

### Using rax-embed for Web Content in Rax

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/components/web.md

Shows an example of using the `rax-embed` component, which is a higher-level wrapper for the <web> component, in a Rax application. It demonstrates how to embed a URL, pass URL parameters, and apply styling.

```jsx
import { createElement, render, Component } from 'rax';
import Driver from 'driver-universal';
import Embed from 'rax-embed';

function App() {
  const urlParam = {
      paramOne:123,
     paramTwo:456
  };
  return <Embed urlParam={urlParam} src={'http://taobao.com'} 
  useIframeInWeb={true} style={{ height: 750, width: 750 }} />
}

render(<App />, document.body, { driver: Driver });
```

--------------------------------

### Install Weex CLI Toolkit Globally

Source: https://github.com/weexteam/website/blob/master/docs/guide/develop/weex_cli.md

Installs the Weex CLI toolkit globally using npm, providing access to Weex CLI commands from the terminal. This command requires Node.js version 7.6.0 or higher to function correctly.

```bash
$ npm install weex-toolkit -g
```

--------------------------------

### Weex Component Pseudo-class Styling Example

Source: https://github.com/weexteam/website/blob/master/docs/docs/styles/common-styles.md

Illustrates the use of pseudo-classes like `:active` for dynamic styling of Weex components. The example shows an `image` component changing its `width`, `height`, and `background-color` when in the active state. Includes HTML structure, CSS styling, and a basic JavaScript `script` block for component properties and methods.

```HTML
<template>
  <div class="wrapper">
    <image :src="logoUrl" class="logo"></image>
  </div>
</template>

<style scoped>
  .wrapper {
    align-items: center;
    margin-top: 120px;
  }
  .title {
    font-size: 48px;
  }
  .logo {
    width: 360px;
    height: 82px;
    background-color: red;
  }
  .logo:active {
    width: 180px;
    height: 82px;
    background-color: green;
  }
</style>

<script>
  export default {
    props: {
      logoUrl: {
        default: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png'
      },
      target: {
        default: 'World'
      }
    },
    methods: {
      update (e) {
        this.target = 'Weex';
      }
    }
  };
</script>
```

--------------------------------

### Weex Component CSS Transition Example

Source: https://github.com/weexteam/website/blob/master/docs/docs/styles/common-styles.md

An HTML snippet demonstrating how to apply CSS transition properties within a Weex component's style block. This example configures transitions for width, height, and background color, with a specific duration, no delay, and a custom cubic-bezier timing function.

```HTML
<style scoped>
    .panel {
        margin: 10px;
        top:10px;
        align-items: center;
        justify-content: center;
        border: solid;
        border-radius: 10px;

        transition-property: width,height,backgroundColor;
        transition-duration: 0.3s;
        transition-delay: 0s;
        transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
    }
</style>
```

--------------------------------

### Basic Rax TextInput Component Usage

Source: https://github.com/weexteam/website/blob/master/docs/docs/components/input.md

An example demonstrating the basic usage of the `rax-textinput` component in a Rax application. This snippet shows how to import and render the component, setting it to auto-focus upon rendering.

```JSX
import { createElement, render } from "rax";
import Driver from 'driver-universal';
import TextInput from "rax-textinput";

function App() {
  return (
    <TextInput autoFocus={true} />
  );
}

render(<App />, document.body, { driver: Driver });
```

--------------------------------

### Start Weex Debug Console

Source: https://github.com/weexteam/website/blob/master/docs/guide/debug/debug.md

This command initiates the Weex debug console, which automatically opens a web interface for debugging Weex applications. It serves as the primary entry point for accessing all debugging functionalities.

```shell
weex debug
```

--------------------------------

### Basic Usage of Weex Image Component

Source: https://github.com/weexteam/website/blob/master/docs/docs/components/image.md

Demonstrates the fundamental usage of the Weex `<image>` component. It requires explicit `width`, `height`, and `src` attributes to load an image successfully. This example displays an image from a remote URL.

```html
<image style="width:500px;height:500px" src="https://vuejs.org/images/logo.png"></image>
```

--------------------------------

### Basic HTML `<a>` Component Usage in Weex

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/components/a.md

Demonstrates the fundamental usage of the `<a>` component in Weex for page navigation. It highlights the requirement to embed text within a `<text>` tag and provides examples of `href` usage.

```HTML
<a href="http://dotwe.org/raw/dist/a5e3760925ac3b9d68a3aa0cc0298857.bundle.wx">
  <text>Jump</text>
</a>
```

```HTML
<a href="http://emas-ha-remote-log-poc.oss-cn-beijing.aliyuncs.com/eweex/app/biz-docs-com-mod/upload/271ccdca-db41-423d-981c-c7c6751ba479/show_1.js">
  <text>主会场</text>
</a> 
```

--------------------------------

### Using Rax Components in Weex

Source: https://github.com/weexteam/website/blob/master/docs/zh/guide/use-rax-in-weex.md

Demonstrates how Rax basic components map to Weex native components and how attributes are passed through. It shows examples of a `list` component with `loadmoreoffset` and a mixed usage of `View` and `text` components.

```jsx
<list loadmoreoffset={...}>
	...
</list>
```

```jsx
<View>
  <text>Hello Rax</text>
</View>
```

--------------------------------

### HTML Example for Weex Element Positioning

Source: https://github.com/weexteam/website/blob/master/docs/docs/styles/common-styles.md

Demonstrates various positioning strategies in Weex HTML, including absolute positioning with `top` and `left` offsets, and the use of `sticky` positioning within a column-flex container to illustrate different placement behaviors.

```HTML
<template>
  <div style="flex-direction: column;">
    <div style="height: 3000;">
      <image src="..." style="top: 50px; left: 50px;"></image>
    </div>
    <div style="height: 3000;">
      <image src="..." style="position: sticky;"></image>
    </div>
    <div style="height: 3000;">
      <image src="..." style="position: absolute; top: 50px; left: 50px;"></image>
    </div>
  </div>
</template>
```

--------------------------------

### Start Weex Website Local Development Server

Source: https://github.com/weexteam/website/blob/master/README.md

This command initiates a local web server for the Weex website, typically accessible at `http://localhost:8080`. It enables live reloading, automatically updating pages upon source file changes, which facilitates rapid development and testing.

```bash
npm start
```

--------------------------------

### Get Layout Direction Example in Weex JavaScript

Source: https://github.com/weexteam/website/blob/master/docs/docs/modules/dom.md

Demonstrates how to use `dom.getLayoutDirection` to retrieve the layout direction of a component and log the result to the console.

```javascript
const element = this.$refs['kkk'][0];
dom.getLayoutDirection(element, function(ret) {
  console.log(ret.result);
});
```

--------------------------------

### Compile Weex Pages for Debugging

Source: https://github.com/weexteam/website/blob/master/docs/zh/guide/debug/debug.md

Use this command to compile specific Weex folders or files for debugging. The compiled pages will be displayed under the 'Pages' tab in the debug console. For example, `weex debug src` compiles the 'src' directory.

```Shell
weex debug [ folder | file ]
```

```Shell
weex debug src
```

--------------------------------

### Compile Weex Projects using Weex CLI

Source: https://github.com/weexteam/website/blob/master/docs/guide/use-vue-in-weex.md

This section provides instructions for compiling Weex projects using the `weex-cli` tool. It covers the global installation of `weex-toolkit` via npm and the command syntax for compiling resource files to a specified output address.

```bash
npm install weex-toolkit -g
```

```bash
weex compile [resource file] [product address]
```

--------------------------------

### Invoke a Custom Component Method from JavaScript

Source: https://github.com/weexteam/website/blob/master/docs/guide/extend/extend-android.md

This HTML and JavaScript example demonstrates how to call a method (`focus()`) exposed by a custom Weex component from the JavaScript side. It uses `$refs` to get a reference to the component instance and then invokes the method.

```HTML
<template>
  <mycomponent ref='mycomponent'></mycomponent>
</template>
<script>
  module.exports = {
    created: function() {
      this.$refs.mycomponent.focus();
    }
  }
</script>
```

--------------------------------

### Deploy Weex Website to Apache ASF Site (Committer Only)

Source: https://github.com/weexteam/website/blob/master/README.md

This script automates the deployment of the Weex website. It stages, commits, and pushes the generated static files from `docs/.vuepress/dist/` to the `asf-site` branch, updating the live website. This operation requires committer privileges for `git push` to the remote repository.

```bash
scripts/publish.sh
```

--------------------------------

### Package Weex Website Static Files for Publishing

Source: https://github.com/weexteam/website/blob/master/README.md

This command compiles and generates static files for the Weex website, preparing them for deployment. The output files are typically located in the `docs/.vuepress/dist/` directory, ready to be served by a web server or CDN.

```bash
npm run build
```

--------------------------------

### Basic Web Component Usage in HTML

Source: https://github.com/weexteam/website/blob/master/docs/docs/components/web.md

Illustrates the fundamental usage of the `<web>` component within an HTML context, loading content from a specified URL. Note that `width` and `height` styles are required for proper functionality.

```html
<web src="https://vuejs.org"></web>
```

--------------------------------

### Examples of Weex `isRegisteredComponent` Usage

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/api/weex-variable.md

Provides examples of using `weex.isRegisteredComponent` to check for component availability, emphasizing its specific use for components and not modules.

```JavaScript
weex.isRegisteredComponent('div') // true
weex.isRegisteredComponent('- unknown -') // false
weex.isRegisteredComponent('navigator') // false, not support modules
```

--------------------------------

### Create Weex Project from Template

Source: https://github.com/weexteam/website/blob/master/docs/guide/develop/weex_cli.md

Initializes a new Weex project using a specified template. This command supports creating projects from official templates or remote Git repositories, allowing for custom branch selection.

```bash
# Create a project from the official template
$ weex create my-project
```

```bash
$ weex create '<template-name>#<branch-name>' <project-name>
```

```bash
$ weex create weex-templates/webpack#v1.0 my-project
```

--------------------------------

### Initialize WeexSDK Environment in iOS Objective-C

Source: https://github.com/weexteam/website/blob/master/docs/zh/guide/develop/integrate-to-iOS-app.md

This Objective-C code demonstrates the initialization of the WeexSDK within an iOS application, typically in `didFinishLaunchingWithOptions`. It includes setting app configuration, initializing the SDK environment, and optionally registering custom modules, components, and protocol implementations, along with setting the log level.

```Objective-C
// App configuration
[WXAppConfiguration setAppGroup:@"Your app group"];
[WXAppConfiguration setAppName:@"Your app name"];
[WXAppConfiguration setAppVersion:@"Your app version"];

//Initialize WeexSDK
[WXSDKEngine initSDKEnvironment];

//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];
```

--------------------------------

### Install Weex iOS SDK with CocoaPods

Source: https://github.com/weexteam/website/blob/master/docs/download/download.md

Add Weex iOS SDK dependencies to your Xcode project using CocoaPods for different release versions.

```CocoaPods
pod "WeexSDK","0.28.0"
```

```CocoaPods
pod "WeexSDK","0.26.0"
```

```CocoaPods
pod "WeexSDK","0.24.0"
```

--------------------------------

### Weex Animation Module: transition API Reference

Source: https://github.com/weexteam/website/blob/master/docs/docs/modules/animation.md

Comprehensive API documentation for the `animation.transition` method, detailing its parameters (`ref`, `options`, `callback`), supported styles, duration, delay, layout persistence, and timing functions. It also notes platform-specific behaviors and limitations.

```APIDOC
transition(ref, options, callback)
  - @ref: The element that will be animated. E.g., if ref for an element is `test`, use `this.$refs.test`.
  - @options: Animation properties.
    - `styles` (object): Specifies names and values of styles for transition effect.
      - `width` (number)
      - `height` (number)
      - `backgroundColor` (string)
      - `opacity` (number)
      - `transformOrigin` (string)
      - `transform` (string): Supports `translate`/`translateX`/`translateY`, `rotate`/`rotateX`/`rotateY`, `perspective`, `scale`/`scaleX`/`scaleY`.
    - `duration` (number): Duration of animation execution in milliseconds. Default: `0`.
    - `delay` (number): Waiting time before the animation starts in milliseconds. Default: `0`.
    - `needLayout` (boolean): Specifies whether layout changes (width/height/etc.) are persistent and take effect after the animation. Default: `false`.
    - `timingFunction` (string): Describes how intermediate values are calculated. Default: `linear`.
      - `linear`: Same speed from start to end.
      - `ease-in`: Slow start, fast end.
      - `ease-out`: Fast start, slow end.
      - `ease-in-out`: Slow start, fast intermediate, slow end.
      - `cubic-bezier(x1, y1, x2, y2)`: Define custom values (0 to 1).
  - @callback (function): Function called after animation completion.
    - On iOS: Can receive `result` parameter ('Success' or 'Fail').
    - On Android: Does not support the `result` parameter.
```

--------------------------------

### Preview Weex Pages in Browser or App

Source: https://github.com/weexteam/website/blob/master/docs/guide/develop/weex_cli.md

Provides functionality to compile and preview `.vue` files, either opening them in a web browser or generating a QR code for viewing in the Weex Playground App. Supports single files or entire folders.

```bash
$ weex preview [file | folder] <options>
```

```bash
$ weex src --entry src/foo.vue
```

--------------------------------

### Weex Accessibility Attributes Usage Examples

Source: https://github.com/weexteam/website/blob/master/docs/docs/styles/common-styles.md

Provides practical examples of applying `role`, `aria-hidden`, and `aria-label` attributes to Weex `text`, `a` (link), and `image` components to demonstrate their usage for accessibility.

```html
<text class='txt' role='text' aria-label='I am a text'>text</text>

<a class='a' role='link' href='http://xxx.xxx.xxx' aria-label='I am a link'></a>


<image class='img' aria-hidden='true' role='img' src="http://xxx.png" aria-label='I am a image，but you can not see me'></image>
```

--------------------------------

### Initialize WeexSDK in iOS App Delegate

Source: https://github.com/weexteam/website/blob/master/docs/guide/develop/integrate-to-iOS-app.md

This Objective-C code illustrates the essential steps for initializing the WeexSDK within the `didFinishLaunchingWithOptions` method of an iOS App delegate. It includes setting app configuration, initializing the SDK environment, registering custom modules and components, and configuring the log level for debugging.

```Objective-C
// App configuration
[WXAppConfiguration setAppGroup:@"Your app group"];
[WXAppConfiguration setAppName:@"Your app name"];
[WXAppConfiguration setAppVersion:@"Your app version"];

//Initialize WeexSDK
[WXSDKEngine initSDKEnvironment];

//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];
```

--------------------------------

### Apply Accessibility Attributes in Weex HTML

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/styles/common-styles.md

Provides HTML examples demonstrating the application of `role`, `aria-hidden`, and `aria-label` attributes to Weex components like `text`, `a` (link), and `image`. These examples illustrate how to improve the accessibility of UI elements.

```HTML
<text class='txt' role='text' aria-label='I am a text'>text</text>

<a class='a' role='link' href='http://xxx.xxx.xxx' aria-label='I am a link'></a>


<image class='img' aria-hidden='true' role='img' src="http://xxx.png" aria-label='I am a image，but you can not see me'></image>
```

--------------------------------

### Weex Core Environment Initialization for iOS

Source: https://github.com/weexteam/website/blob/master/docs/zh/guide/advanced/multi-size-screen.md

This C code snippet illustrates how Weex initializes its core environment for iOS during application startup. It sets the platform, a default scale, and captures the device's current screen dimensions (width and height) from `UIScreen.mainScreen.bounds.size` to establish global environment parameters.

```C
@implementation WXCoreBridge

+ (void)install
{
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        WeexCore::WXCoreEnvironment* env = WeexCore::WXCoreEnvironment::getInstance();
        env->SetPlatform(OS_iOS);
        env->AddOption("scale", "1");
        
        CGSize screenSize = [UIScreen mainScreen].bounds.size;
        env->SetDeviceWidth(std::to_string(screenSize.width));
        env->SetDeviceHeight(std::to_string(screenSize.height));
        // ...
        // ...
}

```

--------------------------------

### Redirect to Introduction Page on Component Creation

Source: https://github.com/weexteam/website/blob/master/docs/zh/guide/README.md

This JavaScript snippet, likely part of a Vue.js component, automatically redirects the user to the '/zh/guide/introduction.html' path when the component is created. This is typically used for setting a default landing page or guiding users to initial content.

```JavaScript
module.exports = {
  created(){
    this.$router.push('/zh/guide/introduction.html')
  }
}
```

--------------------------------

### Multi-Page BroadcastChannel Communication Example

Source: https://github.com/weexteam/website/blob/master/docs/docs/api/broadcast-channel.md

This comprehensive example demonstrates a full communication flow using `BroadcastChannel` across three different pages (A, B, C). Page A sends a message, Page B joins the channel, and Page C receives the message, logs it, and sends a reply, illustrating both sending and receiving capabilities.

```javascript
const Steve = new BroadcastChannel('Avengers')
Steve.postMessage('Assemble!')
```

```javascript
const Hulk = new BroadcastChannel('Avengers')
```

```javascript
const Stack = new BroadcastChannel('Avengers')
Stack.onmessage = function (event) {
  console.log(event.data) // Assemble!
  Stack.postMessage('I am Tony and I am leaving now.')
}
```

--------------------------------

### IWXJSExceptionAdapter Usage Example

Source: https://github.com/weexteam/website/blob/master/docs/guide/extend/extend-android.md

Illustrates how to register a custom exception adapter with the Weex SDK engine to handle JavaScript exceptions.

```java
WXSDKEngine.setJSExcetptionAdapter(new TestExceptionAdapter());
```

--------------------------------

### Weex Loading Component API Reference

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/components/loading.md

API documentation for the `<loading>` component in Weex, detailing its available properties and events for controlling its behavior and appearance.

```APIDOC
<loading> Component API:

Properties:
- display: string
    Description: Controls the visibility of the <loading> component.
                 The 'display' setting must appear in pairs (e.g., setting 'display="show"' must have a corresponding 'display="hide"').
    Values: "show" | "hide"
    Default: "show"

Events:
- @loading: (event: Event) => void
    Description: Triggered when the parent component (<scroller>, <list>, or <waterfall>) completes a pull-up action.
```

--------------------------------

### Basic Weex a Tag for Page Navigation

Source: https://github.com/weexteam/website/blob/master/docs/docs/components/a.md

Illustrates the fundamental use of the Weex `<a>` tag to navigate to another Weex bundle, demonstrating the required `<text>` wrapper for content.

```Html
<a href="http://dotwe.org/raw/dist/a5e3760925ac3b9d68a3aa0cc0298857.bundle.wx">
  <text>Jump</text>
</a>
```

--------------------------------

### IActivityNavBarSetter Usage Example

Source: https://github.com/weexteam/website/blob/master/docs/guide/extend/extend-android.md

Demonstrates how to set a custom implementation for the `IActivityNavBarSetter` interface, which is used by `WXNavigatorModule` for navigation bar capabilities.

```java
WXSDKEngine.setActivityNavBarSetter(new IActivityNavBarSetter(){});
```

--------------------------------

### Weex Webview Module API Reference

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/modules/webview.md

Comprehensive API documentation for the Weex `webview` module, detailing methods available to control the navigation and refresh behavior of embedded `<web>` components. This includes methods for navigating back, forward, and reloading the current page.

```APIDOC
goBack(webElement)
  Description: Navigates back in the webview's history.
  Parameters:
    webElement: The <web> component element, obtainable via its 'ref' attribute.

goForward(webElement)
  Description: Navigates forward in the webview's history.
  Parameters:
    webElement: The <web> component element, obtainable via its 'ref' attribute.

reload(webElement)
  Description: Reloads the current page in the webview.
  Parameters:
    webElement: The <web> component element, obtainable via its 'ref' attribute.
```

--------------------------------

### Example Usage of Weex `requireModule` with Modal

Source: https://github.com/weexteam/website/blob/master/docs/zh/docs/api/weex-variable.md

Demonstrates how to use `weex.requireModule` to import the `modal` module and call its `toast` method with a message and duration.

```HTML
<template>
  <div><text>Toast</text></div>
</template>
<script>
  const modal = weex.requireModule('modal')
  modal.toast({
    message: 'I am a toast.',
    duration: 3
  })
</script>
```

--------------------------------

### Import WXDevtool Header in AppDelegate.m

Source: https://github.com/weexteam/website/blob/master/docs/guide/debug/integrate-devtool-to-ios.md

This snippet demonstrates how to import the WXDevtool header file in `AppDelegate.m`, showing options for both Cocoapods and source code installations.

```Objective-C
//1. From cocoapods
#import <WXDevtool/WXDevtool.h>

//2. From source code
#import "WXDevtool.h"
```

--------------------------------

### Weex Project Run Commands

Source: https://github.com/weexteam/website/blob/master/docs/guide/develop/weex_cli.md

Commands to run Weex projects on iOS simulators, Android simulators/real machines, or in a web preview using the `@weex-cli/run` module.

```bash
# Run iOS Simulator Preview
$ weex run ios
# Run Android Simulator / Real Machine Preview
$ weex run android
# Run web preview
$ weex run web
```
Tokens:
Raw