Weex開發之路（一）：開發環境搭建

邏輯教育-楚陽發表於2018-12-17
開發環境

一、Weex介紹

Weex是阿里巴巴在2016年6月份對外開源的一款移動端跨平臺的移動開發工具，Weex的出現讓我們的應用既有了Native的效能和H5的動態性，只要通過前端JS語法就能寫出同時相容iOS、Android、Web三端相容的頁面，解決了移動應用開發中頻繁發版和多端研發等痛點。
相對於Facebook的React Native，Weex更加輕量、接入成本更小、更容易上手。而且Weex的理念（write once, run everywhere）相比於React Native的理念（Learn once, write anywhere）更加的讓人感覺NB，Weex的底層framework磨平了上層呼叫的差異。

推薦一個iOS高階交流群：624212887，群檔案自行下載，不管你是小白還是大牛熱烈歡迎進群 ，分享面試經驗，討論技術， 大家一起交流學習成長！希望幫助開發者少走彎路。——點選：加入

二、Weex開發環境搭建

第一步：安裝Node環境

1.1：安裝Homebrew

Homebrew是Mac OSX上的軟體包管理工具，能夠在Mac中方便的安裝和解除安裝軟體。

  • 安裝方式：開啟終端，輸入以下命令：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"複製程式碼

稍等片刻，等待安裝完成。如果失敗，翻牆試試。

  • 檢查是否安裝成功

yixiangdeMacBook-Pro:~ yixiang$ brew --version
Homebrew 1.1.5
Homebrew/homebrew-core (git revision 4899; last commit 2016-12-16)複製程式碼

1.2:安裝node和npm

node是Weex程式碼構建中的必要依賴，npm是隨同Node一起安裝的包管理工具，解決nodeJS程式碼部署的問題。Weex需要Node4.0以上的環境。

  • 安裝方式：開啟終端，輸入以下命令:

 brew install node複製程式碼

  • 檢查是否安裝成功

yixiangdeMacBook-Pro:Desktop yixiang$ node -v
v4.6.1
yixiangdeMacBook-Pro:Desktop yixiang$ npm -v
3.10.9複製程式碼

1.3：安裝weex-toolkit開發套件

裡面包含了一些weex開發中的常用命令列工具

  • 安裝方式

npm install -g weex-toolkit複製程式碼

  • 檢查是否安裝成功
    輸入weex，會顯示一些Usage提示，表明安裝成功

第二步：編寫一個HelloWeex例項，測試環境是否可以執行成功

新建一個資料夾HelloWeex，在資料夾中新建HelloWeex.we檔案，檔案內容如下：

<template>
    <div class="container">
        <image src="http://9.pic.paopaoche.net/up/2016-7/201671315341.png" class="pic"></image>
        <text class="text">Hello Weex</text>
    </div>
</template>

<style>

    .container{
        align-items: center;
    }
    .pic{
        width: 200px;
        height: 200px;
    }
    .text{
        font-size: 40px;
        color: black;
    }

</style>複製程式碼

然後在終端進入該檔案所在目錄，執行weex HelloWeex.we命令，就能在瀏覽器中瀏覽執行效果。在chrome中點選command + option + j，進入檢查模式，重新重新整理頁面，就能看到在手機中大概顯示的樣式。效果如下：

圖片描述

如果你想在手機中瀏覽效果的話，你需要先去appStore中下載weex playground這款app，這是Weex團隊專門開發演示官方Demo和除錯用的。
下載完成之後，返回剛才的命令列，ctrl+C，關閉上次的weex服務。
執行 weex HelloWeex.we --qr，會出生成一個二維碼。用你剛才下載的weex playground工具開啟左上角的掃描工具，掃描命令列中出現的二維碼，即可顯示執行效果。效果如下：

圖片描述

三、Weex程式碼除錯方式

對於一個開發者來說，除錯功能是必須要掌握的。
我們將程式碼中新增一些js事件，方便我們除錯使用。如下所示：

<template>
    <div class="container">
        <image src="http://9.pic.paopaoche.net/up/2016-7/201671315341.png" class="pic" onclick="picClick"></image>
        <text class="text">{{title}}</text>
    </div>
</template>

<style>

    .container{
        align-items: center;
    }
    .pic{
        width: 200px;
        height: 200px;
    }
    .text{
        font-size: 40px;
        color: black;
    }

</style>

<script>
    module.exports = {
        data:{
            title:'Hello World',
            toggle:false,
        },
        ready:function(){
            console.log('this.title == '+this.title);
            this.title = 'hello Weex';
            console.log('this.title == '+this.title);
        },
        methods:{
            picClick: function () {
                this.toggle = !this.toggle;
                if(this.toggle){
                    this.title = '圖片被點選';
                }else{
                    this.title = 'Hello Weex';
                }

            }
        }
    }
</script>複製程式碼

進入你的工程目錄，執行weex debug HelloWeex.we , 瀏覽器將彈出如下介面：

圖片描述

接下來我們使用weex playground二維碼掃描左邊的二維碼開啟debug模式。
掃描成功，將會展示如下介面：

圖片描述

點選上圖中的Debugger按鈕，進入debug頁面，在chrome中點選command + option + j，進入檢查模式。然後回到上一個介面，掃描右側二維碼，再次進入第二個介面如下圖所示：

圖片描述

這樣你就可以愉快的打斷點進行除錯了。

四、總結

本文幫助開發者搭建了Weex的開發環境和除錯環境，對於Weex有了基本的認知，也能自己寫程式碼體驗Weex的神奇功能了。對於Weex程式碼的語法規則，如果你不是很清楚的話，建議你提前學習一下Html、Css、JS和Vue的基本語法。

下一篇文章我們將用一個ToDoList的例項，深入Weex的學習之路。

五、聯絡方式

推薦一個iOS高階交流群：624212887，群檔案自行下載，不管你是小白還是大牛熱烈歡迎進群 ，分享面試經驗，討論技術， 大家一起交流學習成長！希望幫助開發者少走彎路。——點選：加入

如果覺得對你還有些用，就關注小編+喜歡這一篇文章。你的支援是我繼續的動力。

下篇文章預告：Weex開發之路（二）：完成一個ToDoList專案

文章來源於網路，如有侵權，請聯絡小編刪除。


相關文章