【weex】第一次尝试，weex windows下的环境搭建到第一个完整的app

安装 Node.js

1. node.js需要4.0+
2. 官网下载地址https://nodejs.org/en/
3. 安装教程请看这里node.js安装图解

安装 weex-toolkit

安装好node.js后，打开CMD工具现在安装weex-toolkit,这是weex的集成环境，有了weex-toolkit就可以使用weex命令了。

默认的npm默认的是https://registry.npmjs.org/这个源，下载很慢

先切换到淘宝的源，会快很多

npm config set registry https://registry.npm.taobao.org

npm install -g weex-toolkit

安装完毕，验证下

初始化项目hello weex

先建立一个app文件夹，我是这个目录D:\work_weex\myTest

然后使用cmd进入myTest这个目录

项目初始化

weex init

接着安装依赖

Java代码  

1. npm install  

项目中会增加这么个目录

D:\work_weex\myTest\node_modules

项目目录结构：

src-代码目录
index-浏览器启动页面
观察package.json里面修改端口号

在 package.json 中，已经配置好了几个常用的 npm script，分别是：

• build: 源码打包，生成 JS Bundle
• dev: webpack watch 模式，方便开发
• serve: 开启静态服务器
• debug: 调试模式

"name": "myTest",
  "description": "myTest",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "keywords": [
    "weex",
    "vue"
  ],
  "scripts": {
    "build": "webpack",
    "dev": "webpack & serve -p 8070",
    "serve": "node build/init.js && serve -p 8070",
    "debug": "weex-devtool"
  },

现在试试启动这个项目

Java代码  

1. npm run dev  

 

现在浏览器访问一下localhost:8070会出现如下界面

好了，现在我们已经启动起来了这个项目。

自己写个文件跑跑

在src中创建一个name.we

<template>
    <div>
        <text repeat="item in items" class="text {{item.sex}}">{{item.name}}</text>
    </div>
</template>
<style>
    .text{ width:750; padding-top: 10px; padding-bottom: 10px;justify-content: center;text-align: center; color:#ffffff}
    .male { background-color: #9999ff; }
    .female { background-color: #ff9999; }
</style>
<script>
    module.exports = {
        data: {
            items:[]
        },
        methods:{
        }
    }
</script>

再创建个home.we

<template xmlns="http://www.w3.org/1999/html">
    <div>
        <div style="width: 750; height: 200;">
            <image class="img" src={{imageUrl}}></image>
        </div>
        <input ref="input" class="input" type="text"  value={{input}} oninput="oninput" />
        <a class="button">
              <text class="text" onclick="add">添加他</text>
        </a>
        <name items = {{items}}></name>
    </div>


</template>


<script>
    module.exports = {
        data: {
            imageUrl: 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png',
            input:'测试',
            sex:'male',
            items:['x','y']
        },
        methods: {
            oninput (event) {
                console.log('ominput:', event.value)
                this.input = event.value;
            },
            add(){
                if(this.input === '')
                    return;
                this.items.unshift({name:this.input,sex:this.sex})
                this.input = "";
                if(this.sex === 'female'){
                    this.sex = 'male';
                }else{
                    this.sex = 'female';
                }
            }
        }
    }
</script>


<style>
  .img { width: 200; height: 200; margin-left: 275}
  .input {
      font-size: 50px;
      width: 650px;
      margin-top: 50px;
      margin-left: 50px;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
      color: #666666;
      border-width: 2px;
      border-style: solid;
      border-color: #41B883;
    }
  .button {
      width: 450px;
      margin-top: 30px;
      margin-bottom: 30px;
      margin-left: 150px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-width: 2px;
      border-style: solid;
      border-color: #DDDDDD;
      background-color: #F5F5F5
    }
    .text {
      font-size: 30px;
      color: #666666;
      text-align: center;
    }
</style>

在cmd上运行

浏览器会自动打开，并且还支持代码一保存就自动刷新界面的功能。

点着玩吧~~

最后使用命令导出js：

weex home.we --output home.js

把这个js发给客户端集成即可