简介
Weex是一个与React native(简称RN)类似的前端技术,可支持平台网页端、Android、IOS。这种兼容性的平台可能是未来的趋势,从招聘岗位上也可看出,越来越多的需求。所以来研究下。本人是之前做Android的,实例都已Android为例。
推荐一片好文weex&ReactNative对比
Weex官网
搭建环境
环境准备
- nodejs:下载并安装
- weex-toolkit:完成第一步后使用npm安装
npm install -g weex-toolkit
第一个Weex程序
然后初始化 Weex 项目:
weex init myProject
进入myProject目录,安装依赖包
npm install
浏览器端调试
npm run dev // 开启watch 模式
npm run serve //开启静态服务器
打开浏览器,输入
http://localhost:8080/index.html
即可看到 weex h5 页面 如下。
Android端
创建一个Android Studio项目。
官网要求:
1. 已经安装了JDK version>=1.7 并配置了环境变量
2. 已经安装Android SDK 并配置环境变量。
3. Android SDK version 23 (compileSdkVersion in build.gradle)
4. SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
5. Android Support Repository >= 17 (for Android Support Library)
编写Android代码
添加依赖
glide用于图片加载。
其他的库都是官网要求的依赖。
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'
实现ImageAdapter
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);
}
}
- 可以不实现,不会出错,只是图片不显示。
- 也可以替换其他的图片加载模块。如Android-Universal-Image-Loader或者picasso。
创建Application类
public class WeexApp extends Application {
@Override
public void onCreate() {
super.onCreate();
InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
WXSDKEngine.initialize(this,config);
}
}
在Manifest中配置
android:name=".WeexApp"
编写MainActivity
这里做了几件事:
- 实例化 WXSDKInstance 。
- 在Activity生命周期中回调 mWXSDKInstance 的对应方法。
- 实现 IWXRenderListener 接口 。
- 调用 mWXSDKInstance.render 方法实例化组件。
- 在 IWXRenderListener.onViewCreated() 方法中设置 view 。
IWXRenderListener.onViewCreated()会在Weex将JS实例化成View后回调。 IWXRenderListener 中同时调方法。
onRenderSuccess();
onRefreshSuccess();
onException();
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需要的参数。例如bundle js的地址等。
* jsonInitData 可以为空。
* width 为-1 默认全屏,可以自己定制。
* height =-1 默认全屏,可以自己定制。
*/
mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("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();
}
}
}
“`
安装官方demo:playground.apk
App中的扫码图标,然后用你的手机摄像头扫描终端中的二维码。
参考:
http://www.open-open.com/lib/view/1484708363305