UTS插件编写的页面组件里面的method，如何才能给uview文件调用？
我这写了一个组件
<template>
<view>
</view>
</template>
<script lang="uts">
import FrameLayout from 'android.widget.FrameLayout'
import LayoutParams from 'android.widget.FrameLayout.LayoutParams'
import Camera2Helper from './Camera2Helper.uts'
import TextureView from "android.view.TextureView";
//原生提供以下属性或方法的实现
export default {
name: "hx-baidu-face",
props: {
},
watch: {
},
expose: ['startCapture'],
method: {
startCapture() {
Camera2Helper.getInstance().capture()
}
},
NVLoad() : FrameLayout { //原生View已创建,必须实现
let contentLayout = new FrameLayout(this.$androidContext!);
let textureView = new TextureView(this.$androidContext!);
textureView.setTag("cameraView");
contentLayout.addView(textureView, new LayoutParams(400, 400));
Camera2Helper.getInstance().setTextureView(textureView);
return contentLayout;
},
NVLayouted() { //原生View布局完成
//可选实现，这里可以做布局后续操作
Camera2Helper.getInstance().init()
},
NVBeforeUnload() { //原生View将释放
//可选实现，这里可以做释放View之前的操作
Camera2Helper.getInstance().closeAll()
},
NVUnloaded() { //原生View已释放
//可选实现，这里可以做释放View之后的操作
},
unmounted() { //组件销毁
//可选实现
}
}
</script>
<style>
</style>在uview页面中调用拍照函数 this.$refs['hxBaiduFace1'].startCapture()，代码如下：
<template>
<view class="container">
<!-- 背景图 -->
<image class="bg" src="/static/bg/bg_splash.png" mode="aspectFill"></image>
<view class="content">
<image src="/static/logo.png" mode="aspectFill" class="logo"></image>
<hx-baidu-face ref="hxBaiduFace1"
style="width: 400px;height: 400px;background-color: aqua;"></hx-baidu-face>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
setTimeout(() => {
console.log('开始拍照')
this.$refs['hxBaiduFace1'].startCapture()
}, 3000)
},
methods: {
}
}
</script>
<style>
.container {
width: 1920px;
height: 1080px;
position: relative;
}
.bg {
width: 1920px;
height: 1080px;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
width: 100px;
height: 100px;
margin-bottom: 20rpx;
border-radius: 50px;
}
.title {
font-size: 50px;
}
.start-text {
margin-top: 100px;
font-size: 32px;
}
</style>编译器直接报
19:10:49.587 [plugin:uni:app-uts] 编译失败
19:10:49.592 error: Unresolved reference: startCapture这个该如何解决？或者该如何才能调用到插件里面方法？
5 个回复
最佳回复
DCloud_Android_DQQ
目前在uvue下 需要调用组件内的方法 与 nvue 有一些差异。
下面我这边测试可以。 稍后也同步到文档
DCloud_heavensoft
onLoad里拿不到ref，onReady才能保证组件可用。
调用示例@DCloud_Android_DQQ 补充文档。
3***@qq.com (作者)
下面给你回复了一张图片，依旧是报错
2023-12-13 09:36
3***@qq.com (作者) - IT狂热分子
@DCloud_heavensoft ，在onReady也还是报错
这个是调用页面：
这个是插件里面暴露的函数：
DCloud_Android_DQQ
https://uniapp.dcloud.net.cn/plugin/uts-component.html#%E8%BF%90%E8%A1%8C%E5%92%8C%E6%B5%8B%E8%AF%95
文档更新了，补充了 调用组件内置方法的示例
3***@qq.com (作者)
你再看准一点我上面的截图，我的是连编译都没法通过，我的插件已经暴露了一个startCapture的方法
2023-12-13 16:52
DCloud_Android_DQQ
回复 3***@qq.com: uvue 调用组件方法有些特殊，我回复在下面了。
2023-12-13 17:14
3***@qq.com (作者)
回复 DCloud_Android_DQQ:
按你完善的文档那里的写法，我这里编译器直接报
[plugin:alias] Cannot find module 'F:/xxxx....到项目根目录/uni_modules/插件名称' from 'F:/xxxx....项目根目录/...具体的页面.uvue'2023-12-13 19:20
3***@qq.com (作者)
回复 DCloud_Android_DQQ: 是不是还缺少什么配置要写的到package.json里面的
2023-12-13 19:21
DCloud_Android_DQQ
回复 3***@qq.com: 你直接复制 简单的demo 能运行吗 就我上面贴出来的代码
2023-12-13 19:29
3***@qq.com (作者)
回复 DCloud_Android_DQQ: 按照你的demo也没法运行，但是我大胆地试了一下，你的
uvue 页面需要使用下面的引入代码，nvue 不需要这句话应该写反了，我的文件是uview，如果不注释import { UtsHelloViewElement } from '@/uni_modules/uts-hello-component'这段代码，就一直报上面这个错；但是把
import { UtsHelloViewElement } from '@/uni_modules/uts-hello-component'注释掉之后，保留开启(this.$refs["helloView"] as UtsHelloViewElement).doSth('param doSth');这段代码，就能触发插件里面的函数了2023-12-13 19:58
3***@qq.com (作者)
如下图所示就是正常的了，虽然有波浪线挺不好看的，但是能正常执行了
2023-12-13 20:00
DCloud_Android_DQQ
回复 3***@qq.com: 好的。文档同步处理了
2023-12-15 11:22
3***@qq.com (作者) - IT狂热分子
@DCloud_Android_DQQ 如这图所属，一切正常了