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
> npm install -g vue-cli
> npm install -g weex-toolkit
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:
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 in
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:
<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.
> npm run build
> npm run serve
npm run build compiles the web and native versions of the app into
npm run serve starts a local webserver.
Now you can point your browser to
http://localhost:8080 to preview the mobile app in the browser, and
http://localhost:8080/weex.html to access the web version.
Firstly, we need to:
- Download and install Android Studio.
- Add the
$ANDROID_HOMEenvironment variable and add the SDK tools to the
$PATH. In my case I added to
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!
> weex platform add ios
Install cocoapods dependencies:
> cd platforms/ios
> pod install
Open the Xcode workspace
Add the dependencies from the pods:
- Open General settings.
- (1) press ‘+’ under Linked Framework and Libraries
- (2) Select the libs
- (3) Press ‘Add’
Run the project!
I had some problems with outdated cocoapods. If you run into compilation issues, try
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.