Native Mobile Apps with Weex and VueJS 2.0

0
1454

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 lotof rough edges. This tutorial will not end a deployable production app. You will, however, see a simple Weex Vuejs 2.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.

Create app

Create the app from this weex-vue template.

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

The command npm run build compiles the web and native versions of the app into build/. The npm run servestarts 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.

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:

Then we add the android platform:

Then, connect an Android device (with USB debug activated) and run:

Note: If you don’t have an Android device, it will use an emulator which is veryslow.

And that’s it! The app should be running in the device!

iOS build

Pre-requirements:

Then:

Install cocoapods dependencies:

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 and libWeexplugin.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.

Suggest

Angular, React.js & Vue.js – Quickstart & Comparison

The Full JavaScript & ES6 Tutorial – (including ES7 & React)

Vue JS 2 – The Complete Guide (incl. Vuex) 

LEAVE A REPLY

Please enter your comment!
Please enter your name here