内容在issues里面
blogger's Introduction
blogger's People
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核心模块
- 用android studio创建空android项目,最低版本选API 19, activity选择Empty Activity
- 修改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在引擎初始化会崩溃。
- 在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);
}
}
- 修改AndroidManifest.xml文件
......
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:name=".WXApplication"
......
说明:加网络权限,并且将application指定为刚刚新建的WXApplication类
- 关键部分,在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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.