初识Weex(一)

What

简而言之,Weex就是一套完全针对无线电商的技术方案。采用HyBird的方式,脑洞来自于RN,相比于传统的Native+WebView的方式,性能有了很大的提升。
关于weex的起源,优点这里就不一一介绍了,可以移步对无线电商动态化方案的思考 这个系列的文章。

How

下面来说说Weex在Android中的集成。

环境准备

  • Android开发环境
    JDK、SDK、Android Studio 这些都是必须的,如何安装配置不是本文的重点,这里暂时不表。但是值得注意的是:
    1. JDK的版本必须>=1.7;
    2. Android SDK version 23 (就是在build.gradle中的compileSdkVersion 的版本)(可高不可低)
  1. SDK build tool version 23.0.1 (build.gradle中buildToolsVersion的版本号)
  2. 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的页面。
这里有几点 需要注意的地方:

  1. .we文件的结构 :<template> <style> <script> 分别对应Web中的Html,CSS, JavaScript;其中<template>标签不能省略。
  2. <template>中必须要有且只有一个根节点
  3. .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中的内容了。


真机运行效果

源码依赖

  1. 下载源码: git clone https://github.com/alibaba/weex
  2. 通过以下路径File -> New Import Module->choose weex/android/sdk ->Finish 来导入Weex的SDK Module
  3. app 的build.gradle 中添加依赖:compile project(':weex_sdk')
  4. 其他配置如上。

以上就是Weex的环境配置以及Android的集成方法,相对来说还是比较简单的。后面再讲下加载远程页面和远程调试(集成Devtools)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,471评论 25 707
  • 什么是 weex weex 是阿里开源的一套三端通用方案,只要编写一次代码就能运行在 iOS、Android 和 ...
    Tatinic阅读 1,204评论 0 9
  • 本系列文章将记录 Weex 的 学习、开发之路、各种文档干货。鉴于当前 Weex 的普及性不高、文档不全,希望该系...
    Tsy远阅读 18,567评论 4 43
  • 2016年4月21日,阿里巴巴在Qcon大会上宣布开源跨平台移动开发工具Weex,Weex能够完美兼顾性能与动态性...
    晴天咚咚阅读 2,853评论 1 15
  • 又是一年中秋节 深邃的夜空揉碎了眼眸 星星闪动着温柔的光芒 凝目远眺明月醉了心思 故乡的一轮圆月是否是你远方的牵挂...
    田萍阅读 284评论 1 9