Weex Quick Start

Time:2022-11-24

“If you want to do a good job, you must first sharpen your tools.” Before learning Weex, you need to build a local development environment. If you just want to simply experience the charm of Weex, you can use the dotWe online operating environment provided by Weex. The address is “http://dotwe.org/vue”。

install dependencies

Weex officially provides the weex-toolkit scaffolding tool to assist development and debugging. But need to install Node.js and Weex Cli related environment first.

Install Node.js

There are many ways to install Node.js. The easiest way is to download the executable installer directly from the Node.js official website and install it directly. If it is a Mac environment, you can also use Homebrew to install it. The installation command is as follows:

brew install node

After the installation is complete, you can use the following command to check whether the installation is successful.

$ node -v
v6.11.3
$ npm -v
3.10.10

Usually, when a Node.js package is installed, the npm package management tool is also installed along with it. Therefore, you can directly use npm to install the weex-toolkit tool.

npm install -g weex-toolkit

If you want to upgrade weex-toolkit, you can use the following command:

weex update [email protected] //@After marking the version, latest means the latest version

If you are a domestic developer, you can also use Taobao’s npm image to install weex-toolkit. The installation commands involved are as follows:

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g weex-toolkit

After the installation is complete, you can directly use the weex command to verify whether the installation is successful. If the installation is successful, the parameters of the weex command line tool will be displayed, as shown in the figure below.

Weex Quick Start

install weexpack

Weexpack is a new generation of engineering development kit for weex, and it is a powerful tool for quickly building application prototypes based on weex. Using weexpack can quickly help developers create weex projects and plug-in projects through the command line, and add weex application templates of the corresponding platform. market. The command to install weexpack is as follows:

npm install -g weexpack

Install Weektools

weex-toolkit is a scaffolding command line tool provided by the official, which can be used to create, debug and package Weex projects. Weex-toolkit only supports initializing Vue projects after version 1.0.1, so please pay attention to the version of weex-toolki when using it. The installation command of weex-toolkit is as follows:

npm install -g weex-toolkit

If installing using the command above, using thehttps://registry.npmjs.org obtained…, so for domestic users, it is best to choose to download from Ali’s mirror, and you need to execute the following commands during installation.

npm install -g cnpm --registry=https://registry.npm.taobao.org //Taobao Mirror
npm install -g weex-toolkit

After the installation is complete, you can use the weex -v or weex command to verify that the installation is successful.

Install the Android environment

If you need to support the Android platform, you need to configure the Android development environment: install Java related environment, install Android Studio and Android SDK. When installing and compiling Android projects, you need to ensure that the version of Android build-tool is 23.0.2 or higher.

Install the iOS environment

If you need to support the iOS platform, you need to configure the iOS development environment: install Xcode, cocoaPods and related environments. Among them, Xcode is an integrated development tool provided by Apple, which can be used to develop macOS and iOS applications, and CocoaPods is a third-party open source library tool responsible for iOS project management. Reasonable use of CocoaPods can improve the development efficiency of programs.

create project

Next, use the create command provided by Weex to initialize a Weex project.

weex create weexdemo

After executing the above command, a project created using Weex or Vue template will be created in the project weexdemo directory. The project directory structure is as follows.

WeexProject    
├── README.md //Project notes
├── android.config.json //Android project configuration
├── configs //weex configuration         
├── ios.config.json //ios project configuration
├── package-lock.json    
├── package.json //project npm package management
├── platforms //platform template directory 
│ ├── ios //ios native platform directory
│ └── android //android native platform directory
├── plugins //plugin download directory 
│   └── README.md 
├── src //business source code directory
│   └── index.we       
├── tools //tool ​​directory
│   └── webpack.config.plugin.js 
├── web //web platform directory
│   ├── index.html 
└── webpack.config.js // webpack module packaging configuration directory

However, the weex project created through the create command does not contain iOS and Android native project templates by default. If you need to add a native project template, you can switch to the appName directory and then install dependencies. The template will be installed in the project’s platforms directory by default. The official template supports weex by default.
Bundle debugging and plugin mechanism. The installation command is as follows:

weexpack platform add ios //install ios template
weexpack platform add android //install android template

After the template is installed, the following template directory will be added to the project directory. The directory structure is as follows:

├── platforms 
│   ├── ios
│   └── android

When hybrid development is required, you can use the native development environment to open Android or iOS projects for native function development.

development and operation

When using the create command to create a weex project, the weex-toolkit tool has generated a standard project structure for us. At this point, open the initialized Weex project and navigate to “/src/index.vue”, which is the default homepage of Weex. The code content is as follows

<template>
  <div class="wrapper">
    <image :src="logo" class="logo" />
    <text class="greeting">The environment is ready!</text>
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data () {
    return {
      logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
    }
  }
}
</script>

Before running the weex project, you need to use the command “npm install” to install the dependencies of the project. You can view the dependencies related to the project in the package.json file. Then, use the command “npm run dev & npm run serve” in the root directory of the project to enable watch mode and static server.
Open your browser and type “http://localhost:8081/index.html” to open a preview page, and use the QR code scanned by the playground app provided by Weex to see the rendering effect of the page on the mobile phone, as shown in the figure below.

Weex Quick Start

If you need to run the project on an emulator or a real device, you can use the following command to start the application, and please start the server service before running the client command.

weex run ios //run on ios device
weex run android //run on Android devices

It should be noted that before running the start command, please ensure that the native operating environment required by Android and iOS is configured correctly, and you need to start the emulator or connect the mobile device before running the start command.

After executing the startup command, if there is no error message during project compilation, the system will ask the user to select an installed device during runtime, as shown in the figure below.

Weex Quick Start

If there are no errors, you will see the running effect as shown in the figure below.
Weex Quick Start