- 在VisualStudio中部署GDAL库的C++版本(包括SQLite、PROJ等依赖)
- Android开机流程介绍
- STM32CubeMX教程31USB_DEVICE-HID外设_模拟键盘或鼠标
- 深入浅出Java多线程(五):线程间通信
已经用 uni-app+vue3+ts 开发了一段时间,记录一下日常遇见的问题和解决办法 。
uni-app 是支持多端,如果你想让你的代码,只在部分平台使用,那么就需要用的它的单端处理语法 //#ifdef 和 //#ifndef 等.
//#ifdef xxx
只在xxx平台生效//#ifdef MP-WEIXIN
menuButtonInfo = '微信'
//#endif
//#ifndef xxx
除了xxx平台,其他都生效//#ifndef MP-WEIXIN
menuButtonInfo = '只要不是微信,其他都可以'
//#endif
因为有异形手机屏的存在,最顶部有摄像头,最下面有导航条,为了避免界面内容出现在这些位置,所以每次在界面初始要设置安全边距.
<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<template>
<view class="specification-panel flex-column" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
<!-- 底部导航 -->
<view class="bottomNav" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"></view>
</view>
</template>
由于微信小程序右上角有微信胶囊,很多时候我们为了保持界面整齐,需要获取微信胶囊的位置,来让我们得元素和它对齐.
// 微信胶囊一定处于安全位置,所以有微信胶囊就拿胶囊的位置,否则再去获取安全边距
export const safeTop = () => {
const { safeAreaInsets } = uni.getWindowInfo()
// 获取胶囊信息 https://uniapp.dcloud.net.cn/api/ui/menuButton.html#getmenubuttonboundingclientrect
let menuButtonInfo = { top: 0 }
//#ifdef MP-WEIXIN
menuButtonInfo = uni.getMenuButtonBoundingClientRect()
//#endif
const top = menuButtonInfo.top || safeAreaInsets?.top
return {
top
}
}
全局组件 目前只能在 src/pages.json 里配置,代码如下:
// 组件自动导入
"easycom": {
// 开启自动扫描
"autoscan": true,
"custom": {
// 使用了uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
// 自定义组件,需要使用正则表达式
"^Weiz(.*)": "@/components/Weiz$1/index.vue"
}
}
使用的时候,直接在界面使用即可,无需再导入.
<WeizCarousel class="categories-banner" size="small" />
有的时候我们需要去拿到界面元素的相关信息,然后进行一些处理,uni-app 提供了相关API,但需要和 vue3 配合使用 。
<script setup lang="ts">
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const getNodeInfo = () => {
const query = uni.createSelectorQuery().in(instance)
query
.select('.similar') // 获取界面元素,也可以传id
.boundingClientRect((data) => {
const nodeInfo: UniApp.NodeInfo = data as UniApp.NodeInfo
console.log(nodeInfo)
})
.exec()
}
</script>
是的你没看错,不需要给元素设置 ref 。
url 跳转界面有两种方式,一种是使用 navigator 标签,一种是使用 uni.navigateTo 方法。 需要注意的是url有长度限制,太长的字符串会传递失败,而且参数中出现空格等特殊字符时需要对参数进行编码,如使用 encodeURIComponent 等.
uni.navigateTo({
url: 'pages/test?id=1&name=uniapp'
});
或者 。
<script setup lang="ts">
const item = ref({ id: 1, name: 'uniapp' })
</script>
<template>
<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
</template>
在 pages/test 界面 。
onLoad: function(option) {
console.log(option.id, option.name)
// 如果传递的是经过编码的参数
const item = JSON.parse(decodeURIComponent(option.item));
}
子组件:
<script setup lang="ts">
// 使用 defineProps 来接受参数,非必要参数使用 xxx? 的形式
defineProps<{
title: string
subTitle?: string
}>()
</script>
<template>
<view class="weiz-title">
<view class="title">{{ title }}</view>
<view class="sub-title">{{ subTitle }}</view>
</view>
</template>
父组件:
// 由于是全局组件,所以无需再引入,如果不是全局组件,需要单独引入 <WeizTitle title="详情" />
如果参数比较复杂,可以直接用 TS 去定义类型,下面举例:
子组件:
<script setup lang="ts">
// 引入参数类型
import type { CategoryItem } from '@/types/api'
// 定义 props 接收数据
defineProps<{
list: CategoryItem[]
}>()
</script>
父组件:
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 引入数据类型
import type { CategoryItem } from '@/types/api'
// 引入接口
import { getCategoryIndexAPI } from '@/api/category'
// 定义响应式数据
const categoryList = ref<CategoryItem[]>([])
// 获取数据方法
const getCategoryList = async () => {
const res = await getCategoryIndexAPI()
// 拿到数据赋值
categoryList.value = res.result
}
// 调用方法
onLoad(() => {
getCategoryList()
})
</script>
<template>
<WeizCategory :list="categoryList" @refresh="getCategoryList" />
</template>
父调子需要子组件通过 defineExpose 暴露方法给父组件,然后父组件拿到子组件实例再去调用子组件方法.
// 定义方法
const getCurrentSpec = () => {
return currentSpec.value
}
// 暴露方法给父组件
defineExpose({
getCurrentSpec
})
可参考章节 TS 相关 - 定义组件实例类型,调用子组件需要先拿到子组件的实例,拿到实例后直接调用即可.
// 拿到子组件实例 WeizCategoryInstance 需要我们去 ts 里定义
const weizCategory = ref<WeizCategoryInstance>()
// 调用子组件实例的方法
weizCategory.value.getCurrentSpec()
子调父方法,需要父组件去给子组件添加自定义事件,然后子组件通过 defineEmits 去触发.
<script setup lang="ts">
const handleUpdate = (value: string) => {
console.log('拿到子组件的传值,并且调用了父组件', value)
}
</script>
<template>
<WeizCategory :list="categoryList" @update="handleUpdate" />
</template>
defineEmits
<script setup lang="ts">
import { ref, defineEmits } from 'vue'
const message = ref('子组件的值')
const popupEmit = defineEmits(['update'])
function sendMessage() {
popupEmit('update', message.value)
}
</script>
<template>
<div>
<button @click="sendMessage">触发父组件方法</button>
</div>
</template>
定义组件实例类型文件 xxx.d.ts 。
// 导入组件
import WeizCardList from '@/components/WeizCardList/index.vue'
// 什么全局类型
declare module 'vue' {
export interface GlobalComponents {
WeizCardList: typeof WeizCardList
}
}
// 导出组件实例类型, 需要用到 InstanceType
export type CardListInstance = InstanceType<typeof WeizCardList>
在 vue 页面里使用:
// 导入组件实例类型
import type { CardListInstance } from '@/types/components'
// 拿到组件实例
const cardList = ref<CardListInstance>()
// 调用组件实例的方法
cardList.value?.resetData()
最后此篇关于uni-app+vue3会遇到哪些问题的文章就讲到这里了,如果你想了解更多关于uni-app+vue3会遇到哪些问题的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我对 c# 有点陌生,我在尝试围绕这个 if-then 语句尝试实现时遇到了一些麻烦。 这是我的目标:当用户将订单输入系统时,将为每个订单创建一个唯一的 orderID。但是,一些附加功能是用户可以选
我已经搜索了这个特定的错误,发现根本问题涉及循环计数错误并导致程序超出数组的界限。 但是,当我将每个数组降低到数组开始丢失输出数据的程度后,它继续抛出相同的错误。我对 C/C++ 仍然是新手,但任何对
我不明白为什么我运行这个小程序时屏幕上没有任何显示? while 循环甚至开始了吗? #include #include int main() { char word[20]; char
我接手了一个用 Perl 编写的项目,它有一些依赖项,例如 Template::Toolkit , Image::ExifTool , 和 GD仅举几例。目前,这些依赖项使用 --prefix 构建到
我想对一个字段进行累积总和,但只要遇到 0 就重置聚合值。 这是我想要的一个例子: data.frame(campaign = letters[1:4] , date=c("jan","
不久前,该项目的 gradle 构建运行良好,但现在一直失败并显示以下错误(带有 --info 标志的输出): Starting process 'Gradle Test Executor 1'. W
我是编程新手,想用 Java 制作一个掷骰子程序来执行。代码如下: import java.math.*; public class Dices { public static int dice1=0
这个问题已经有答案了: What is a StringIndexOutOfBoundsException? How can I fix it? (1 个回答) 已关闭 5 年前。 我对 Java 完
这个方法一直抛出标题中的异常,我找不到原因,我已经通过连接创建了其他表,并且所有引用的表都已创建。我正在使用嵌入式JavaDB . private void createEvidenceTable()
我刚开始上课,这是我第三次尝试上课。我遇到了一个 NameError,我真的不知道如何解决。看看我的程序,看看你能不能帮忙。 import random import math import pyga
好吧,这是我的困境,我向 JFrame 添加了三个面板。第一个(不可见)第二个(可见)和第三个(不可见)..我使用第一个面板作为菜单,当您选择一个选项时,第一个面板被制作(可见),然后第三个面板被制作
我的部分代码遇到问题。如果我选择选项 A,它会运行并给我正确的答案,但是,如果我选择选项 S 或 M,它不会给我任何结果,只会去到它应该去的地方。已经尝试将 if 更改为 else if,但它显示“预
我这里有一些代码,但我正在努力解决它,因为我似乎无法掌握这个文件指针的东西。我对使用文件还很陌生。我见过类似的其他问题,并且尝试了对其他人有效的解决方案,但由于某种原因它们对我不起作用。这是出现问题的
我们有一个很大的应用程序,我们已经将 TODO 规则添加到质量门中,如果发现 TODO 注释,它会给出错误。如果我们只是删除 TODO 注释(这很可怕),它会起作用,但添加 TODO 注释的整个目的就
我正在尝试编写一个名为 isVowel 的函数,它接受一个字符(即长度为 1 的字符串)并在它是元音、大写或小写时返回“true”。如果该字符不是元音字母,该函数应返回“false”。 这看起来应该可
我一直在努力完成我正在做的这个小项目,但由于某种原因它无法正常工作。 问题是当我第一次访问该页面并单击出现在主要部分中的第一个链接时,它会根据需要显示弹出框。现在,当我点击另一天,例如星期天并尝试点击
我正在尝试制作一个 WPF 应用程序。我的窗口内有一个数据网格。我制作了另一个窗口,将新数据添加到我的数据网格中。虽然它按照我想要的方式工作,但我不断遇到异常。我的 MySQL 代码: using S
我试图在我似乎无法使 NSUserDefaults 正常工作的程序中保存几个首选项。如果有人可以查看我的代码并查看是否有任何错误,我们将不胜感激 NSString *kGameIsPaused = @
设置 SymmetricDS版本是3.9.1(也试过3.9.0) 设置是从 postgres 9.5.3 到 postgres 9.5.3 Windows 10 pc(客户端节点)到 Windows
经过长时间的努力,我终于(差不多)完成了我的java菜单程序。但是,我无法让我的返回更改功能在我的代码末尾工作。它给出了非常奇数的数字。有什么想法吗? 代码: import java.io.*; im
我是一名优秀的程序员,十分优秀!