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

一、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磨平了上層呼叫的差異。

二、Weex開發環境搭建

第一步：安裝Node環境

1.1：安裝Homebrew

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

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

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

1

/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
3

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

1

brew install node
檢查是否安裝成功

yixiangdeMacBook-Pro:Desktop yixiang$ node -v v4.6.1 yixiangdeMacBook-Pro:Desktop yixiang$ npm -v 3.10.9

1
2
3
4

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

1	npm install -g weex-toolkit

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

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

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

Hello Weex

<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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<text class="text">{{title}}</text>

</div>

</template>

<style>

.container{

align-items: center;

}

.pic{

width: 200px;

height: 200px;

}

.text{

font-size: 40px;

color: black;

}

</style>

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的學習之路。

五、參考資料

Weex Github倉庫
 weex-devtool倉庫
 Weex除錯神器——Weex Devtools使用手冊
 Weex 英文文件(比較全)
Weex 中文文件(非官方提供，不全)

六、聯絡方式

新浪微博
 github
簡書首頁