Weex初体验--创建一个简单的Weex程序
佚冰
7年前
<p>最近阿里开源的Weex很火爆。</p> <p>参考官网的资料学习了一下，写了一个小Demo。</p> <p>分享出来和大家交流交流。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/073adbcab43c3061e63ad938f36d45f3.png"></p> <h2>环境准备</h2> <p>按照官网的教程，完成以下步骤：</p> <ol> <li>安装Node.js</li> <li>安装weex-toolkit</li> </ol> <p>这两步完成以后，就可以进行代码的编写了。</p> <h2>小Demo</h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/fbf6d2299e5c97b24a68ce30461bc01c.png"></p> <p style="text-align:center">程序界面</p> <p>实现一个很简单功能：在文本框中输入文字，点击按钮，文字会出现在下面列表中。</p> <h2>1、创建项目</h2> <p>这里的Demo是将Weex集成到现有的项目中，</p> <p>所以首先需要创建一个Android项目。</p> <p>官网要求：</p> <ol> <li>已经安装了JDK version>=1.7 并配置了环境变量</li> <li>已经安装Android SDK 并配置环境变量。</li> <li>Android SDK version 23 (compileSdkVersion in build.gradle)</li> <li>SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)</li> <li>Android Support Repository >= 17 (for Android Support Library)</li> </ol> <p>在满足这些要求的情况下，创建一个Android Studio项目。</p> <h2>2、编写Android代码</h2> <p>（一）添加依赖</p> <p>glide用于图片加载。</p> <p>其他的库都是官网要求的依赖。</p> <pre> <code class="language-java">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'</code></pre> <p>（二）实现ImageAdapter</p> <p>Weex要求本地实现图片的加载代码。</p> <p>我这里使用Glide实现图片加载。</p> <pre> <code class="language-java">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); } }</code></pre> <p>（三）创建Application类</p> <p>注意这个类一定要在Manifest中配置。</p> <pre> <code class="language-java">public class App extends Application { @Override public void onCreate() { super.onCreate(); InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build(); WXSDKEngine.initialize(this,config); } }</code></pre> <p>（四）编写MainActivity</p> <p>这里做了几件事：</p> <ol> <li>实例化 <strong>WXSDKInstance</strong> 。</li> <li>在Activity生命周期中回调 <strong>mWXSDKInstance</strong> 的对应方法。</li> <li>实现 <strong>IWXRenderListener</strong> 接口 。</li> <li>调用 <strong>mWXSDKInstance.render</strong> 方法实例化组件</li> <li>在 <strong>IWXRenderListener.onViewCreated()</strong> 方法中设置 view 。</li> </ol> <p>IWXRenderListener.onViewCreated()会在Weex将JS实例化成View后回调。 <strong>IWXRenderListener</strong> 中同时还有：</p> <p>onRenderSuccess();</p> <p>onRefreshSuccess();</p> <p>onException();</p> <p>三个回调方法。</p> <pre> <code class="language-java">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(); } } }</code></pre> <p>到这里基本上Android端的代码就完成了。</p> <p>剩下的任务就是编写Weex代码了。</p> <h2>3、编写Weex代码</h2> <p>（一）创建一个组件</p> <p>在这里我先创建了一个Weex组件，用于显示文字，并且支持变色。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/add56662a6fb36b347fffe9fcbe31424.png"></p> <p style="text-align:center">组件样子</p> <p>文件名： <strong>name.we</strong></p> <pre> <code class="language-java"><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></code></pre> <p>（二）创建主界面</p> <p>注意： <strong>home.we</strong> 和 <strong>name.we</strong> 要放在同一个目录</p> <p>文件名：home.we</p> <pre> <code class="language-java"><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></code></pre> <p>（三）调试 we文件</p> <p>这个时候需要用到之前安装的 <strong>weex-toolkit</strong> 工具。</p> <p>直接执行命令：</p> <pre> <code class="language-java">weex home.we</code></pre> <p>这时候会打开默认浏览器，</p> <p>我们就会看到我们所的界面。</p> <p>这里支持热更新，只要你在源文件中做了更改并保存，这个界面就会跟着刷新成最新状态。特别方便。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d5ffa81273b63920e0b77de0f3cb19a7.png"></p> <p style="text-align:center">预览界面</p> <p>（四）转换编写的 we文件</p> <p>调试没有问题后，就需要使用Weex命令转换成JS文件了。</p> <p>使用命令：</p> <pre> <code class="language-java">weex home.we --output home.js</code></pre> <p>这个时候就会在当前目录下找见 <strong>home.js</strong> 了。</p> <p>这个 <strong>home.js</strong> 就是我们要在 Android项目中加载的文件了。</p> <p>（五）导入JS并运行程序</p> <p>拷入转换后的JS文件（我这里是直接在assets目录编写的we，所以会有三个文件）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/80deaba68f316997ae0d60eb5a3d7a8f.png"></p> <p style="text-align:center">目录结构</p> <p>在代码中加载 js 文件</p> <pre> <code class="language-java">// WXFileUtils.loadAsset("home.js",this) 这个方法会加载assets下的js mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("home.js",this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);</code></pre> <p>点击运行：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/1843aec4e1d297751ac0ab091fcde765.png"></p> <p style="text-align:center">运行界面</p> <p> </p> <p>来自：http://www.jianshu.com/p/d9487554de3c</p> <p> </p>