uni-app 学习总结

最新推荐文章于 2025-02-28 17:02:26 发布

sz_09

最新推荐文章于 2025-02-28 17:02:26 发布

阅读量802

点赞数

分类专栏： uni-app

本文链接：https://blog.youkuaiyun.com/sz_09/article/details/105998200

版权

uni-app 专栏收录该内容

1 篇文章

订阅专栏

这篇博客总结了uni-app开发过程中遇到的一些问题和解决办法，包括如何设置背景图、处理提示信息、进行接口请求、实现点击延时跳转、图片轮播功能、密码显示隐藏以及本地图片转base64编码上传等。尽管遇到不少坑，但通过实践对uni-app有了更深入的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.关于设置背景图问题

uni-app不支持在css中设置背景图，可以设置图片的base64编码

<view :style="{backgroundImage:'url('+imageBase64+')',backgroundSize: 'cover'}"></view>

//其中imageBase64就是64编码

2.uni-app中提示

uni.showToast({
    title: '提示文字',
    duration: 3000,
    icon:'none'
});

3.接口请求

uni.request({
    url:'',
    data:'',
    method:'',
    success:(res)=>{
        console.log(res);
    }
})

4.点击延长跳转

setTimeout(function () {
    uni.navigateTo({
        url:"../index/index"
    })
}, 4000);

5.uni-app中图片轮播

<view class="uni-margin-wrap">
    <swiper class="swiper":indicator-dots="indicatorDots" :autoplay="autoplay" :loop="loop" :interval="interval" :duration="duration">
        <swiper-item v-for="(item,index) in bannermsg" :key="index" >
            <view @tap="barurl(item.url)" class="swiper-item">
                <image class="swiper-image" :src="item.picture" mode="scaleToFill"></image>
            </view>
        </swiper-item>
    </swiper>
</view>



//css部分
.uni-margin-wrap {
    height:100%;
    margin:0 0upx;
}
.swiper {
    height: 337upx;
}
.swiper-item {
    display: block;
    line-height: 337upx;
    text-align: center;
}
/*图片宽度设置100% ，高度300upx（设为auto图片无法显示）*/
.swiper-image{  
    width:100%;  
    height:337upx; 
}

6.密码框右侧眼睛的及密码是否展示

<view class="intbox">
    <view class="intboxri">
        <image src="../../static/Locked.png"></image>
		<text>密码：</text>
	</view>
	<view class="input-box-center" >
		<input @input="passwordkey" placeholder="请输入您的密码" type="text" :value="passwordval"  v-show="isShowEye"/>
		<input @input="passwordkey" placeholder="请输入您的密码" type="password" :value="passwordval" password="true" v-show="!isShowEye"/>
	</view>
	<view class="pasImg left password-control" @click="passwordClick">
		<image v-show="isShowEye" src="../../static/Eye.png"></image>
		<image v-show="!isShowEye" src="../../static/Eyeon.png"></image>
	</view>
</view>

data(){
    return {
		passwordval:'',
		isShowEye:false//是否显示密码
    }
},

passwordClick() {
    this.isShowEye = !this.isShowEye;
},

7.uni-app中本地选择图片转码后，将base64编码发送给后台

//引入插件image-tools    https://ext.dcloud.net.cn/plugin?id=123
import { pathToBase64, base64ToPath } from '@/js_sdk/gsq-image-tools/image-tools/index.js'

uni.chooseImage({
    count: 1,
	success: function (res){
	    let path=res.tempFilePaths[0];
		pathToBase64(path)
			.then(base64 => {
			    uni.request({
					url: url, 
					method:'POST',
					data: {
						picture:base64,
					},
					success: (res) => {
						console.log(res);		
					}
				});
			})
			.catch(error => {
				console.error(error)
			})
		}
});

坑还是比较多的，虽然我做的功能比较简单！！！