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 [email protected]

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.