uniapp 学习笔记

VUE 学习笔记

布局

html 复制代码
横向布局
<style>
H(){
display: flex;//创建 布局管理器
flex-direction: row; //方向 row垂直
flex-wrap: wrap;//显示不下是否换行
}

//居中
.center(){
    display:flex; 
		justify-content: center;//垂直居中 竖向
		align-items: center;//水平居中 横向
}

.border{
		border:2rpx solid red;//边框&颜色
		border-radius: 50rpx;//圆角
		background-color: white;//背景色
		box-shadow: 8rpx 8rpx 8rpx 0rpx red  //阴影 x偏移 Y偏移 半径 扩展宽度 颜色
	}

</style>

list用法 如果item.name 不生效 换成 item["name"]

html 复制代码
<view v-for="(item,i) in list" :key="i" @click="itemOnClick(i)">
<image style="height: 20rpx;width: 20rpx;" :src="item.icon"></image>
<view style="font-size: 34rpx; color: white" >  索引值:{{item.name}}</view>
					<view style="font-size: 34rpx; color: white" >  索引值:{{item.title}}</view>
</view>
export default {
		data() { 
			return {
				title: 'Hello',
				list:[{
					id:0,
					name:"111",
					title:"测试标题111"
				},
				{
					id:1,
					name:"222",
					title:"测试标题222"
				},
				{
					id:3,
					name:"333",
					title:"测试标题333"
				}
				]
			}
			
		}

组件的引入

import 别名 from '地址'

components:{

别名

}

view的创建和移除 v-if="" true 创建 false 移除

html 复制代码
<template>

    <indexs v-if="true"></indexs>//v-if 控制是否创建

</template>
<script>
	import indexs from '../index.vue'
	components: {
			indexs
		}
</script>

view的显示和隐藏 v-show ="" true 显示 false 隐藏

html 复制代码
<template>

    <indexs v-show="true"></indexs>//v-show 控制是否显示

</template>
<script>
	import indexs from '../index.vue'
	components: {
			indexs
		}
</script>

输入框 input

html 复制代码
<input password="true"  placeholder="请输入密码" v-model="userPwd">
</input>

数据存储

html 复制代码
<script>
mounted(){//页面首次进来
   uni.setStorageSync("userName",this.userName);//同步存储数据
			this.userName = uni.getStorageSync("userName");//同步获取数据
			this.userPwd = uni.getStorageSync("userPwd");
		}
</script>

网络请求 UNIApp

地址('https://blog.csdn.net/Spy003/article/details/130979354')

java 复制代码
const BASE_URL = 'https://用你自己的url替换'; // 设置基本请求 URL
 
const requestInterceptor = (config) => {
    // 添加请求拦截逻辑
    // 在这里可以对请求进行处理,例如添加请求头、签名等
    config.header = {
        ...config.header
    };
    return config;
};
 
const responseInterceptor = (response) => {
    // 添加响应拦截逻辑
    // 在这里可以对响应进行处理,例如处理错误码、数据解析等
    if (response.statusCode === 200) {
        return response.data;
    } else {
        throw new Error('Request failed with status code ' + response.statusCode);
    }
};
 
 
const request = (config) => {
    const requestConfig = {
        ...config,
        header: requestInterceptor(config).header,
        url: BASE_URL + config.url,
    };
 
    return new Promise((resolve, reject) => {
        uni.request({
            ...requestConfig,
            success: (res) => {
                try {
                    const responseData = responseInterceptor(res);
                    resolve(responseData);
                } catch (error) {
                    reject(error);
                }
            },
            fail: (err) => {
                reject(err);
            },
        });
    });
};
 
export const get = (url, params = {}) => {
    const config = {
        url,
        method: 'GET',
        data: params,
    };
 
    return request(config);
};
 
export const post = (url, data = {}) => {
    const config = {
        url,
        method: 'POST',
        data,
    };
 
    return request(config);
};
相关推荐
能不能别报错13 分钟前
K8s学习笔记(十四) DaemonSet
笔记·学习·kubernetes
报错小能手14 分钟前
linux学习笔记(19)进程间通讯——消息队列
linux·笔记·学习
进击的圆儿15 分钟前
【学习笔记05】C++11新特性学习总结(下)
c++·笔记·学习
低音钢琴1 小时前
【碎片化学习】工具文:计算机通用术语中常见的100个英文单词
学习
笨笨狗吞噬者1 小时前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
聪明的笨猪猪2 小时前
Java Spring “IOC + DI”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
im_AMBER3 小时前
Web 开发 24
前端·笔记·git·学习
源码集结号3 小时前
一套智慧工地云平台源码,支持监管端、项目管理端,Java+Spring Cloud +UniApp +MySql技术开发
java·mysql·spring cloud·uni-app·源码·智慧工地·成品系统
递归不收敛4 小时前
吴恩达机器学习课程(PyTorch 适配)学习笔记:3.4 强化学习
pytorch·学习·机器学习
烧冻鸡翅QAQ4 小时前
考研408笔记
笔记·考研