Environment set up

## weex create awesome-project ## NPM run dev ## Run serve ## Weex Platform add Android Install android platform ## Weex Run Android connect mobile phone debugging, deploy to AndroidCopy the code

Debugging commands

## weex SRC /foo.vue live preview, you can download the APP to debug ## weex debug, you can view the page code in the browserCopy the code

The difference between Vue in WEEx and web

  1. Event bubbling and capturing mechanisms are not supported, and event modifiers such as.prevent,.capture,.stop, and.self are meaningless in native environments.
  2. The keyboard events. {keyCode | keyAlias} modifier in the native environment meaningless.
  3. Instead of calling vm.$mount, the entry component is mounted into the view of the native application by default.
  4. V-html and V-text instructions are not supported
  5. The template attribute is not supported when defining components.
  6. Isolate multi-page scopes (config, globally registered things fail)
  7. Weex does not support display: None. Therefore, the V-show command is not supported
  8. Vue-router verifies the environment. If the browser API is not available, vue-Router automatically forces the abstract mode to enter. Therefore, when using vue-Router, do not write the mode configuration. The default vue-router uses hash mode in the browser environment and Abstract mode in the mobile native environment.
  9. In Weex, you must use programmatic navigation to write page-jumping logic. Push D. replace
  10. Use the Ready life cycle instead of Mounted in weeX
  11. Dom variable binding unbind v-bind using {{}}, including v-for with {{}}
  12. Cancel refs with id+$el(id)
  13. Data uses objects instead of functions (because of component isolation)
  14. Slot is replaced with content
  15. Native events such as @click are replaced by onclick
  16. V-for removes index using value:key
  17. Component event firing is changed from @emitBroadcast, other pages use $on to listen

Differences between WEEx and Web development

Style differences

  1. To optimize analytical efficiency, style style properties of short duration does not support shorthand, involving the attributes: border, the border – (top | | bottom left | right), margin, padding, flex
  2. Currently, EEX supports only pixel length values, not relative units (EM and REM).
  3. Box-sizing defaults to border-box for Weex box models. That is, the width and height of the box include the content, inside margin, and border width, but not the margin width.
  4. In Weex, Flexbox is the default and only layout model, so you don’t need to manually add display: flex to elements; Properties.
  5. Weex does not support the z-index element hierarchy. However, elements at the bottom have higher levels. Therefore, elements with higher levels can be placed at the bottom.
  6. If the positioned element exceeds the boundary of the container, the overflow will not be visible on Android because the default value of the Element overflow is hidden, but Android currently does not support setting Overflow: Visible.
  7. Weex supports four pseudo-classes: Active, Focus, Disabled, and Enabled
  8. Background-image has a higher priority than background-color, which means that both background-image and background-color are overwritten. Do not use abbreviations for background
  9. All components support active, but only the Input and TextaREA components support focus, enabled, and disabled.
  10. Box-shadow only supports iOS

Single-class name selector and scope

Weex supports only single class name selectors. It does not support relationship selectors or attribute selectors.

Differences in compilation environments

  1. For Web platforms, as with normal Vue 2.X projects, source files can be compiled using any of the official recommended methods, such as Webpack + Vue-Loader or Browserify + vueify.
  2. For Android and iOS platforms, we provide the Weex-Loader tool to support single file components compiled in. Vue format. That is, Webpack + Weex-Loader is currently the only way to generate js bundles available on the native side

Entrance to the file

  1. Weex-loader is a Webpack loader. For details about how to use weex-loader, see its official documents. Note that if the entry file for the Webpack configuration is in.vue format, you also need to pass an additional entry parameter, usually set to true, indicating that the current component is the entry component. To match. Vue files properly, the matching rules of weex-Loader in the Webpack configuration file also need to be adjusted.
  2. If you use the.js file as the entry file for the Webpack configuration, you don’t need to configure these additional parameters, and we recommend using Javascript files as the entry file for compilation

Weex instance variable

Each Weex page has an independent Weex variable in the JS context that holds singleton content or methods related to the current Weex page. All methods used to get a native Module