初識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基礎語法)，下一節我打算講講他的內建元件和模組，估計會有點無聊，我儘量結合例項吧。