Uni-app
uni.request
使用中经常出现，赋不上初值的问题，需要在刷新时才能获取到数据，解决方法就是在需要该数据的前一个页面就要加上请求语句，获取到所有的数据（clock的bug QAQ）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| uni.request({
url: 'http://localhost:8181/target/delete',
method: "POST",
data: {
targetName: state.targetWithTime[index].targetName,
ifPoints: 1,
},
success: (res) => {
console.log(res)
state.targetWithTime.splice(index, 1);
user.data.point = res.data.data.targetPoint
}
})
|
uni.showToast
1
2
3
4
5
|
uni.showToast({
icon: "none",
title: '密码错误'
});
|
uni.redirectTo
1
2
3
4
|
uni.redirectTo({
url: '../../pages/index/Time'
});
|
1
2
3
4
5
6
7
8
9
10
| <template>
<!--enable-flex为允许设置flex布局-->
<scroll-view class="tagMenuList" scroll-x="true" enable-flex="true">
<view :class="item.className" v-for="(item, index) in state.tagWithTime" :key="index" @click="classChange(index)">
<view class="tagMenuListDP">
<text>{{ item.tagName }}</text>
</view>
</view>
</scroll-view>
</template>
|
swiper
需要搭配swiper-item作为滑动的内容
注意该组件可能z-index有所设置，如果下面再加内容可能被覆盖
注意设置@change=”changeswiper”和 :current=”state.currentswiper”避免报错:[渲染层错误] [Component] : current 属性无效，请修改 current 值的报错（不是很理解）
注意swiper大多数情况下都需要整体都比swiper-item的内容大一些
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <template>
<!--easing-function为动画效果-->
<swiper class="swiper" autoplay="true" easing-function="easeInOutCubic" @change="changeswiper" :current="state.currentswiper">
<swiper-item v-for="(item, index) in state.storeWithTime" :key="index">
<view class="StoreDetail">
<view class="StoreDetailI">
<image src="https://img1.imgtp.com/2023/05/23/d3gU1S46.svg"
style="width: 606rpx;height: 606rpx;position: absolute;" />
</view>
<view class="StoreDetailP">
<text>{{ item.storeName }}</text>
<text>{{ item.storeDescribe }}</text>
<text>{{ item.storeHour }}小时{{ item.storeMinute }}分钟</text>
</view>
<view class="StoreDetailPrice" @click="storeWithTimeDelete(index)">
<image src="@/static/coin.svg" style="width: 34rpx;height: 34rpx;" />
<text>X{{ item.storePoint }}</text>
</view>
</view>
</swiper-item>
</swiper>
</template>
<script setup>
//下面的代码是应对[渲染层错误] [Component] <swiper>: current 属性无效，请修改 current 值的报错（不是很理解）
const currentswiper = () => {
state.currentswiper = this.detail.currentswiper
}
</script>
|
需要用ref进行整体响应化，并调用其中的方法来控制关闭和控制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <template>
<uni-popup ref="popup" type="dialog">
<!--mode="base"为对话框加两个按钮的形式-->
<!--before-close为是否拦截按钮事件，如为true，则不会关闭对话框，关闭需要手动执行 uni-popup 的 close 方法-->
<uni-popup-dialog type="error" mode="base" title="确定要放弃吗?" content="本次计时将不会得到任何分数" :duration="2000" :before-close="true"
@close="close" @confirm="confirm"></uni-popup-dialog>
</uni-popup>
</template>
<script setup>
let popup = ref(null); //记着赋初值，本质是reactive({value:null})
const timeEnd = () => {
popup.value.open() //记得.value然后调用函数
}
const confirm = () => {
popup.value.close()
}
const close = () => {
popup.value.close()
}
</script>
|
uni.uploadFile
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script setup>
uni.uploadFile({
url: url + '/user/uploadFile', //后台接口
filePath: state.avatarUrl, // 上传图片 url
name: 'file',
// formData: this.formData,
header: {
'content-type': 'multipart/form-data'
}, // header 值
success: (res) => {
const responseData = JSON.parse(res.data); // 解析JSON字符串为对象
user.data.picData = responseData.data.picData
state.avatarUrl = `data:image/jpeg;base64,${user.data.picData}`//转化为链接
},
});
</script>
|
uni.showLoading
必须配合uni.hideLoading()
1
2
3
4
5
6
7
8
9
| <script setup>
const WxLogin = () => {
uni.showLoading({
title: '微信登录中...'
});
uni.hideLoading();
}
</script>
|
