uni-appx，实现登录功能，弹窗功能。组件之间传值

news2025/1/17 3:07:49

这篇文章的内容使用组合式API实现的，只有弹窗部分有选择式API的写法介绍。如果想要看其他选择式API，还请下载官方的hello-uni-appx源码进行学习，查看。想要看组合式API的写法，请查看源码 hello-uvue。

hello-uni-appx源码

相比于uni-app,uni-appx有了更多约束，无论是写CSS还是写TypeScript，都是举步维艰。

在开发时，强烈建议浏览器和模拟器都要打开，因为有很多问题浏览器是完全没有问题的，但是到了手机端，模拟器就是有问题不能执行或者没有效果的。

UI库

刚开始，我想着用一个好用的UI库，但是试了很多UI库，都是浏览器正常，手机端就报错，各种不能使用。最后只能放弃坚持寻找UI库的想法

如果您有好用的UI库，请留言，让我也学习学习，谢谢~

Form表单

因为没有找到好用的UI库，所以我只能用原生的form表单先实现一下登录功能了。

问题一：如何定义form表单的对象

如果这里是因为类型出错阻断了，可以查看官方文档中uts中类型的介绍的内容。

这里我尝试了很多次，使用const userInfo = ref<UTSJSONObject>({})不是一个好写法，在获取值时，编译时代码会阻断。所以使用了let的方式，官网中介绍UTSJSONObject类型时，也是用let进行举例介绍的。

	let userInfo : UTSJSONObject = {
		username: "",
		password: ""
	};

:value中的取值方式必须是 userInfo['username']

<form ref="userInfo" @submit="onFormSubmit">
	<input class="uni-input" name="username" :value="userInfo['username']" placeholder="请输入用户名" />
	<input class="uni-input" name="password" :value="userInfo['password']" placeholder="请输入密码" />
	<button class="btn-submit" form-type="submit" type="primary">登录</button>
	<checkbox class="form-checkbox" :checked="privacyChecked && userChecked" @click="onChangeCheckBox">
	<text class="text" @click="openPopup($event as UniEvent,'privacy')">《隐私政策》</text>和
	<text class="text" @click="openPopup($event as UniEvent,'user')">《用户协议》</text>
	</checkbox>
</form>

问题二：如何实现弹窗组件的使用

用官方组件 uni-popup,定义ref,ref的类型是组件名称 + ComponentPublicInstance

<uni-popup ref="popupRef" type="center" :mask-click="false">
	<view style="color: aliceblue;">底部弹出 Popup 自定义圆角</view>
	<button @click="closePopup">关闭</button>
</uni-popup>

组合式 API

const popupRef = ref<UniPopupComponentPublicInstance | null>(null);
// 打开弹窗，注意open后面的写法，
const openPopup = () => {
	popupRef.value?.open!()； // open()这个方法一定存在
	// popupRef.value?.open?.()； // 写法二
}

// 关闭弹窗
const closePopup = () => {
	popupRef.value?.close!()
}

选择式API

data() {
	return {
		popupRef: null as UniPopupComponentPublicInstance | null
	}
},
methods: {
	openPopup() {
		this.popupRef = this.$refs['popupRef'] as UniPopupComponentPublicInstance; //写法一，data中定义了popupRef
		// let popupRef = this.$refs['popupRef'] as UniPopupComponentPublicInstance; // 写法二
		popupRef.open();
	},
	closePopup() {
		this.popupRef = this.$refs['popupRef'] as UniPopupComponentPublicInstance;
		popupRef.close();
	},
}

因为我代码中的弹窗样式是自己写的，所以最后就没有用组件。

问题三：如何写原生的函数对象

在uni-app中我们直接在函数中写$event就行，但是在uni-appx中，因为类型的判断，不可以那样写

<text class="text" @click="openPopup($event as UniEvent,'privacy')">《隐私政策》</text>

const openPopup = (e : UniEvent, t : string) => {
    e.stopPropagation();
    open.value = true
    type.value = t
}

父子组件传值

父组件中的写法和原来uni-app中一样

因为我是在根目录下的components中创建的子组件，所以在uni-appx中，父组件引入省略了引入的操作，如果不是这样的写法，需要手动引入，请查看官网中的介绍。

<privacy-popup v-if="open" ref="popupRef" :open="open" :type="type" @onClose="closePopup"></privacy-popup>

子组件中用组合式API的写法

const props = defineProps({
    type: {
        type: String,
        default: "privacy"
    },
    btnMessage: {
        type: String,
        default: ""
    },
    open: {
        type: Boolean,
        default: false
    },
})

// onClose 在父组件中的函数名
const emit = defineEmits(['onClose'])

const onCancel = () => {
    emit('onClose', false, props.type)
}
const onOk = () => {
    emit('onClose', true, props.type)
}