WEEX framework (2) Development environment construction, creating App, compiling and running

IDE

VSCode is recommended.

install dependencies

Weex officially provides the weex-cli scaffolding tool to assist development and debugging.

First, you need Node.js and Weex CLI.

There are many ways to install Node.js. The easiest way is to download the executable program from the Node.js official website and install it directly.

For more installation methods, please refer to the official Node.js information

TIP
Usually, the Node.js environment is installed, and the npm package management tool is also installed. Therefore, directly use npm to install weex-toolkit, you can also install through yarn.
Domestic developers recommend switching the npm mirror to the Taobao NPM mirror https://registry.npm.taobao.org.

Run the following command to install the latest beta version tools:

OSX environment

$ sudo chmod -R 777 /usr/local/lib/node_modules/
$ npm i -g weex-toolkit // 安装weex工具包
$ weex -v // 查看当前weex工具版本

Windows environment

$ npm i -g weex-toolkit 
$ weex -v // 查看当前weex工具版本

After the installation, you can directly use weex helpthe command to verify whether the installation is successful, it will display all the instructions supported by weex, and you can also weex doctorcheck your local development environment through the command.

Initialize the project

Then initialize the Weex project:

$ weex create weex-demo

After executing the command, a standard project structure has been generated for us in the weex-demo directory.

to develop

Enter the path where the project is located. If you choose to automatically install dependencies when generating the project, you only need to run directly after entering the project to run npm startthe project completely. Otherwise, you need to run it in the project in advance to npm installinstall the dependencies required by the project.

npm startAfter running, the tool will start a local web service and listen to 8081the port. You can open http://localhost:8081to view the rendering effect of the page under the Web. The source code is in src/the directory, you can develop it like a normal Vue.js project.
Preview the rendering

compile and run

By default weex createthe command does not initialize iOS and Android projects, you can weex platform addadd specific platform projects by executing .

weex platform add ios
weex platform add android

Due to different network environments, the installation process may take some time, please be patient. If the installation fails, please make sure your network environment is smooth.

In order to open Android and iOS projects on the local machine, you should configure the development environment of the client. For iOS, you should have Xcode installed and configured. For Android, you should have Android Studio installed and configured. When the development environment is ready, run the following command to start the application on the emulator or real device:

weex run ios
weex run android
weex run web

Tips:
It is recommended to choose JDK when configuring the Android environment JDK8. The JDK environment on my own computer is the default JDK14. As a result, an error is reported when compiling, and it is normal to switch to JDK8.

compile exception

1. weex run iosFailed to run:
   Failed to locate 'instruments'
   xcrun: error: unable to find utility “instruments”, not a developer tool or in PATH
   
   The failure to run the command line may be a problem with the weex packaging tool weex-toolkit, and the official version has not been released. Let's try other ways to run the project, for example, is it possible to run it directly with xcode? So try to open WeexDemo.xcworkspace with xcode, click to run, and found that the error Pods-XXXXX.debug.xcconfig.xcconfig: unable to open file:
   
   This is a common error, the solution is very simple:
   we first cd to the iOS directory, in Command line input:
   1, sudo gem install cocoapods --pre
   2, pod install

Then the running result is still an error:

the analysis shows that weex-sdk version 0.18.0 cannot be downloaded remotely.
Let's first look at the automatically generated podfile content in the project template:

source '[email protected]/CocoaPods/Specs.git'
platform :ios, '8.0'
#inhibit_all_warnings!

def common
	pod 'WeexSDK'
    pod 'WeexPluginLoader'
    pod 'SDWebImage', '3.7.5'
    pod 'SocketRocket', '0.4.2'
end

target 'WeexDemo' do
    common
end

target 'WeexUITestDemo' do
    common
end

It was found WeexSDKthat no version was specified, and the associated weex-sdk 0.18.0 was invalid in the remote warehouse when the template project was generated. Check the official github homepage of weex to know that the latest SDK version is 0.30.0. Moreover, the ios platform defaults to 8.0, which is too low, and can be upgraded to 9.0.
So modify the Podfile as follows:

source '[email protected]/CocoaPods/Specs.git'
platform :ios, '9.0'
#inhibit_all_warnings!

def common
	pod 'WeexSDK','0.30.0'
    pod 'WeexPluginLoader'
    pod 'SDWebImage', '3.7.5'
    pod 'SocketRocket', '0.4.2'
end

target 'WeexDemo' do
    common
end

target 'WeexUITestDemo' do
    common
end

At this time, the running weex run ioscommand still cannot run, but open xcode and select the real device or simulator, and click run to run the project normally.

Download demo project source code: https://github.com/wenzhiming/wzm-weex-demo.git

debugging

weex-toolkit also provides a powerful debugging function, only need to execute:

weex debug

This command will start a debugging service and open the debugging page in Chrome (currently only supports desktop browsers based on the V8 engine). For detailed usage, please refer to the documentation of weex-toolkit .