Dcloud扩展原生组件

企业微信截图_15919580025039

首先如图所示我们先创建一个原生的ComponentModel，然后引入一下配置

 //必须添加的依赖
    compileOnly 'com.android.support:recyclerview-v7:27.1.0'
    compileOnly 'com.android.support:support-v4:27.1.0'
    compileOnly 'com.android.support:appcompat-v7:27.1.0'
    compileOnly 'com.alibaba:fastjson:1.1.46.android'

    compileOnly fileTree(include: ['uniapp-release.aar'], dir: '../app/libs')

package io.dcloud.uniplugin;

import android.content.Context;
import android.view.View;

import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.annotation.JSMethod;
import com.taobao.weex.ui.action.BasicComponentData;
import com.taobao.weex.ui.component.WXComponent;
import com.taobao.weex.ui.component.WXComponentProp;
import com.taobao.weex.ui.component.WXVContainer;

import io.dcloud.uniplugin.component.R;


//自己定义view
public class MyLayoutView extends WXComponent<View> {

    public MyLayoutView(WXSDKInstance instance, WXVContainer parent, BasicComponentData basicComponentData) {
        super(instance, parent, basicComponentData);
    }

    @Override
    protected View initComponentHostView(Context context) {

        return View.inflate(context, R.layout.main, null);
    }


    @Override
    public void onActivityResume() {
        super.onActivityResume();
    }

    @Override
    public void onActivityPause() {
        super.onActivityPause();
    }

    @Override
    public void onActivityDestroy() {
        super.onActivityDestroy();
    }
}

这个就是我们自己扩展的view组件，这里的组件我们是从xml文件创建的，也支持动态创建
然后在Application中注册组件

 try {
            //注册组件
            WXSDKEngine.registerModule("TestModule", TestModule.class);
            WXSDKEngine.registerComponent("myText", TestText.class);
            WXSDKEngine.registerComponent("MyLayoutView", MyLayoutView.class);
        } catch (WXException e) {
            e.printStackTrace();
            Log.e("onCreate",e.getMessage());
        }

其中的MyLayoutView就是我们起的别名，就是我们在H5用引用的组件别名

<template>

		<view class="uni-hello-text">
				<text class="hello-text">uni原生插件示例</text>
			</view>

	<div>
		<MyLayoutView style="width:300;height:400" ></MyLayoutView>
	</div>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {
        },

    }
</script>

上面是H5 的代码然后我们执行原生打包-生成本地资源，然后把这文件拷贝到assets目录下，

企业微信截图_15919588162630

就可以了，需要注意文件必须是.nvue结尾的文件才行，注意拷贝文件的时候确认当前的文件是否拷贝完全

FEATURED TAGS

FRIENDS