How to build a Weex app for the Web, Android and iOS! If you read , you learned that there was no clear path to make a Weex VueJS app that would build for the web, and iOS. The State of Weex: an inaccurate and outdated report Android Well… now there is! Let’s do it! OK… maybe we should set the proper expectations here. Weex still has a 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. lot Install the tools We will need to install the template and which has the tools to build the native app. vue-cli weex-toolkit > 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: — where the compiled js will go. dist — Android/iOS native projects. platforms — the app code. src Other important files: — a cordova config file used to generate the native projects. This is not working properly yet. config.xml — the entry file of the web version. weex.html — the bootstrap file used in . app.js VueJS weex.html —renders the app in a mobile-like frame. Displays a QR-Code you can use to load your app into the . index.html Weex playground app Your app will be in . If you open the file, you will find a simple layout with only two Weex components: and . You can find more about all the Weex components . Weex compiles these components into html for the web version (e.g. an becomes an ) and into native components for the iOS/Android apps. src App.vue <image> <text> in the official docs <image> <img> This example is very simple, but you can build more complex apps. Check out the and . These apps show how to use vue-router, vuex, locally persistent data, etc. weex-hackernews weex-todo-list Web build > npm run build> npm run serve The command compiles the web and native versions of the app into . The starts a local webserver. npm run build build/ npm run serve Now you can point your browser to to preview the mobile app in the browser, and to access the web version. [http://localhost:8080](http://localhost:8080to) http://localhost:8080/weex.html Android build Firstly, we need to: Download and install . Android Studio Add the environment variable and add the SDK tools to the . In my case I added to : $ANDROID_HOME $PATH .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 ( ) and run: with USB debug activated > weex run android Note: If you don’t have an Android device, it will use an emulator which is slow. very 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 under . WeexDemo.xcworkspace platforms/ios Add the dependencies from the pods: Open General settings. (1) press ‘+’ under Linked Framework and Libraries (2) Select the libs , and . libSDWebImage.a libSocketRocket.a 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.
