Getting started with Weex

1. Installation

With Yarn

yarn global add --ignore-engines weex-toolkit 

2. Create App

weex create my-first-app 

I chose -

• Babel stage-0

• Unit Tests : Yes

• EsLint: Yes

• Vue-Router: Yes

• WebRenderer: 1.0.x

cd my-first-app npm install 

Note: Phantom JS will be downloaded to handle web rendering preview and Unit Tests. If you disable unit tests, PhantomJS is not used (Maybe we can try to use headless chrome instead)

You'll see following output

Success! Created first-weex-app at /Users/championswimmer/Development/Personal/Weex/first-weex-app  Inside that directory, you can run several commands:     npm start   Starts the development server for you to preview your weex page on browser   You can also scan the QR code using weex playground to preview weex page on native    npm run dev   Open the code compilation task in watch mode    npm run ios   (Mac only, requires Xcode)   Starts the development server and loads your app in an iOS simulator    npm run android   (Requires Android build tools)   Starts the development server and loads your app on a connected Android device or emulator    npm run pack:ios   (Mac only, requires Xcode)   Packaging ios project into ipa package    npm run pack:android   (Requires Android build tools)   Packaging android project into apk package    npm run pack:web   Packaging html5 project into `web/build` folder    npm run test   Starts the test runner 

3. Add Platforms

You should have XCode, CocoaPods for iOS

You should have SDK and Emulator for Android

weex platform add ios weex platform add android 

4. Run Platforms

weex run ios 

or

npm run ios 

Same for Android

5. Add Typescript support

Reference https://my.oschina.net/zaaksam/blog/1572320

npm install -D typescript vue-property-decorator ts-loader@3 

NOTE: ts-loader v3 is needed as we use Webpack v3

src/types/vue-sfc.d.ts

declare module "*.vue" {     import Vue from 'vue'     export default Vue   } 

src/types/weex.d.ts

declare namespace we {     interface instance {     /** This variable contains all environmental information for the current Weex page */     config: any        /** Get all methods of a native module */     requireModule(name: string): any     }   }      declare var weex: we.instance 

Add a tsconfig.json (inside src folder)

{   "compilerOptions": {     "target": "es5",     "lib": [       "dom",       "es5",       "es2015"     ],     "typeRoots": ["types"],     "module": "es2015",     "moduleResolution": "node",     "experimentalDecorators": true,     "emitDecoratorMetadata": true,     "removeComments": true,     "suppressImplicitAnyIndexErrors": true,     "allowSyntheticDefaultImports": true,     "strict": true   } }  

Changes in webpack

Note: Only highlighting portions to change

const weexEntry = {     'index': helper.root('entry.ts')   } . . . . entry: Object.assign(webEntry, {     'vendor': [path.resolve('node_modules/phantom-limb/index.ts')]   }), resolve: { 	extensions: ['.ts', '.js', '.vue', '.json'], } 

Change entry.js to entry.ts

/* global Vue */      /* weex initialized here, please do not move this line */   import * as router from './router'   import App from '@/index.vue'   import Vue from 'vue'      new Vue({     el: '#root',     router,     render: h => h(App)   })   router.push('/') 

In webpack.config.js and in config.js change entry.js mentions to entry.ts

---

Written with StackEdit.