Weex的主要用途是用于app的開發(fā)烁挟，所以首先就來嘗試一下怎么集成到android中去破衔，這里需要讀者熟悉基本的安卓開發(fā)辟躏，IDE使用Android Studio若债。
集成的方式有兩種，一種是基于gradle依賴序目，另一種是直接源碼依賴犀斋，具體的集成步驟就不再提了奏篙，參考這里润努，主要針對這過程中可能遇到的問題進行補缺補漏关斜。
解決編譯慢的問題
由于gradle默認使用的jcenter的源，在國內(nèi)訪問實在是慢铺浇，因此需要先加入國內(nèi)的maven鏡像源痢畜，編輯build.gradle文件：
repositories {
jcenter()
}
改成（注意有兩個地方）
repositories {
maven{
url "http://maven.aliyun.com/nexus/content/groups/public/"
}
jcenter()
}
完整的：
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
maven{
url "http://maven.aliyun.com/nexus/content/groups/public/"
}
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:2.2.3'
}
}
allprojects {
repositories {
maven{
url "http://maven.aliyun.com/nexus/content/groups/public/"
}
jcenter()
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
這樣就可以享受飛一般的感覺了。
庫依賴的問題
Weex可以源碼依賴也可以aar包依賴，這里需要注意的是weex_sdk的版本丁稀，最新的是0.10.0
compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:support-v4:23.1.1'
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.alibaba:fastjson:1.1.46.android'
//compile 'com.taobao.android:weex_sdk:0.10.0@aar' 使用gradle依賴
compile 'com.squareup.picasso:picasso:2.5.2'
//使用本地依賴吼拥，可將weex源碼里android目錄下的sdk目錄直接以模塊的方式添加到項目里，不用拷貝到當前目錄下线衫，方便更新維護
compile project(':weex_sdk')
默認生成的例子圖片無法顯示的問題
如果使用填坑筆記1里面默認的方式生成一個項目凿可，會自動生成默認的頁面：src/foo.vue
里面的logoUrl是
https://alibaba.github.io/weex/img/weex_logo_blue@3x.png
在瀏覽器里面沒有問題，但是在android端會顯示不出來
<!--src/foo.vue文件-->
<template>
<div class="wrapper" @click="update">
<image :src="logoUrl" class="logo"></image>
<text class="title">Hello {{target}}</text>
</div>
</template>
<style>
.wrapper { align-items: center; margin-top: 120px; }
.title { font-size: 48px; }
.logo { width: 360px; height: 82px; }
</style>
<script>
export default {
data: {
logoUrl: 'https://weex-project.io/images/ios.png',
target: 'World'
},
methods: {
update: function (e) {
this.target = 'Weex!'
console.log('target:', this.target)
}
}
}
</script>
使用的ImageAdapter:
public class ImageAdapter implements IWXImgLoaderAdapter {
public ImageAdapter() {
}
@Override
public void setImage(final String url, final ImageView view, WXImageQuality quality, final 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("http://")) {
temp = "http:" + url;
}
if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
return;
}
if(!TextUtils.isEmpty(strategy.placeHolder)){
Picasso.Builder builder=new Picasso.Builder(WXEnvironment.getApplication());
Picasso picasso=builder.build();
picasso.load(Uri.parse(strategy.placeHolder)).into(view);
view.setTag(strategy.placeHolder.hashCode(),picasso);
}
Picasso.with(WXEnvironment.getApplication())
.load(temp)
//.transform(new BlurTransformation(strategy.blurRadius))
.into(view, new Callback() {
@Override
public void onSuccess() {
if(strategy.getImageListener()!=null){
strategy.getImageListener().onImageFinish(url,view,true,null);
}
if(!TextUtils.isEmpty(strategy.placeHolder)){
((Picasso) view.getTag(strategy.placeHolder.hashCode())).cancelRequest(view);
}
}
@Override
public void onError() {
if(strategy.getImageListener()!=null){
strategy.getImageListener().onImageFinish(url,view,false,null);
}
}
});
}
},0);
}
}
會發(fā)現(xiàn)圖片獲取使用的是Picasso庫桶雀，Picasso在處理的時候出現(xiàn)了錯誤矿酵，這個問題卡殼了很久唬复，其實解決的辦法很簡單矗积，就是換一張圖片，比如這張圖片：）
https://puui.qpic.cn/qqvideo_ori/0/u00227vq2f4_228_128/0
參考資料：
https://weex-project.io/cn/guide/integrate-to-your-app.html
https://github.com/xkli/WXSample
