Uni-App安装及其使用

最新推荐文章于 2024-10-02 21:20:07 发布

猿究院+

最新推荐文章于 2024-10-02 21:20:07 发布

阅读量182

点赞数 1

文章标签： typescript 学习 javascript

本文链接：https://blog.csdn.net/qq_73638669/article/details/142366726

版权

uni-app

微信环境搭建

在这里插入图片描述

安卓环境搭建

安装模拟器：

夜神 62001

海马 26944

MUMU 7555

天天 6555

在模拟器的安装路径中搜索adb.exe程序
在这里插入图片描述
添加到环境变量中

可以在 adb的目录下键入cmd
在这里插入图片描述

SCSS

Sass是财通 Ruby语言编写的一套CSS预处理语言。2007诞生。

最初是为了配合HAML（一种缩进式的HTML预编译器）

Sass和Scss其实是一种东西，区别：

1.扩展名不同

2.语法书写方式不同

Sass是以严格的缩进式语法书写，不带打括号{},

Scss书写语法与Css语法非常类似。

Scss的优势：

1.完全兼容所有版本的css

2.丰富的特征，Scss比css有更多的语法


<style scoped lang="scss">
	/* css中显示 */
	// css中不显示
	/* 重要注释   压缩不会被删除!*/


	//声明变量
	//$+变量名 + : +变量值;
	$color :#f00;
	$width: 200px;

	.box1 {
		width: $width;
		height: 50px;
		border: 5px solid $color;
	}

	//占位符
	//使用%声明代码块  如果不被@extend 就不会被编译
	//如果被编译了会和其他的代码块 合并
	%box3 {
		background-color: pink;
	}

	.box2 {
		//继承box1中的所有样式
		@extend .box1, %box3;

		text-align: center;
		line-height: 50px;

		text {
			color: white;

			@if 1+1>3 {
				font-size: 30px;
			}
			@else{
				font-size: 24px;
				border: 2px dashed greenyellow;
			}
		}
		// uni-app  upx 作为默认的尺寸单位
		//upx 根据屏幕的尺寸的宽度进行自适应

	}
</style>

引入阿里矢量图库

阿里矢量图库》》》图标》》》加入购物车》》》我的项目》》下载生成代码

解压》》iconfont.css .ttf .woff .woff2

iconfont.css :
在这里插入图片描述
替换顶部的内容添加https:

<text style="font-size: 100upx;color: red;" class="iconfont">&#xe60f;				</text>
<text style="font-size: 100upx;" class="iconfont icon-weixinzhifu"></text>

安装 UView—UI\

在这里插入图片描述

官网：https://uviewui.com/

请求

1.配置代理

在根目录创建vue.config.js
module.exports = {
	devServer: {
		proxy: {
			'/dev': {
				target: 'http://doctor.apesource.cn:8009',
				ws: false,
				changeOrigin: true,
				pathRewrite: {
					'^/dev': ''
				}
			}
		}
	}
}
发起请求：
psot 并参数接受为表单格式：header:{'content-type':'application/x-www-form-urlencoded'},
	uni.request({
				url: "/dev/doctor/executeDoctorList",
				method: "GET",
				data: {
					"page_number": 1
				},
				timeout:3000,
				success: (res) => {
					console.log("请求成功：", res);
				},
				fail: () => {
					console.log("请求失败");
				},
				complete: () => {
					console.log("一定执行");
				}
			})

跨域配置2：
在这里插入图片描述