What
簡(jiǎn)而言之，Weex就是一套完全針對(duì)無線電商的技術(shù)方案魔熏。采用HyBird的方式衷咽，腦洞來自于RN，相比于傳統(tǒng)的Native+WebView的方式蒜绽，性能有了很大的提升镶骗。
關(guān)于weex的起源，優(yōu)點(diǎn)這里就不一一介紹了躲雅，可以移步對(duì)無線電商動(dòng)態(tài)化方案的思考 這個(gè)系列的文章鼎姊。
How
下面來說說Weex在Android中的集成。
環(huán)境準(zhǔn)備
-
Android開發(fā)環(huán)境
JDK相赁、SDK相寇、Android Studio 這些都是必須的，如何安裝配置不是本文的重點(diǎn)钮科，這里暫時(shí)不表唤衫。但是值得注意的是:- JDK的版本必須>=1.7;
- Android SDK version 23 (就是在build.gradle中的compileSdkVersion 的版本)(可高不可低)
- SDK build tool version 23.0.1 (build.gradle中buildToolsVersion的版本號(hào))
- Android Support Repository >= 17
-
Weex環(huán)境配置
Weex的環(huán)境，根據(jù)操作系統(tǒng)的不同绵脯，步驟稍有差別佳励，這里僅用 Windows 的系統(tǒng)來講休里。
不論什么平臺(tái)，首先都是要安裝node.js的赃承，安裝node.js 比較簡(jiǎn)單妙黍，直接去官網(wǎng) 下載就好了，可以通過查看版本的方式來檢查是否安裝成功瞧剖。
$ node -v
v6.9.2-nightly201610208bb346d61a
$npm -v
3.10.8
node.js安裝成功后废境，npm包管理工具也一起安裝好了。然后就可以使用npm來安裝weex-toolkit筒繁。
$npm install -g weex-toolkit
如果安裝失敗也可以考慮使用淘寶的npm鏡像
$npm install -g cnpm
$cnpm install -g weex-toolkit
之后就可以使用weex命令驗(yàn)證是否安裝成功噩凹，還是通過查看版本的方式：
$weex --version
info 0.6.4
weex的環(huán)境配置到這里就結(jié)束了。這里的環(huán)境主要是用來編譯和運(yùn)行的毡咏，跟開發(fā)其實(shí)并沒有太大的聯(lián)系驮宴。
Weex開發(fā)
weex-toolkit安裝成功之后，其實(shí)可以通過weex的命令來生成weex的本地工程呕缭，這個(gè)后面再講堵泽。先從最簡(jiǎn)單的開始。
-
創(chuàng)建文件
新建一個(gè).we的文件(這個(gè)就是weex程序的文件后綴名)恢总。按照小白入門慣例取名為：hello_world.we
接下來就是填寫代碼了迎罗。（weex主要涉及的都是前端的代碼，因此開發(fā)工具可以選擇如sublime等）
<template>
<div>
<text>hello world</text>
</div>
</template>
<style>
</style>
<script>
</script>
這樣就完成了一個(gè)最簡(jiǎn)單的hello world的頁(yè)面片仿。
這里有幾點(diǎn) 需要注意的地方：
-
.we文件的結(jié)構(gòu) :<template><style><script>分別對(duì)應(yīng)Web中的Html纹安，CSS, JavaScript；其中<template>標(biāo)簽不能省略砂豌。 -
<template>中必須要有且只有一個(gè)根節(jié)點(diǎn) -
.we文件中不能在<div>的標(biāo)簽下直接添加字符厢岂，任何內(nèi)容都應(yīng)該是組件
-
運(yùn)行查看
需要查看頁(yè)面效果，在命令行里使用命令：
$weex hello_world.we
這樣就可以打開瀏覽器阳距，里面顯示的就是hello world的內(nèi)容塔粒。
Ps：上面的命令默認(rèn)啟用的是8080端口，如果8080端口被占用的話筐摘，可以通過--port的參數(shù)指定端口
$weex hello_world.we --port 3001
如果想要在手機(jī)上查看頁(yè)面效果的話卒茬，那么手機(jī)上就得下載安裝Playground ;然后在命令行執(zhí)行命令：
$weex hello_world.we --port 3001 --qr
這個(gè)時(shí)候命令行里就會(huì)顯示一個(gè)二維碼，使用Playground來掃描這個(gè)二維碼咖熟，即可在手機(jī)上查看頁(yè)面圃酵。
-
調(diào)試
weex-toolkit已經(jīng)集成了Debugger，執(zhí)行下面命令就可以打開debug模式：
$weex debug hello_world.we --port 3001
這個(gè)時(shí)候?yàn)g覽器上就會(huì)展示帶有兩個(gè)二維碼的頁(yè)面：
第一個(gè)二維碼是Debugger Server球恤，用Playground中先掃第一個(gè)辜昵，這個(gè)時(shí)候就會(huì)進(jìn)入一個(gè)新的頁(yè)面荸镊，然后在這個(gè)頁(yè)面中選擇需要調(diào)試的模式咽斧。
關(guān)于debugger 和 Inspector的模式的解釋堪置，圖片上已經(jīng)介紹了很清楚了。選擇模式后再掃第二個(gè)二維碼张惹，即可進(jìn)入我們開發(fā)的頁(yè)面舀锨。然后就可以查看log，以及頁(yè)面結(jié)構(gòu)了宛逗。
Android集成Weex
Android集成有兩種方式：
- 源碼依賴：將源碼作為一個(gè)module導(dǎo)入
- SDK依賴：導(dǎo)入Weex的SDK包 （from jcenter）
SDK依賴
SDK的接入比較簡(jiǎn)單坎匿，我們平時(shí)在開發(fā)過程中經(jīng)常會(huì)引用到第三方的庫(kù)文件，都是使用這種方式進(jìn)行集成的雷激。在app的build.gradle文件中加入以下依賴：
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.5.1@aar'
另外要加上
ndk{
abiFilters "x86"
abiFilters "armeabi"
}
否則64位的手機(jī)無法渲染組件替蔬。
接下來就開始實(shí)現(xiàn)集成的代碼了：
首先，實(shí)現(xiàn)IWXImgLoaderAdapter屎暇，在Weex的初始化的時(shí)候承桥，Image loader adapter 一定要實(shí)現(xiàn)否則會(huì)報(bào)空指針。
public class ImageApdater implements IWXImgLoaderAdapter {
@Override
public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
// 實(shí)現(xiàn)圖片加載
}
}
然后實(shí)現(xiàn)自己的Application根悼，在onCreate中初始化Weex的引擎：
public class WXTestApplication extends Application{
@Override
public void onCreate(){
super.onCreate();
InitConfig config = new InitConfig.Builder().setImageAdapter(new ImageApdater()).build();
WXSDKEngine.initialize(this,config);
}
}
特別要注意凶异，這里一定要setImageAdapter，否則運(yùn)行會(huì)報(bào)空指針錯(cuò)誤挤巡。
最后在Activity中加載js文件剩彬。這里先要把上面hello_world.we 生成的hello_world.js文件拷貝到assets的目錄里：
public class MainActivity extends AppCompatActivity implements IWXRenderListener {
WXSDKInstance mWXSDKInstance;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWXSDKInstance = new WXSDKInstance(this);
mWXSDKInstance.registerRenderListener(this);
mWXSDKInstance.render("Weex Test Page", WXFileUtils.loadFileContent("hello_world.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();
}
}
}
之后運(yùn)行，就可以看到在手機(jī)的頁(yè)面上看到hello_world.we中的內(nèi)容了矿卑。
源碼依賴
- 下載源碼：
git clone https://github.com/alibaba/weex - 通過以下路徑
File -> New Import Module->choose weex/android/sdk ->Finish來導(dǎo)入Weex的SDK Module - app 的build.gradle 中添加依賴：
compile project(':weex_sdk') - 其他配置如上喉恋。
以上就是Weex的環(huán)境配置以及Android的集成方法，相對(duì)來說還是比較簡(jiǎn)單的母廷。后面再講下加載遠(yuǎn)程頁(yè)面和遠(yuǎn)程調(diào)試（集成Devtools）
