Weex初體驗--創建一個簡單的Weex程序

佚冰 7年前發布 | 279K 次閱讀 Weex 安卓開發移動開發

最近阿里開源的Weex很火爆。

參考官網的資料學習了一下，寫了一個小Demo。

分享出來和大家交流交流。

環境準備

按照官網的教程，完成以下步驟：

安裝Node.js
安裝weex-toolkit

這兩步完成以后，就可以進行代碼的編寫了。

小Demo

程序界面

實現一個很簡單功能：在文本框中輸入文字，點擊按鈕，文字會出現在下面列表中。

1、創建項目

這里的Demo是將Weex集成到現有的項目中，

所以首先需要創建一個Android項目。

官網要求：

已經安裝了JDK version>=1.7 并配置了環境變量
已經安裝Android SDK 并配置環境變量。
Android SDK version 23 (compileSdkVersion in build.gradle)
SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
Android Support Repository >= 17 (for Android Support Library)

在滿足這些要求的情況下，創建一個Android Studio項目。

2、編寫Android代碼

（一）添加依賴

glide用于圖片加載。

其他的庫都是官網要求的依賴。

compile 'com.android.support:recyclerview-v7:24.2.1'
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.alibaba:fastjson:1.1.45'
    compile 'com.taobao.android:weex_sdk:0.9.5@aar'
    compile 'com.github.bumptech.glide:glide:3.7.0'

（二）實現ImageAdapter

Weex要求本地實現圖片的加載代碼。

我這里使用Glide實現圖片加載。

public class ImageAdapter implements IWXImgLoaderAdapter {
    @Override
    public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
        //實現你自己的圖片下載，否則圖片無法顯示。
        Glide.with(view.getContext())
                .load(url)
                .into(view); 
    }
}

（三）創建Application類

注意這個類一定要在Manifest中配置。

public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
        WXSDKEngine.initialize(this,config);
    }
}

（四）編寫MainActivity

這里做了幾件事：

實例化 WXSDKInstance 。
在Activity生命周期中回調 mWXSDKInstance 的對應方法。
實現 IWXRenderListener 接口。
調用 mWXSDKInstance.render 方法實例化組件
在 IWXRenderListener.onViewCreated() 方法中設置 view 。

IWXRenderListener.onViewCreated()會在Weex將JS實例化成View后回調。 IWXRenderListener 中同時還有：

onRenderSuccess();

onRefreshSuccess();

onException();

三個回調方法。

public class MainActivity extends AppCompatActivity implements IWXRenderListener {
    WXSDKInstance mWXSDKInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("home.js",this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
    }
    @Override
    public void onViewCreated(WXSDKInstance instance, View view) {
        setContentView(view);
    }
    @Override
    public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
    }
    @Override
    public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
    }
    @Override
    public void onException(WXSDKInstance instance, String errCode, String msg) {
    }
    @Override
    protected void onResume() {
        super.onResume();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityResume();
        }
    }
    @Override
    protected void onPause() {
        super.onPause();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityPause();
        }
    }
    @Override
    protected void onStop() {
        super.onStop();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityStop();
        }
    }
    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityDestroy();
        }
    }
}

到這里基本上Android端的代碼就完成了。

剩下的任務就是編寫Weex代碼了。

3、編寫Weex代碼

（一）創建一個組件

在這里我先創建了一個Weex組件，用于顯示文字，并且支持變色。

組件樣子

文件名： name.we

<template>
    <div>
        <text repeat="item in items" class="text {{item.sex}}">{{item.name}}</text>
    </div>
</template>
<style>
    .text{ width:750; padding-top: 10px; padding-bottom: 10px;justify-content: center;text-align: center; color:#ffffff}
    .male { background-color: #9999ff; }
    .female { background-color: #ff9999; }
</style>
<script>
    module.exports = {
        data: {
            items:[]
        },
        methods:{
        }
    }
</script>

（二）創建主界面

注意： home.we 和 name.we 要放在同一個目錄

文件名：home.we

<template xmlns="http://www.w3.org/1999/html">
    <div>
        <div style="width: 750; height: 200;">
            <image class="img" src={{imageUrl}}></image>
        </div>
        <input ref="input" class="input" type="text"  value={{input}} oninput="oninput" />
        <a class="button">
              <text class="text" onclick="add">添加</text>
        </a>
        <name items = {{items}}></name>
    </div>

</template>

<script>
    module.exports = {
        data: {
            imageUrl: 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png',
            input:'',
            sex:'male',
            items:[]
        },
        methods: {
            oninput (event) {
                console.log('ominput:', event.value)
                this.input = event.value;
            },
            add(){
                if(this.input === '')
                    return;
                this.items.unshift({name:this.input,sex:this.sex})
                this.input = "";
                if(this.sex === 'female'){
                    this.sex = 'male';
                }else{
                    this.sex = 'female';
                }
            }
        }
    }
</script>

<style>
  .img { width: 200; height: 200; margin-left: 275}
  .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;
    }
  .button {
      width: 450px;
      margin-top: 30px;
      margin-bottom: 30px;
      margin-left: 150px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-width: 2px;
      border-style: solid;
      border-color: #DDDDDD;
      background-color: #F5F5F5
    }
    .text {
      font-size: 30px;
      color: #666666;
      text-align: center;
    }
</style>

（三）調試 we文件

這個時候需要用到之前安裝的 weex-toolkit 工具。

直接執行命令：

weex home.we

這時候會打開默認瀏覽器，

我們就會看到我們所的界面。

這里支持熱更新，只要你在源文件中做了更改并保存，這個界面就會跟著刷新成最新狀態。特別方便。

預覽界面

（四）轉換編寫的 we文件

調試沒有問題后，就需要使用Weex命令轉換成JS文件了。

使用命令：

weex home.we --output home.js

這個時候就會在當前目錄下找見 home.js 了。

這個 home.js 就是我們要在 Android項目中加載的文件了。

（五）導入JS并運行程序

拷入轉換后的JS文件（我這里是直接在assets目錄編寫的we，所以會有三個文件）

目錄結構

在代碼中加載 js 文件

// WXFileUtils.loadAsset("home.js",this) 這個方法會加載assets下的js
 mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("home.js",this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);

點擊運行：

運行界面

來自：http://www.jianshu.com/p/d9487554de3c

本文由用戶佚冰自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1484708363305.html

Weex 安卓開發移動開發

Weex初體驗--創建一個簡單的Weex程序

環境準備

小Demo

1、創建項目

2、編寫Android代碼

3、編寫Weex代碼

相關經驗

相關資訊

相關文檔

目錄