体验 weex —— 写一个表情包应用

前些时间体验 ReactNative 的时候写了一个 2333 表情包 app，这次使用 weex 写一下。 weex 通过自己的一套 sdk 可以将一个 js 文件渲染成一个 native （android 或 iOS ）的 view 对象。 weex 语法参照 vue ，看过一点 vue 的文档所以写起来可以很快上手。有一点感受 weex 的文档感觉没有 RN 的清晰，还有尺寸单位还没搞清楚，浏览器预览的和生成的 android 版还是有差距，和 iOS 也尺寸不太对。

weex

brower

android

安装 weex

1
npm install -g weex-toolkit

创建 index.we 文件

和 vue 类似 template 中放布局，style 放css，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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<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+'}}&order=-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>

运行起来

浏览器中预览

1
weex index.we

生成 js 文件

1
weex index -o build.js

跑在 Android 项目中

新建 Android 项目， 在项目中添加 weex sdk 的依赖库。
app/build.gradle

1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * 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 目录

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
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 项目。

iOS 工程暂时没有跑起来 >.<

文章来自： https://hanks.pub