Weex（一）- 环境创建与第一个小程序

简介

Weex是一个与React native（简称RN）类似的前端技术，可支持平台网页端、Android、IOS。这种兼容性的平台可能是未来的趋势，从招聘岗位上也可看出，越来越多的需求。所以来研究下。本人是之前做Android的，实例都已Android为例。

推荐一片好文weex&ReactNative对比
Weex官网

搭建环境

环境准备

1. nodejs：下载并安装
2. 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 {@Overridepublic void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {//实现你自己的图片下载，否则图片无法显示。Glide.with(view.getContext()).load(url).into(view); }
}

1. 可以不实现，不会出错，只是图片不显示。
2. 也可以替换其他的图片加载模块。如Android-Universal-Image-Loader或者picasso。

创建Application类

public class WeexApp extends Application {@Overridepublic void onCreate() {super.onCreate();InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();WXSDKEngine.initialize(this,config);}}

在Manifest中配置

android:name=".WeexApp"

编写MainActivity

这里做了几件事：

1. 实例化 WXSDKInstance 。
2. 在Activity生命周期中回调 mWXSDKInstance 的对应方法。
3. 实现 IWXRenderListener 接口 。
4. 调用 mWXSDKInstance.render 方法实例化组件。
5. 在 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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！