初识Weex(一)

作者: seph_von | 来源:发表于2016-12-29 15:12 被阅读393次

    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)

    相关文章

      网友评论

        本文标题:初识Weex(一)

        本文链接:https://www.haomeiwen.com/subject/wmhyvttx.html