Giter Club home page Giter Club logo

blogger's Introduction

开发笔记

内容在issues里面

blogger's People

Contributors

yxzhan avatar

Watchers

James Cloos avatar  avatar

blogger's Issues

android接入Weex笔记

说明

官方的集成文档针对的读者是有基本android开发经验的读者,作为一个正儿八经的前端,我正好不是目标读者,所以配置的过程是一脚一个坑。并且文档的滞后性也导致配置过程出现一些问题,截至写本文的时间,官方文档引入的是0.5.1的weex_sdk, 而我现在引入的是0.11.0的版本。如果直接引入源码里面的sdk的话,build sdk需要额外引入一些其他gradle的插件,所以直接从jcenter引入weex_sdk依赖更简单.

这里对官方的文档中缺少的一些细节做个补充,大体上的过程和示例代码都按照官方文档的来,但是我把图片下载接口的实现部分去掉了,官方文档里面其实也没有实现,只是带了一句信息量很大的 //实现你自己的图片下载,否则图片无法显示。,至于为什么要自己实现,官方给出的解释:Weex 所有暴露给 JS 的内置 module 或 component API 都是安全和可控的, 它们不会去访问系统的私有 API ,也不会去做任何 runtime 上的 hack 更不会去改变应用原有的功能定位。Weex SDK 只提供渲染,而不是其他的能力,如果你需要 像网络,图片,URL跳转这些特性,需要自己动手实现他们。

前期准备

  • 安装android studio

集成集成weex核心模块

  1. 用android studio创建空android项目,最低版本选API 19, activity选择Empty Activity
  2. 修改build.gradle(这里指的是app module下面的build.gradle)加入如下基础依赖:
...
dependencies {
    ...
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support:recyclerview-v7:25.3.1'
    compile 'com.taobao.android:weex_sdk:0.11.0'
    compile 'com.alibaba:fastjson:1.1.46'
}

说明:recyclerview和appcompat的版本要根据自己安装的android SDK版本作修改,fastjson依赖也是必须引入,不然用0.11.0版本的weex_sdk在引擎初始化会崩溃。

  1. 在MainActivity类所在的package下新建一个WXApplication类继承Application类
// File: WXApplication.java
package com.example.xxx;
import android.app.Application;
import com.taobao.weex.WXSDKEngine;

public class WXApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    // 初始化weex环境,第二个参数是配置,官方文档中有图片下载的拓展,这里没有,所以传null
    WXSDKEngine.initialize(this, null);
  }
}
  1. 修改AndroidManifest.xml文件
......
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:name=".WXApplication"
......

说明:加网络权限,并且将application指定为刚刚新建的WXApplication类

  1. 关键部分,在MainActivity里面实例化一个weex instance,并渲染页面
// File: MainActivity.java
package com.example.xxx;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.util.Log;
import com.taobao.weex.IWXRenderListener;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.common.WXRenderStrategy;
import com.taobao.weex.utils.WXViewUtils;

public class MainActivity extends AppCompatActivity implements IWXRenderListener {

    private static String BUNDLEURL = "http://100.84.234.5:8080/dist/app.weex.js";
    WXSDKInstance mWXSDKInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // init weex instance
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        renderWeexPage();
    }
    protected void renderWeexPage() {
        mWXSDKInstance.renderByUrl(
                "hello-weex",
                BUNDLEURL,
                null,
                null,
                WXRenderStrategy.APPEND_ASYNC
        );
    }
    /**
     * Weex实例的事件回调
     */
    @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) {
        // 如果显示不出东西,可以在��这里打个点,看看报的什么错
        Log.e("weex error", msg);
    }
    /**
     * 原生activity的生命周期事件回调
     */
    @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();
        }
    }
}

说明:MainActivity类实现了IWXRenderListener,在onViewCreated回调里面将weex页面加载到前台,这里直接load了远程的js文件,而官方的例子是直接load本地assets资源里的js文件。

附录:weex-demo地址

参考链接:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.