Weex初体验

1. 什么是Weex

Weex官网的解释是:Weex 是一个动态化的高扩展跨平台解决方案。简单的说就是用一套代码可以用在ios、Android和web应用上。

2. 快速创建一个weex项目

目前Weex 提供了一个命令行工具weex-toolkit 来帮助开发者使用 Weex。它可以用来快速创建一个空项目、初始化 iOS 和 Android 开发环境、调试、安装插件等操作。

$ npm install -g weex-toolkit  //node 版本大于6

网络不通畅的可以使用淘宝镜像啊！

$ npm install weex-toolkit -g --registry=https://registry.npm.taobao.org
// 或者
$ npm use taobao
$ npm install weex-toolkit -g

使用weex-toolkit工具的create命令快速创建一个项目

$ weex create my-project

然后就是简单的三连

cd awesome-app
npm install
npm start

然后工具会启动一个本地的 web 服务，监听 8081 端口。你可以打开 http://localhost:8081 查看页面在 Web 下的渲染效果。 源代码在 src/ 目录中，你可以像一个普通的 Vue.js 项目一样来开发。当然了，也有不一样的比如，请听下面一节分析。

3. 跟普通的前端开发有哪些区别

3.1 Weex 环境中没有 DOM

DOM（Document Object Model），即文档对象模型，是 HTML 和 XML 文档的编程接口，是 Web 中的概念。Weex 的运行环境以原生应用为主，在 Android 和 iOS 环境中渲染出来的是原生的组件，不是 DOM Element。
没用DOM所以在Weex中就不支持DOM操作了，没有Element 、Event 、File 等对象,也没有document.getElementById 、 document.querySelector 等，也就不支持JQuery。

3.2 Weex 环境中没有 BOM

3.2.1 没有window对象

没有BOM，就没有window对象了，但是你想获取一些获取设备的屏幕或环境信息，可以使用WXEnvironment变量。

• WXEnvironment
  • weexVersion: WeexSDK 的版本。
  • appName: 应用的名称。
  • appVersion: 应用的版本。
  • platform: 运行平台，可能的值是 Web 、Android 、iOS 之一。
  • osName: 系统的名称。
  • osVersion: 系统版本。
  • deviceWidth: 设备宽度。
  • deviceHeight: 设备高度

3.2.2 没有document对象

3.2.3 没有history 、location 、navigator对象

3.2.n …等差异，请参考官网手册

3.3 能够调用移动设备原生 API

4.开发一个项目

在开发项目之前在vscode插件搜索vscode-weex,使用插件更快的开发项目。还可以使用Weex Ui，进行项目的开发。
使用weex-ui组件体验一下开发。

<template>
  <div>
    <text class="score">{{score}}</text>
    <wxc-lottery-rain :config="config"
                      :pic-list="images"
                      ref="wxc-lottery-rain"
                      :wrap-style="wrapStyle"
                      @wxcLotteryRainCaught="wxcLotteryRainCaught">
    </wxc-lottery-rain>
  </div>
</template>

<style scoped>
  .score {
    margin: 0 auto;
    margin-top: 20px;
    font-size: 100px;
  }
</style>

<script>
  import { WxcLotteryRain } from 'weex-ui';
  var modal = weex.requireModule('modal')
  export default {
    components: { WxcLotteryRain },
    data: () => ({
      images: [
       'https://img.alicdn.com/tfs/TB1sZPlb5IRMeJjy0FbXXbnqXXa-241-206.png',
       'https://img.alicdn.com/tfs/TB1eCbwb3MPMeJjy1XcXXXpppXa-241-206.png',
       'https://img.alicdn.com/tfs/TB1rDTjb3MPMeJjy1XdXXasrXXa-241-206.png',
       'https://img.alicdn.com/tfs/TB1Nw2sb3MPMeJjy1XbXXcwxVXa-241-206.png',
       'https://img.alicdn.com/tfs/TB1hCbwb3MPMeJjy1XcXXXpppXa-241-206.png'
      ],
      config: {
        intervalTime: 450,
        hideAniTime: 300,
        showAniTime: 300,
        showTime: 600,
        randomTime: 1000,
        width: 241,
        height: 206
      },
      wrapStyle: {
        backgroundColor: 'rgba(133, 11, 11, .7)'
      },
      score: 0
    }),
    methods: {
      wxcLotteryRainCaught (e) {
        this.score += 10
      }
    }
  }
</script>

效果图：