初使用阿里 weex框架 了解心得

Weex是针对动态编程和发布项目的一个可扩展、跨平台的解决方案。

动态编程＋发布。Weex能做到随时编程发布到服务端，应用端即时更新。我现在做的项目就是后台CMS编辑页面，移动端实时更新的。但是有个问题就是，这个页面的模板已经是固定了。如果想要添加新的item就必须再写一个模板。跨平台。这是移动端无数人向往的和为之努力的事。一处编写，到处运行。Weex支持Android，iOS，Web三大平台，一份代码，三个平台通用。 官方文档不算多，全部过了一遍就迫不及待的创建一个新项目试试效果。但是由于这个js需要使用node工具进行编写。我并没有去下载这个工具进行编写，而是直接拿到weex 自带的demo里面的helloworld的js文件直接拿来用。

实践过程中还是遇到一些问题。demo里面的是0.5.1的version，文档里居然现在还是0.4.1的版本。技术文档更新的有点太慢了吧.

所以我根据demo的playground中的代码对比调试，才成功的运行了helloworld项目

HelloWorld实践

新建Android Project。module 命名为app 即可。MainActivity选择EmptyActivity就好。这点相信大家都会。

配置build.gradle。在app的build.gradle中添加Weex依赖。如下：

compile 'com.taobao.android:weex_sdk:0.5.1' compile 'com.squareup.picasso:picasso:2.5.2' compile 'com.alibaba:fastjson:1.1.46.android'

后面两个依赖一个用于图片加载，一个用于解析Json，不加上会出现 ClassNotFoundException 。

可以在 Jcenter 地址查找最新版本。截至本文章发布日，当前最新版本为0.5.1。

在Manifest.xml中添加网络权限。

<uses-permission android:name="android.permission.INTERNET" />

在代码中启动Weex RunTime，用于渲染UI。

public class WXApplication extends Application { @Override public void onCreate() { super.onCreate(); WXEnvironment.addCustomOptions("appName","TBSample"); WXSDKEngine.initialize(this,new InitConfig.Builder() .setImgAdapter(new ImageAdapter()) .build() } }

其中ImageAdapter是一个自定义的类，用于加载图片。如何没有配置这个ImageAdapter，熟悉的 ClassNotFoundException 将再次出现。:joy:

public class ImageAdapter implements IWXImgLoaderAdapter { public ImageAdapter() { } @Override public void setImage(final String url, final ImageView view, WXImageQuality quality, WXImageStrategy strategy) { WXSDKManager.getInstance().postOnUiThread(new Runnable() { @Override public void run() { if(view==null||view.getLayoutParams()==null){ return; } if (TextUtils.isEmpty(url)) { view.setImageBitmap(null); return; } String temp = url; if (url.startsWith("//")) { temp = "http:" + url; } if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) { return; } Picasso.with(WXEnvironment.getApplication()) .load(temp) .into(view); } },0); } }

在MainActvity中渲染UI。

public class MainActivity extends AppCompatActivity { RelativeLayout viewGroup; private static final String DEFAULT_IP = "your_current_IP"; private static String CURRENT_IP= DEFAULT_IP; // your_current_IP private static final String WEEX_INDEX_URL = "http://"+CURRENT_IP+":12580/examples/build/index.js"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewGroup = (RelativeLayout)findViewById(R.id.viewGroup); WXSDKInstance mInstance = new WXSDKInstance(this); mInstance.registerRenderListener(new IWXRenderListener() { @Override public void onViewCreated(WXSDKInstance instance, View view) { viewGroup.addView(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) { } }); renderPage(mInstance,getPackageName(), WXFileUtils.loadFileContent("hello.js",this),WEEX_INDEX_URL,null); } protected void renderPage(WXSDKInstance mInstance,String packageName,String template,String source,String jsonInitData){ Map<String, Object> options = new HashMap<>(); options.put(WXSDKInstance.BUNDLE_URL, source); mInstance.render( packageName, template, options, jsonInitData, WXViewUtils.getScreenWidth(this), WXViewUtils.getScreenHeight(this), WXRenderStrategy.APPEND_ASYNC); } }

布局文件为：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/viewGroup" > </RelativeLayout> 在app的main／assets目录下放入新建hello.js,复制一下内容。该文件内容是从playground复制而来。本文只是为了展示集成demo，故直接复制。如果想自己写，那么根据文档写好.we,然后再利用week－toolkit将.we转换为.js即可。 /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ exports: {}, /******/ id: moduleId, /******/ loaded: false /******/ }; /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ // Flag the module as loaded /******/ module.loaded = true; /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ // Load entry module and return exports /******/ return __webpack_require__(0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ function(module, exports) { ;__weex_define__("@weex-component/0f3c9ae76450de3e67cfabcbf5621bf7", [], function(__weex_require__, __weex_exports__, __weex_module__){ ;__weex_module__.exports.template = __weex_module__.exports.template || {} ;Object.assign(__weex_module__.exports.template, { "type": "div", "children": [ { "type": "text", "style": { "fontSize": 100 }, "attr": { "value": "Hello World." } } ] }) }) ;__weex_bootstrap__("@weex-component/0f3c9ae76450de3e67cfabcbf5621bf7", { "transformerVersion": "0.3.1" },undefined) /***/ } /******/ ]);

至此，整个项目即成完毕。点击Android Studio Run 运行项目，Weex版HelloWorld出现了

总结：相比React Native，Weex入门还算简单，值得一试。

转载：http://www.tuicool.com/articles/bY7Jba6