體驗 weex —— 寫一個表情包應用

前些時間體驗 ReactNative 的時候寫了一個 2333 表情包 app，這次使用 weex 寫一下。 weex 通過自己的一套 sdk 可以將一個 js 文件渲染成一個 native （android 或 iOS ）的 view 對象。 weex 語法參照 vue ，看過一點 vue 的文檔所以寫起來可以很快上手。有一點感受 weex 的文檔感覺沒有 RN 的清晰，還有尺寸單位還沒搞清楚，瀏覽器預覽的和生成的 android 版還是有差距，和 iOS 也尺寸不太對。

安裝 weex

npm install -g weex-toolkit

創建 index.we 文件

和 vue 類似 template 中放布局， style 放css， script 操作數據。

<template>
 <div class="main">
 <list class="main-list">
 <cell class="{{ isSelected ? 'row-select' :'row' }}" repeat="{{rows}}" index="{{$index}}" onclick="changeTid" tid={{tid}}>
 <div class="item">
 <text class="item-title">{{ title }}</text>
 </div>
 </cell>
 </list>
 <list class="main-detail">
 <cell class="image-row" repeat="{{ imageList }}" >
 <div class="image-item">
 <div repeat="{{data}}">
 <image style="width:198;height:198;" src="{{ link }}"></image>
 </div>
 </div>
 </cell>
 </list>
 </div>
</template>

<style>
.main{
 flex-direction: row;
 background-color: #eceff1;
 color: #333333;
}
.main-list{
 flex: 1;
 align-items: stretch;
}
.main-detail{
 flex: 4;
}
.row {
 background-color: white;
}
.row-select {
 background-color: #e1e1e1;
}
.item {
 justify-content: center;
 border-bottom-width: 2;
 border-right-width: 2;
 border-bottom-color: #eceff1;
 border-right-color: #eceff1;
 height: 68;
 padding-left: 10;
 padding-right: 10;
}
.image-item{
 justify-content: space-between;
 flex-direction: row;
 height: 202;
}
.item-title {
 font-size: 24;
 text-overflow: ellipsis;
}

</style>

<script>

// 使用的組件
require('weex-components');
module.exports = {
 data: {
 rows: [],
 imageList: [],
 currentTid: 128
 },

 created: function () {
 this.getCategory()
 this.getImage(this.currentTid)
 },

 methods: {
 getCategory: function(tid) {
 var that = this
 var stream = require('@weex-module/stream');
 // 直接使用 fetch 以及 => 在預覽中沒問題，生成的 js 文件在 Android 版本渲染不出來，好像是不能直接支持 ES6 語法
 stream.fetch({
 method: 'GET',
 url: 'https://api.leancloud.cn/1.1/classes/Category',
 headers: {
 'X-LC-Id': 'ffTooBOPa3NxxjEo91dVYEel-gzGzoHsz',
 'X-LC-Key': 'aysIBDNEvw1n063qpf7Jx9jb',
 'Content-Type': 'application/json'
 },
 }, function(ret) {
 if(!ret.ok){
 console.log( "request failed")
 }else{
 var json = JSON.parse(ret.data)
 var list = json.results
 for(var i=0;i < list.length; i++){
 var item = list[i]
 item.isSelected = false
 that.rows.push(item)
 }
 }
 },function(response){
 console.log(response);
 });
 },

 getImage: function(tid) {
 var that = this
 var stream = require('@weex-module/stream');
 stream.fetch({
 method: 'GET',
 url: 'https://api.leancloud.cn/1.1/classes/Image?where={"tid":'+tid+'}}?=-update_time',
 headers: {
 'X-LC-Id': 'ffTooBOPa3NxxjEo91dVYEel-gzGzoHsz',
 'X-LC-Key': 'aysIBDNEvw1n063qpf7Jx9jb',
 'Content-Type': 'application/json'
 },
 }, function(ret) {
 if(!ret.ok){
 console.log( "request failed")
 }else{
 var json = JSON.parse(ret.data)
 var list = json.results
 that.imageList.length = 0
 for(var i = 0; i < list.length; i++){
 var imageRow;
 if (i % 3 == 0) {
 imageRow = [];
 that.imageList.push({'data':imageRow});
 }
 imageRow[i%3] = list[i];
 }
 console.log(that.imageList);
 }
 },function(response){
 console.log(response);
 });
 },

 changeTid: function (e) {
 console.log(e);
 this.currentTid = e.target.attr.tid
 this.getImage(this.currentTid)
 for (var i = 0; i < this.rows.length; i++) {
 var row = this.rows[i]
 row.isSelected = row.tid == this.currentTid
 }
 }
 }
}
</script>

運行起來

瀏覽器中預覽

weex index.we

生成 js 文件

weex index -o build.js

跑在 Android 項目中

新建 Android 項目， 在項目中添加 weex sdk 的依賴庫。

app/build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:24.0.0'
    compile 'com.android.support:recyclerview-v7:24.0.0'
    compile 'com.github.bumptech.glide:glide:3.7.0' 
    compile 'com.alibaba:fastjson:1.1.46.android'
    compile 'com.taobao.android:weex_sdk:0.7.0' // weex sdk
    compile 'com.taobao.android:weex_inspector:0.0.2.7' // weex 調試 sdk ，這個必須得加
}

創建自己的 Application 類，然后 onCreated 中初始化 weex

/**
 * Created by hanks on 16/9/5.
 */
public class MyApp extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        WXEnvironment.addCustomOptions("appName", "TBSample");
        InitConfig config = new InitConfig.Builder()
                .setImgAdapter(new ImageAdapter())
                .build();
        WXSDKEngine.initialize(this, config);
    }
}

初始化完成之后就是加載 js 了，將上一步生成的 js 復制到 assets 目錄

public class MainActivity extends AppCompatActivity {

    private FrameLayout mContainer;
    private WXSDKInstance mWeexInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mContainer = (FrameLayout) findViewById(R.id.container);
        // sdk 實例
        mWeexInstance = new WXSDKInstance(this);
        mWeexInstance.registerRenderListener(new IWXRenderListener() {

            // sdk 將 js 文件渲染成 view 對象回調
            @Override
            public void onViewCreated(WXSDKInstance wxsdkInstance, View view) {
                if (mContainer != null) {
                    mContainer.addView(view); // 添加到界面
                }
            }

            @Override
            public void onRenderSuccess(WXSDKInstance wxsdkInstance, int i, int i1) {

            }

            @Override
            public void onRefreshSuccess(WXSDKInstance wxsdkInstance, int i, int i1) {

            }

            @Override
            public void onException(WXSDKInstance wxsdkInstance, String s, String s1) {

            }
        });
        // 加載 js 文件
        mWeexInstance.render("Weex2333",
                WXFileUtils.loadAsset("build.js", this),
                null, null, -1, -1,
                WXRenderStrategy.APPEND_ASYNC);
    }
}

然后運行 Android 項目。

來自：http://hanks.xyz/2016/09/05/weex-2333/