How to build a Weex app for the Web, Android and iOS!
If you read The State of Weex: an inaccurate and outdated report, you learned that there was no clear path to make a Weex VueJS app that would build for the web, Android and iOS.
Well… now there is! Let’s do it!
OK… maybe we should set the proper expectations here. Weex still has a lot of rough edges. This tutorial will not end a deployable production app. You will, however, see a simple Weex Vue2.0 app working on the browser and on your phone. And that’s a pretty good milestone.
Install the tools
We will need vue-cli to install the template and weex-toolkit which has the tools to build the native app.
> npm install -g vue-cli> npm install -g weex-toolkit
Create app
Create the app from this weex-vue template.
> vue init tralves/weex-vue <project_name>> cd <project_name>> npm install
The template creates a project with the folder structure:
Folder structure
The important folders are:
dist
— where the compiled js will go.platforms
— Android/iOS native projects.src
— the app code.
Other important files:
config.xml
— a cordova config file used to generate the native projects. This is not working properly yet.weex.html
— the entry file of the web version.app.js
— the VueJS bootstrap file used inweex.html
.index.html
—renders the app in a mobile-like frame. Displays a QR-Code you can use to load your app into the Weex playground app.
Your app will be in src
. If you open the App.vue
file, you will find a simple layout with only two Weex components: <image>
and <text>
. You can find more about all the Weex components in the official docs. Weex compiles these components into html for the web version (e.g. an <image>
becomes an <img>
) and into native components for the iOS/Android apps.
This example is very simple, but you can build more complex apps. Check out the weex-hackernews and weex-todo-list. These apps show how to use vue-router, vuex, locally persistent data, etc.
Web build
> npm run build> npm run serve
The command npm run build
compiles the web and native versions of the app into build/
. The npm run serve
starts a local webserver.
Now you can point your browser to [http://localhost:8080](http://localhost:8080to)
to preview the mobile app in the browser, and http://localhost:8080/weex.html
to access the web version.
Android build
Firstly, we need to:
- Download and install Android Studio.
- Add the
$ANDROID_HOME
environment variable and add the SDK tools to the$PATH
. In my case I added to.bash_profile
:
export ANDROID_HOME=~/Library/Android/sdkexport PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/build-tools
Then we add the android platform:
> weex platform add android
Then, connect an Android device (with USB debug activated) and run:
> weex run android
Note: If you don’t have an Android device, it will use an emulator which is very slow.
And that’s it! The app should be running in the device!
iOS build
Pre-requirements:
- Xcode
- CocoaPods
Then:
> weex platform add ios
Install cocoapods dependencies:
> cd platforms/ios> pod install
Open the Xcode workspace WeexDemo.xcworkspace
under platforms/ios
.
Add the dependencies from the pods:
- Open General settings.
- (1) press ‘+’ under Linked Framework and Libraries
- (2) Select the libs
libSDWebImage.a
,libSocketRocket.a
andlibWeexplugin.a
. - (3) Press ‘Add’
Run the project!
I had some problems with outdated cocoapods. If you run into compilation issues, try
pod update
.
Next steps for weex-vue?
The TODO list is big:
- Fix config.xml settings.
- Have config.xml generate a properly configured Android/iOS projects. Currently, this template generates projects with the wrong names, icons, app ids, etc.
- Fix the debugging tools. Weex has pretty amazing debugging tools that use the Chrome Dev Tools. I couldn’t make it work properly so far.
- Improve build tools: icon/splash screen generators, distributable Web builds, etc.
- Tools and tutorials about Weex plugins, components that interact with the native capabilities.
- More demo apps, with more complex scenarios, that will show more Weex components and plugins.