What
简而言之,Weex就是一套完全针对无线电商的技术方案。采用HyBird的方式,脑洞来自于RN,相比于传统的Native+WebView的方式,性能有了很大的提升。
关于weex的起源,优点这里就不一一介绍了,可以移步对无线电商动态化方案的思考 这个系列的文章。
How
下面来说说Weex在Android中的集成。
环境准备
-
Android开发环境
JDK、SDK、Android Studio 这些都是必须的,如何安装配置不是本文的重点,这里暂时不表。但是值得注意的是:- JDK的版本必须>=1.7;
- Android SDK version 23 (就是在build.gradle中的compileSdkVersion 的版本)(可高不可低)
- SDK build tool version 23.0.1 (build.gradle中buildToolsVersion的版本号)
- Android Support Repository >= 17
-
Weex环境配置
Weex的环境,根据操作系统的不同,步骤稍有差别,这里仅用 Windows 的系统来讲。
不论什么平台,首先都是要安装node.js的,安装node.js 比较简单,直接去官网 下载就好了,可以通过查看版本的方式来检查是否安装成功。
$ 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命令验证是否安装成功,还是通过查看版本的方式:
$weex --version
info 0.6.4
weex的环境配置到这里就结束了。这里的环境主要是用来编译和运行的,跟开发其实并没有太大的联系。
Weex开发
weex-toolkit安装成功之后,其实可以通过weex的命令来生成weex的本地工程,这个后面再讲。先从最简单的开始。
-
创建文件
新建一个.we
的文件(这个就是weex程序的文件后缀名)。按照小白入门惯例取名为:hello_world.we
接下来就是填写代码了。(weex主要涉及的都是前端的代码,因此开发工具可以选择如sublime等)
<template>
<div>
<text>hello world</text>
</div>
</template>
<style>
</style>
<script>
</script>
这样就完成了一个最简单的hello world的页面。
这里有几点 需要注意的地方:
-
.we
文件的结构 :<template>
<style>
<script>
分别对应Web中的Html,CSS, JavaScript;其中<template>
标签不能省略。 -
<template>
中必须要有且只有一个根节点 -
.we
文件中不能在<div>的标签下直接添加字符,任何内容都应该是组件
-
运行查看
需要查看页面效果,在命令行里使用命令:
$weex hello_world.we
这样就可以打开浏览器,里面显示的就是hello world的内容。
Ps:上面的命令默认启用的是8080端口,如果8080端口被占用的话,可以通过--port
的参数指定端口
$weex hello_world.we --port 3001
如果想要在手机上查看页面效果的话,那么手机上就得下载安装Playground ;然后在命令行执行命令:
$weex hello_world.we --port 3001 --qr
这个时候命令行里就会显示一个二维码,使用Playground来扫描这个二维码,即可在手机上查看页面。
-
调试
weex-toolkit已经集成了Debugger,执行下面命令就可以打开debug模式:
$weex debug hello_world.we --port 3001
这个时候浏览器上就会展示带有两个二维码的页面:
debug页面
第一个二维码是Debugger Server,用Playground中先扫第一个,这个时候就会进入一个新的页面,然后在这个页面中选择需要调试的模式。
debug模式
关于debugger 和 Inspector的模式的解释,图片上已经介绍了很清楚了。选择模式后再扫第二个二维码,即可进入我们开发的页面。然后就可以查看log,以及页面结构了。
Android集成Weex
Android集成有两种方式:
- 源码依赖:将源码作为一个module导入
- SDK依赖:导入Weex的SDK包 (from jcenter)
SDK依赖
SDK的接入比较简单,我们平时在开发过程中经常会引用到第三方的库文件,都是使用这种方式进行集成的。在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位的手机无法渲染组件。
接下来就开始实现集成的代码了:
首先,实现IWXImgLoaderAdapter,在Weex的初始化的时候,Image loader adapter 一定要实现否则会报空指针。
public class ImageApdater implements IWXImgLoaderAdapter {
@Override
public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
// 实现图片加载
}
}
然后实现自己的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
,否则运行会报空指针错误。
最后在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();
}
}
}
之后运行,就可以看到在手机的页面上看到hello_world.we中的内容了。
真机运行效果
源码依赖
- 下载源码:
git clone https://github.com/alibaba/weex
- 通过以下路径
File -> New Import Module->choose weex/android/sdk ->Finish
来导入Weex的SDK Module - app 的build.gradle 中添加依赖:
compile project(':weex_sdk')
- 其他配置如上。
以上就是Weex的环境配置以及Android的集成方法,相对来说还是比较简单的。后面再讲下加载远程页面和远程调试(集成Devtools)
网友评论