初识weex系列（前端视角） - 使用vue2.0

推荐一个很赞的地址
在线编辑代码

上一节，咱们大概讲了一个项目，构建了一个app，过程应该是挺艰辛的，如今咱们来看看这张图，以往咱们都是用create，还记得吗，今天开始，咱们来用init，也就是vue的模式来构建项目，没必要要用create

其实，你们确定会有疑问，init和create有什么区别呢？
结合勾三股四的话:
init初始化的项目是针对开发单个 Weex 页面而设计的，也就是说这样的项目只包括单个页面开发须要的东西，好比前端页面源文件、webpack 配置、npm 脚本等。项目产生的输出就是一个 JS Bundle 文件，能够自由的进行部署。

create是初始化一个完整的 App 工程，包括 Android 和 iOS 的整个 App 起步，前端页面只是其中的一部分。这样的项目最终产出是一个 Android App 和一个 iOS App。

详解

weex init awesome-project
以后咱们进入项目所在路径，weex-toolkit 已经为咱们生成了标准项目结构。

在 package.json 中，已经配置好了几个经常使用的 npm script，分别是：
build: 源码打包，生成 JS Bundle
dev: webpack watch 模式，方便开发
serve: 开启静态服务器
debug: 调试模式
咱们先经过 npm install 安装项目依赖。以后运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器。

而后咱们打开浏览器，进入 http://localhost:8080/index.html 便可看到 weex h5 页面。复制代码

页面就出来了

可是，咱们打开命令行工具，发现一直在报一个错误。

GET http://localhost:8080/node_modules/weex-vue-render/index.js 404 (Not Found)复制代码

这个文件是来模拟手机端的文件，很明显这个路径错误的，致使咱们上面看到的是空白的手机页面，因此，咱们在/weex.html里面修改weex-vue-render/index.js的路径
我早node包文件里面找到了这个，很明显，路径前面少了一个dist

加上dist以后，咱们终于看到了正确的页面(这里真的有点坑，官方脚手架也能出错)

我想，你们都已经会了vue2.0的基本语法了吧，咱们来改改代码

nav.vue

<template>
    <div class="wrapper">
        <text class="txt">请输入你对个人见解</text>
        <input ref="input" class="input" type="text" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></input>
    </div>
</template>
<script>
    const modal = weex.requireModule('modal')
    export default {
        methods: {
            oninput (event) {
                console.log('oninput:', event.value)
                modal.toast({
                    message: `oninput: ${event.value}`,
                    duration: 0.8
                })
            },
            onchange (event) {
                console.log('onchange:', event.value)
                modal.toast({
                    message: `onchange: ${event.value}`,
                    duration: 0.8
                })
            },
            onfocus (event) {
                console.log('onfocus:', event.value)
                modal.toast({
                    message: `onfocus: ${event.value}`,
                    duration: 0.8
                })
            },
            onblur (event) {
                console.log('onblur:', event.value)
                modal.toast({
                    message: `input blur: ${event.value}`,
                    duration: 0.8
                })
            }
        }
    }
</script>
<style>
    .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;
    }
    .txt{
        color: green;
        font-size: 50px;
    }
</style>复制代码

foo.vue

<template>
    <div class="wrapper">
        <text class="title">Hello {{target}}</text>
        <nav></nav>
    </div>
</template>

<style>
    .wrapper {
        align-items: center;
        /* margin-top: 120px; */
    }

    .title {
        font-size: 48px;
    }

    .logo {
        width: 360px;
        height: 82px;
    }
</style>

<script>
    import nav from './nav.vue'
    export default {
        data: {
            logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
            target: '你们好，我是乘风gg'
        },
        components: {nav},
        methods: {
            update: function (e) {
                this.target = 'Weex'
                console.log('target:', this.target)
            }
        }
    }
</script>复制代码

这时候，有人就会问了，我这样子怎么打包成apk，由于这个模式根本就使用不了platform add[android/ios]命令了，咋办啊，还记得咱们上一节讲过，编译以后全部的东西，都会打包到那个dist目录下的那两个js文件，因此，在ｖｕｅ２．０工程目录下，咱们只须要把编译后的全部内容，复制粘贴到咱们前一节用ｃｒｅａｔｅ建立的那个ａｎｄｒｏｉｄ目录下，而后点击ａｎｄｒｏｉｄ　ｓｔｕｄｉｏ里的ｒｕｎ就行了（其实前端工程师只须要把ａｐｐ．ｗｅｅｘ．ｊｓ交给安卓工程师就行了，作到这一步就好了）

而后，手机就会显示安装好后的页面.

上面网页调试的布局和手机的布局不同啊，是否是我写错了呢？还真是我写错了（实在是坑，由于说好的三端统一，其实根本不是）先卖个关子。 这一节比较短，搭建环境和基本入门就到这了，其实教到这，你们都能直接去官网直接看 demo了，这个月月底比较忙，因此你们先去官网熟悉一下(没有vue基础的能够去看看vue基础语法)，下一节我打算讲讲他的内置组件和模块，估计会有点无聊，我尽可能结合实例吧。