Native Mobile Apps with Weex and VueJS 2.0

Native Mobile Apps with Weex and VueJS 2.0
How to build a Weex app for the Web, Android and iOS! , 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:

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/sdk
export 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:

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

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

Recommended Courses:

Learn Web Development Using VueJS
☞ http://bit.ly/2q2qUv1

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
☞ http://bit.ly/2H56b0Q

Vue JS 2.0 - Mastering Web Apps
☞ http://bit.ly/2H5NudD

Suggest:

☞ JavaScript Programming Tutorial Full Course for Beginners

☞ Javascript Project Tutorial: Budget App

☞ Learn JavaScript - Become a Zero to Hero

☞ JavaScript for React Developers | Mosh

☞ Android Development Course - Build Native Apps with Kotlin Tutorial

☞ JavaScript Tutorial | Learn JavaScript Apps Like An Expert