我發(fā)現(xiàn)好多人竟然在不停地問weex的官方網(wǎng)址 https://weex.apache.org/cn/
什么是weex
引用官方的話
Weex 是一套簡單易用的跨平臺開發(fā)方案店读，能以 web 的開發(fā)體驗構建高性能择同、可擴展的 native 應用，為了做到這些裹纳，Weex 與 Vue 合作紧武，使用 Vue 作為上層框架，并遵循 W3C 標準實現(xiàn)了統(tǒng)一的 JSEngine 和 DOM API朋鞍，這樣一來妥箕，你甚至可以使用其他框架驅(qū)動 Weex，打造三端一致的 native 應用坎吻。
什么意思
叫他框架有失不妥,如他官方所說這是一個解決方案,他統(tǒng)一了不同終端寫一段代碼然后在不同終端上運行,有一點點Java的味道,write once run anywhere ,我們知道Java能夠在各個平臺上運行的原因是java有一個非常牛逼java虛擬機運行,他保證了java程序能夠迅速,,魯棒宇葱、安全的運行再各個平臺,而,weex,也是如此,我們可以向編寫web界面一樣先編寫we文件, 然后通過轉(zhuǎn)換命令將這個we文件轉(zhuǎn)換成js文件,而每個weex事先在Android,iOS,yunos 的 app中嵌入了js引擎,app啟動時,js引擎動態(tài)根據(jù)js文件生成native控件,來和用戶互交
廢話少說,下面就進行環(huán)境搭建
- 安裝nodejs 具體如何安裝nodejs請移步官網(wǎng) https://nodejs.org/en/
安裝完成后檢測是否安裝成功
> $ node -v
v6.3.1
$ npm -v
3.10.3
注意 : npm 是一個 JavaScript 包管理工具刊头，在安裝完nodejs, npm 也會被同時安裝上 它可以讓開發(fā)者輕松共享和重用代碼原杂。Weex 很多依賴來自社區(qū)您机，同樣，Weex 也將很多工具發(fā)布到社區(qū)方便開發(fā)者使用被碗。
2 安裝 weex 命令
$ npm install -g weex-toolkit
$ weex -v
v1.0.3
weex-builder : v0.2.4
weex-previewer : v1.3.4
檢測weex 是否安裝成功
$ weex -v
v1.0.4
- weex-builder : v0.2.6
- weex-previewer : v1.3.7
至此weex環(huán)境搭建完成
將weex集成到現(xiàn)有的項目中
集成有兩種方式
- 源碼依賴：能夠快速使用WEEX最新功能仿村，可以根據(jù)自己項目的特性進行相關改進兴喂。
- SDK依賴：WEEX 會在jcenter 定期發(fā)布穩(wěn)定版本。jcenter注:國內(nèi)可能需要翻墻
tips :我這里配置第一種,為啥,因為對于新手簡單啊.
前期準備
已經(jīng)安裝了JDK version>=1.7 并配置了環(huán)境變量
已經(jīng)安裝Android SDK 并配置環(huán)境變量畏鼓。
Android SDK version 23 (compileSdkVersion in build.gradle
)
SDK build tools version 23.0.1 (buildToolsVersion in build.gradle
)
Android Support Repository >= 17 (for Android Support Library)
不啰嗦,as新建Android項目 將下面依賴放入app.build中
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.11.0@aar'
注意不要亂改版本,目前weex還處于不穩(wěn)定中,各個版本可能還不兼容,避免出現(xiàn)沒必要的bug
代碼實現(xiàn)
照葫蘆畫瓢不要問我為撒,
圖片接口實現(xiàn)
<pre>
package com.weex.sample;
import android.widget.ImageView;
import com.taobao.weex.adapter.IWXImgLoaderAdapter;
import com.taobao.weex.common.WXImageStrategy;
import com.taobao.weex.dom.WXImageQuality;
/**
- Created by lixinke on 16/6/1.
*/
public class ImageAdapter implements IWXImgLoaderAdapter {
@Override
public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
//實現(xiàn)你自己的圖片下載云矫，否則圖片無法顯示汗菜。
}
}
</pre>
初始化Application
<pre> package com.weex.sample;
import android.app.Application;
import com.taobao.weex.InitConfig;
import com.taobao.weex.WXSDKEngine;
/**
- 注意要在Manifest中設置android:name=".WXApplication"
- 要實現(xiàn)ImageAdapter 否則圖片不能下載
- 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.45'
*/
public class WXApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
WXSDKEngine.initialize(this,config);
}
}
</pre>
注意不要忘了配置manifast文件Application節(jié)點的name屬性
開干第一個weex界面
<pre> package com.weex.sample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.taobao.weex.IWXRenderListener;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.common.WXRenderStrategy;
import com.taobao.weex.utils.WXFileUtils;
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);
/**
* WXSample 可以替換成自定義的字符串腮敌，針對埋點有效俏扩。
* template 是.we transform 后的 js文件。
* option 可以為空捌木，或者通過option傳入 js需要的參數(shù)赁咙。例如bundle js的地址等免钻。
* jsonInitData 可以為空崔拥。
* width 為-1 默認全屏，可以自己定制拆魏。
* height =-1 默認全屏慈俯，可以自己定制。
*/
mWXSDKInstance.render("WXSample", WXFileUtils.loadFileContent("hello.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();
}
}
}
</pre>
附上我集成好的一個app demo
https://github.com/meijingkang/WeexTest.git
為了更加快速的入門(其實你已經(jīng)入門了) 算了,為了你更快速的開干,我繼續(xù)吐槽點東西
安裝plugin
進入Androidstudio->setting->plugin 搜索weex 安裝重啟as
建立自己的界面
點項目的asset目錄(如果沒有就先新建asset目錄)new新建we文件,文件名字隨便起我這里起名hello.we
拷貝控件,
<pre>
<template>
<div>
<div>
<text>cover</text>
<image resize="cover" class="cover" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></image>
</div>
<div>
<text>contain</text>
<image resize="contain" class="contain" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></image>
</div>
</div>
</template>
<style>
.cover {
width:750px;
height:500px;
border-width: 2px;
border-style: solid;
border-color: #ff0000;
}
.contain {
width:750px;
height:500px;
border-width: 2px;
border-style: solid;
border-color: #ff0000;
}
</style>
<script>
</script>
</pre>
進入as的terminal面板
cd app/src/main/assets 目錄
weex compile hello.we hello.js
ls
解釋下compile命令,這個命令的意思是將hello.we文件轉(zhuǎn)為hello.js文件(app內(nèi)置的js引擎只能解析js文件)
你會看到路徑下多了個js文件,這個文件就是weex生成的供js引擎解析的文件,我們將這個文件配置到這,將c.js替換為你剛才生成的那個js文件
ok此時全部工作昨晚,你可以預覽你自己搭建的界面
關于文件的內(nèi)容解釋我們下一篇博客介紹
