体验 weex —— 写一个表情包应用
<p>前些时间体验 ReactNative 的时候写了一个 2333 表情包 app,这次使用 weex 写一下。 weex 通过自己的一套 sdk 可以将一个 js 文件渲染成一个 native (android 或 iOS )的 view 对象。 weex 语法参照 vue ,看过一点 vue 的文档所以写起来可以很快上手。有一点感受 weex 的文档感觉没有 RN 的清晰,还有尺寸单位还没搞清楚,浏览器预览的和生成的 android 版还是有差距,和 iOS 也尺寸不太对。</p> <p><img src="https://simg.open-open.com/show/dd9d44d896d894b42ac7ff2b54884b9b.jpg"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ee868dc6b7bad346f49808b1cbfa0864.gif"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/28876e31e42f70064f28fbd778f524e8.gif"></p> <h2><strong>安装 weex</strong></h2> <pre> <code class="language-javascript">npm install -g weex-toolkit </code></pre> <h2><strong>创建 index.we 文件</strong></h2> <p>和 vue 类似 template 中放布局, style 放css, script 操作数据。</p> <pre> <code class="language-javascript"><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> </code></pre> <h2><strong>运行起来</strong></h2> <p>浏览器中预览</p> <pre> <code class="language-javascript">weex index.we </code></pre> <p>生成 js 文件</p> <pre> <code class="language-javascript">weex index -o build.js </code></pre> <h2><strong>跑在 Android 项目中</strong></h2> <p>新建 Android 项目, 在项目中添加 weex sdk 的依赖库。</p> <p>app/build.gradle</p> <pre> <code class="language-javascript">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 ,这个必须得加 } </code></pre> <p>创建自己的 Application 类,然后 onCreated 中初始化 weex</p> <pre> <code class="language-javascript">/** * 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); } } </code></pre> <p>初始化完成之后就是加载 js 了,将上一步生成的 js 复制到 assets 目录</p> <pre> <code class="language-javascript">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); } } </code></pre> <p>然后运行 Android 项目。</p> <p> </p> <p> </p> <p>来自:http://hanks.xyz/2016/09/05/weex-2333/</p> <p> </p>
本文由用户 culj5457 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!