weex嵌入到android工程(window系统)

来源:互联网 发布:linux安装jdkrpm 编辑:程序博客网 时间:2024/05/21 19:46

HelloWorld实践

1.建立Android Project。module命名为WeexDemo.MainActivity选择EmptyActivity就好。
2.配置build.gradle。在app的build.gradle添加Weex依赖。如下

    compile 'com.android.support:appcompat-v7:23.0.1'    compile 'com.android.support:recyclerview-v7:23.0.1'    compile 'com.android.support:support-v4:23.0.1'    compile 'com.alibaba:fastjson:1.1.45'    compile 'it.sephiroth.android.library.picasso:picasso:2.5.2.4b'

后面两个依赖库,分别是fastjson解析Json,picasso图片加载,不加会出现 ClassNotFoundException。

3.在Mainfest.xml中添加网络权限

<uses-permission android:name="android.permission.INTERNET"/>

4.在工程中Application启动Weex RunTime,用于渲染UI,创建一个类WXAppliaction继承Application。

import android.app.Application;import com.taobao.weex.InitConfig;import com.taobao.weex.WXSDKEngine;/** * Created by Administrator on 2016/12/15. */public class WXApplication extends Application {    @Override    public void onCreate() {        super.onCreate();        InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();        WXSDKEngine.initialize(this,config);    }}

ImageAdapter是自定义一个类,用于加载网络图片。如果没有配置这个ImageAdapter,就会出现ClassNotFoundException错误。

import com.taobao.weex.adapter.IWXImgLoaderAdapter;import com.taobao.weex.common.WXImageStrategy;import com.taobao.weex.dom.WXImageQuality;import it.sephiroth.android.library.picasso.Picasso;/** * Created by Administrator on 2016/12/15. */public class ImageAdapter implements IWXImgLoaderAdapter {    @Override    public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {        //实现你自己的图片下载,否则图片无法显示。        Log.d("url",url);        Picasso.with(view.getContext()).load(url).into(view);    }}

log日记你可以清晰看到之前.we文件添加图片的地址。

注意,必须记得到Mainfest.xml清单文件中更改上下文:

<application        android:name=".WXApplication"        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:supportsRtl="true"        android:theme="@style/AppTheme">

5.在weex工程中运行文件hello.we文件:
weex hello.we
就会生成一个文件夹 weex_tmp,weex_tmp\h5_render下找到hello.js文件。
6.在android project工程中main目录下创建assets,将hello.js文件复制进去。
7.在MainActivity中渲染UI

import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import com.taobao.weex.IWXRenderListener;import com.taobao.weex.WXSDKEngine;import com.taobao.weex.WXSDKInstance;import com.taobao.weex.common.WXRenderStrategy;import com.taobao.weex.utils.WXFileUtils;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);        /**         * WXSample 可以替换成自定义的字符串,针对埋点有效。         * template 是.we transform 后的 js文件。         * option 可以为空,或者通过option传入 js需要的参数。例如bundle js的地址等。         * jsonInitData 可以为空。         * width 为-1 默认全屏,可以自己定制。         * height =-1 默认全屏,可以自己定制。         */        mWXSDKInstance.render("WeexDemo", WXFileUtils.loadAsset("hello.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();    }}

布局文件为:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    tools:context="com.example.chen.weexdemo2.MainActivity"></RelativeLayout>

到此,这个weex嵌入到android project就完成了。运行WeexDemo就可以出现效果。

0 0