uni-app打包小程序的一些趣事~

$程2024-07-04 8:24

前言

Huilderx版本：4.15

uni-app Web端版本：3.4.21

问题1

Web端/APP端样式好好的，打包微信小程序就乱了咋整？

使用::v-deep/::deep/deep(){}都是没用滴~~

原因？

解决：

复制代码

<script lang="ts">
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>

问题2

Web端/APP端$attrs支持，但当前uni-app版本打包小程序不支持咋搞？

只能通过属性传入喽~

解决：

复制代码

普通属性：

defineProps(['aa', 'bb', 'cc']);
//或者
defineProps({
  a: {
    type: String,
    default: 'vvv',
  },
});

//或者
defineProps<{ a: String }>();


自定义事件：

defineEmits(['a','b'])

问题3

目前uni-app版本打包小程序不支持defineModel，怎么好用的hook不能玩咋搞？

解决：

复制代码

父组件：

const val = ref('hello')
const handleInput = (val)=>{
val.value = val
}
<Input :val="val" @handleInput="handleInput"></Input>


子组件：

defineProps(['val'])

const emits = defineEmits(['handleInput'])

const handleInput = (event)=>{
    const val = event.detail.value.trim()
    emits('handleInput',val)

}
<input v-model="val" @input="handleInput"/>

最后

uni-app开发的一些趣事~