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