Uni-App-02 - 技术栈

条件编译

条件编译概念

不同的运行平台终归有些专有的特性，无法实现跨平台完全兼容，例如：微信小程序导航栏右上角的关闭图标。

uni-app提供了一种"条件编译"机制，可以针对特定的平台编译执行特定的代码，否则不执行。

条件编译语法

语法如下：

#ifdef H5 仅在H5平台下编译执行的代码 #endif
#ifdef H5 \|\| APP \|\| MP-WEIXIN 仅在H5和APP和微信小程序平台下编译执行的代码 #endif
#ifndef H5 仅在非H5平台下编译执行的代码 #endif

说明：

①条件编译语句可以编写在template / style / script 等各类代码中。

②更多的条件编译平台可以参见手册：https://uniapp.dcloud.io/platform

条件编译示例

html中使用

js中使用

css中使用

项目开发准备

标准开发流程

大型项目的软件生命周期：

	阶段名称	负责人	主要内容	主要产出
1	可行性研究	产品经理、项目经理、项目设计师	技术、人员、时间、资金、投入产出比、政策法规、风俗、用户	《可行性研究报告》
2	需求分析	需求分析师	功能性需求点：要完成的功能非功能性需求点：性能、安全、可用性	《需求规约》《需求规格说明书》
3	概要设计	项目架构师	系统结构、网络、硬件、前端、后端、子系统、模块、技术选型	《概要设计说明书》
4	详细设计	项目设计师	页面体系、功能体系、组件、类、方法和属性、具体算法	《详细设计说明书》
5	开发实现	UI设计师前端工程师后端工程师	出设计图、编写前端页面、前后端联调编写后端接口、前后端联调	《开发卷宗》《开发日志》
6	测试	测试工程师	测试功能性需求、非功能性需求	《测试报告》
7	项目部署	项目实施工程师	布置网络环境、硬件设备、软件环境、项目部署	《项目实施报告》
8	维护阶段	系统运维工程师	监控系统性能、安全、小功能点维护	《项目运维日志》

小型项目的简化版流程：

	阶段名称	负责人	主要内容	主要产出
1	项目设计	项目架构师/设计师/产品经理	体系结构、前后端技术选型、子系统划分、模块化、功能点设计	《项目原型设计》
2	UI设计	UI/UE设计师	图标、图片、页面布局、用户交互反馈	《项目设计稿》
3	前端开发	前端开发工程师	编写页面、调用后台接口数据	《项目开发日志》
4	后端开发	后端开发工程师	编写数据库、开发后台接口、实现业务逻辑	《项目开发日志》
5	测试	测试工程师	手工测试、自动化测试各项功能、非功能	《测试报告》
6	部署实施	项目实施工程师	搭建软硬件环境、部署项目、监控性能

项目前端团队每日的工作流程：

人员	工作内容
项目创始人	①创建空白项目 ②创建所有必需的页面组件（pages），分配好路由词典 ③创建所有必需的公共组件（components），每个组件的功能说明完成 ④创建后台接口的封装模块，规定好每个方法的名称/参数/返回值 ⑤创建全局的样式变量、公共样式 ⑥把上述内容提交的项目仓库
项目组员	①早上：开晨会，讲解项目背景、目标任务，分解职责 ②上午：拉取项目仓库中的内容到本地仓库，开始一天的工作 ③晚上：把自己的工作成果提交公共仓库，下班回家 ④第二天早上：开晨会，汇总进度、目标任务，分解职责 ⑤第二天上午：从公共仓库拉取最新内容，开始一天的工作 ...

开发流程手册

配置uni.scss

uni.scss中配置了全局样式变量用于在其他页面中引用，便于统一管理

很多第三方组件也会使用此处的样式变量

/* 颜色变量 */
$zh-theme-color: #090;				//智慧社区项目的主题色
$zh-theme-color-light: #6EDA0C;		//主题色的浅色
$zh-theme-color-lighter: #7AC67A;	//主题色的更浅色
$zh-theme-color-inverse: #CCCC99;	//主题色的反色
$zh-theme-grey-dark:#000000;		//主题灰的深色
$zh-theme-grey:#363636;				//主题灰
$zh-theme-grey-light:#8A8A8A;		//主题灰的浅色
$zh-theme-grey-lighter:#F2F2F2;		//主题灰的更浅色

/* 行为相关颜色 */
$uni-color-primary: #007aff;		//TODO: 此值应该根据设计稿进行修改
$uni-color-success: #4cd964;		//TODO: 此值应该根据设计稿进行修改
$uni-color-warning: #f0ad4e;		//TODO: 此值应该根据设计稿进行修改
$uni-color-error: #dd524d;			//TODO: 此值应该根据设计稿进行修改

/* 文字基本颜色 */
// $uni-text-color:#333;			//基本色
$uni-text-color: $zh-theme-grey;	//基本色，#363636
$uni-text-color-inverse:#fff;		//反色
// $uni-text-color-grey:#999;		//辅助灰色，如加载更多的提示信息
$uni-text-color-grey:$zh-theme-grey-light;			//辅助灰色，#8A8A8A
// $uni-text-color-placeholder: #808080;
$uni-text-color-placeholder: $zh-theme-grey-light;  //#8A8A8A
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
// $uni-bg-color-grey:#f8f8f8;
$uni-bg-color-grey:$zh-theme-grey-lighter;	//#f2f2f2
$uni-bg-color-hover:#f1f1f1;				//点击状态颜色	
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);		//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;					//边框颜色
$uni-border: 1px  solid  $uni-border-color;	//边框样式

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;						//注意：此处需要补全px

/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;

/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 5px;				//横向间距-小号(small)
$uni-spacing-row-base: 10px;			//横向间距-中等号
$uni-spacing-row-lg: 15px;				//横向间距-大号(large)

/* 垂直间距 */
$uni-spacing-col-sm: 4px;				//纵向间距-小号
$uni-spacing-col-base: 8px;				//纵向间距-中等号
$uni-spacing-col-lg: 12px;				//纵向间距-大号

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;

配置全局样式App.vue

1、uni-app支持的尺寸单位：em、vw/vh、%、px、rpx

2、多个页面或组件共享的样式变量编写在 uni.scss；

3、多个页面或组件共享的样式编写在 App.vue；

4、uni-app中禁止使用 * { } 选择器 ------ 小程序不支持；使用 :not(not){ } 来代替

5、uni-app中禁止使用 body { } 选择器 ------ 小程序不支持；使用 page{ } 来代替

6、uni-app或所有的移动端应用中，推荐在容器上使用"弹性布局"

<!-- 注意：此处必须声明使用SCSS！！否则无法使用SCSS变量！！ -->
<style lang="scss">
	/*每个页面共用的公共样式 */
	//选择所有的元素
	:not(not) {
		//提示：uni-app提供的内置组件默认都不带内外边距
		//简化盒子模型的计算方案，由默认的内容盒子改为边框盒子
		// box-sizing: content-box;//默认值，总宽度=margin+bordder+padding+width
		box-sizing: border-box;  //总宽度=margin+width
	}
	//选择每个页面的根元素（用page代替body)
	page {
		background-color: $uni-bg-color-grey;
	}
	//选择所有的容器元素，都采用弹性布局
	view {
		//显示模式：弹性容器
		display: flex;
		//弹性容器中的子元素主轴方向：横向
		flex-direction: row;
	}
	//选择每个页面最外层的容器元素，弹性主轴改为纵向
	view.content {
		//弹性容器中子元素的排列主轴方向：纵向
		flex-direction: column;
	}
</style>

小程序、uni-app支持的全新尺寸单位：Responsive Pixel ------ rpx，响应式像素数

因为不同的手机屏幕尺寸不同，如果做适配的话，传统的尺寸很麻烦；小程序引入了全新的尺寸单位，rpx ------ 不论实际物理屏幕尺寸有多大，一律认为是750rpx

320px <=> 750rpx

360px <=> 750rpx

414px <=> 750rpx

这样一来，假设有个图片占屏幕宽度一半，width应该设定为 750rpx/2 = 375rpx

小测验：

有个按钮在360px的屏幕下，显示宽度是200px；如果转换为rpx的话，应该是多少？

360px 750rpx

-------- = -------- ? = 750*200/360 = 416.667

200px ?rpx

登录功能开发

状态栏开发

<!-- F1：手机系统状态栏设定 -->
<view class="status-bar" :style="{height: statusBarHeight+'px'}"></view>

<script>
	export default {
		data(){
			return {
				statusBarHeight: 0,		//系统状态栏高度
			}
		},
		//生命周期方法 ------ 页面挂载完成
		onLoad(){    //此处此方法类似于mounted()
			//console.log('login组件挂载完成')
			//获取系统信息，读取其中的"状态栏高度"
			let {statusBarHeight} = uni.getSystemInfoSync()
			// console.log('屏幕高度：', screenHeight);
			this.statusBarHeight = statusBarHeight
		},
		methods: {
		}
	}
</script>

.status-bar {
	background-color: $zh-theme-color;
	width: 750rpx;		//宽度占满一整行
	//height: 30rpx;		//高度：临时
	position: fixed;	//固定定位
}

logo图片开发

①默认image的尺寸都是320px*240px，不论原始尺寸

②默认情况下，修改图片的宽度，高度不会自动等比例缩放

③可以指定mode="widthFix"，实现"宽度固定，高度自动等比例缩放"

<!-- F2：LOGO -->
<!-- mode：图片的缩放模式  widthFix：宽度使用指定的固定值，高度自动等比例缩放 -->
<image src="../../static/img/logo.png" class="logo" mode="widthFix"/>

.logo {
	width: 450rpx;
	// height: 450rpx;
	// block或inline-block使用左右margin:auto实现水平居中
	margin: $uni-spacing-col-lg*6   auto   0;
}

手机号输入框开发

input：输入框组件，注意：它的属性与HTML5中的input是不一样的

例如：type="text/number/digit/idcard"指定的是弹出来的键盘类型
uni-icons

扩展组件，代表图标的组件，需要提前安装

内置了大量图标可以直接使用

<!-- F3：手机号码输入框组 -->
<!-- 提示：真正的App开发中，input就是没有初始样式的，都需要自己指定 -->
<view class="input-group">
    <input class="input" placeholder="请输入手机号"/>
    <uni-icons class="icon left" type="phone-filled" size="25px" color="#090"/>
    <uni-icons class="icon right" type="clear" size="22px" color="#1296DB"/>
</view>

.input-group {
	position: relative;
	margin: $uni-spacing-col-lg*3  $uni-spacing-row-lg   0;
	//弹性容器中的子元素在交叉轴上居中对齐
	align-items: center;
	.input {
		font-size: $uni-font-size-base;
		border: 1px solid $zh-theme-color;
		border-radius: $uni-border-radius-base;
		width: 100%;
		padding: 0  $uni-spacing-row-base*3;
		height: $uni-font-size-lg*2.2;  //注意：此处不能使用line-height
	}
	.icon {
		position: absolute;
		&.left { left:$uni-spacing-row-sm; }
		&.right { right:$uni-spacing-row-sm; }
	}
}

密码输入框开发

<!-- F4：密码输入框组  -->
<view class="input-group pwd-group">
    <input :password="hidePwd" class="input" placeholder="请输入密码"/>
    <uni-icons class="icon left" type="locked-filled" size="25px" color="#090"/>
    <uni-icons class="icon right" :type="hidePwd ? 'eye-slash-filled' : 'eye-filled'"  
    	@click="hidePwd = !hidePwd" size="22px" color="#8a8a8a"/>
</view>

export default {
		data(){
			return {
				statusBarHeight: 0,		//系统状态栏高度
				hidePwd: true,			//是否隐藏密码
			}
		},
		//生命周期方法 ------ 页面挂载完成
		onLoad(){    //此处此方法类似于mounted()
			//console.log('login组件挂载完成')
			//获取系统信息，读取其中的"状态栏高度"
			let {statusBarHeight} = uni.getSystemInfoSync()
			// console.log('屏幕高度：', screenHeight);
			this.statusBarHeight = statusBarHeight
		},
		methods: {
		}
	}
</script>

.input-group {
	position: relative;
	margin: $uni-spacing-col-lg*3  $uni-spacing-row-lg   0;
	//弹性容器中的子元素在交叉轴上居中对齐
	align-items: center;
	&.pwd-group {
		margin-top: $uni-spacing-col-lg*2;
	}
	.input {
		font-size: $uni-font-size-base;
		border: 1px solid $zh-theme-color;
		border-radius: $uni-border-radius-base;
		width: 100%;
		padding: 0  $uni-spacing-row-base*3;
		height: $uni-font-size-lg*2.2;  //注意：此处不能使用line-height
	}
	.icon {
		position: absolute;
		&.left { left:$uni-spacing-row-sm; }
		&.right { right:$uni-spacing-row-sm; }
	}
}

提交按钮开发

<!-- F5：提交按钮 -->
<button class="btn" @click="doLogin">登 录</button>

.btn {
	margin: $uni-spacing-col-lg*2.5  $uni-spacing-row-lg 0;
	background: $zh-theme-color;
	color: $uni-text-color-inverse;
	font-size: $uni-font-size-base;
	//SCSS函数：darken(颜色, 百分比)，返回一个更深的颜色值
	//SCSS函数：lighten(颜色, 百分比)，返回一个更浅的颜色值
	&:active {
		background-color: darken($zh-theme-color, 5%);
	}
}

找回密码开发

navigator：导航器，功能类似于HTML5中的超链接a

<!-- F6：找回密码 -->
<!-- 导航跳转/保留跳转 -->
<navigator class="find" open-type="navigate" url="/pages/feePay/feePay">找回密码</navigator>
<!-- 重定向跳转/销毁跳转 -->
<!-- <navigator class="find" open-type="redirect" url="/pages/feePay/feePay">找回密码2</navigator> -->
<!-- 切换页签页 -->
<!-- <navigator class="find" open-type="switchTab" url="/pages/my/my">找回密码3</navigator> -->

.find {
	text-align: center;
	color: $zh-theme-color;
	margin-top: $uni-spacing-col-lg*2;
}

媒体自适应(屏幕适配)

//针对高度小于500px的屏幕，减小顶部留白
@media screen and (max-height: 500px) {
	.logo {
		margin-top: $uni-spacing-col-lg;
	}
}
//针对高度大于700px的屏幕，增大顶部留白
@media screen and (min-height: 700px) {
	.logo {
		margin-top: $uni-spacing-col-lg*12;
		margin-bottom: $uni-spacing-col-lg*4;
	}
}

登录功能实现

接口参数参考 <<智慧社区API说明书.docx>>
数据双向绑定获取电话号和密码

点击登录按钮，校验电话号密码

如果格式错误，弹出吐司提示

如果格式正确，发出Ajax请求登录用户

登录失败，弹出吐司提示

登录成功呢，跳转到主页

<!-- F3：手机号码输入框组 -->
<!-- 提示：真正的App开发中，input就是没有初始样式的，都需要自己指定 -->
<view class="input-group">
    <input v-model="phone" class="input" placeholder="请输入手机号"/>
    <uni-icons class="icon left" type="phone-filled" size="25px" color="#090"/>
    <uni-icons class="icon right" type="clear" size="22px" color="#1296DB"/>
</view>
<!-- F4：密码输入框组  -->
<view class="input-group pwd-group">
    <input v-model="pwd" :password="hidePwd" class="input" placeholder="请输入密码"/>
    <uni-icons class="icon left" type="locked-filled" size="25px" color="#090"/>
    <uni-icons class="icon right" :type="hidePwd ? 'eye-slash-filled' : 'eye-filled'"  
    	@click="hidePwd = !hidePwd" size="22px" color="#8a8a8a"/>
</view>

<script>
	export default {
		data(){
			return {
				statusBarHeight: 0,		//系统状态栏高度
				hidePwd: true,			//是否隐藏密码
				phone: "13501234567",	//用户输入的登录手机号
				pwd:"123456",			//用户输入的登录密码
			}
		},
		//生命周期方法 ------ 页面挂载完成
		onLoad(){    //此处此方法类似于mounted()
			//console.log('login组件挂载完成')
			//获取系统信息，读取其中的"状态栏高度"
			let {statusBarHeight} = uni.getSystemInfoSync()
			// console.log('屏幕高度：', screenHeight);
			this.statusBarHeight = statusBarHeight
		},
		methods: {
			async doLogin(){
				//console.log('当前输入：',this.phone, this.pwd)
				//1.验证手机号是否合法，不合法就弹出提示框，退出执行
				if(!/^1[3-9]\d{9}$/.test(this.phone)){
					uni.showToast({
						title: '手机号非法',		//提示标题
						icon: 'none',			//图标
						duration: 3000			//持续时长 
					})
					return
				}
				//2.验证密码是否合法，不合法就弹出提示框，退出执行
				if(this.pwd.length < 6){
					uni.showToast({
						title:'密码格式非法',
						icon: 'none',
						duration: 3000
					})
					return 
				}
				//3.把手机号/密码提交给服务器端数据API，进行登录验证
				let url = "https://www.codeboy.com/zhsqapi/user/list"
				let [err, res] = await uni.request({
					url
				})
				if(err){
					console.log('异步请求失败！错误原因：'+err.errMsg)
				}else {
					console.log("请求成功！服务器返回响应消息主体： " + res.data)
				}
				//4.登录成功，提示"欢迎回来"，跳转到首页
			},
		}
	}
</script>

完整代码

<template>
	<view class="content">
		<!-- F1：手机系统状态栏设定 -->
		<view class="status-bar" :style="{height: statusBarHeight+'px'}"></view>
		
		<!-- F2：LOGO -->
		<!-- mode：图片的缩放模式  widthFix：宽度使用指定的固定值，高度自动等比例缩放 -->
		<image src="../../static/img/logo.png" class="logo" mode="widthFix"/>
		
		<!-- F3：手机号码输入框组 -->
		<!-- 提示：真正的App开发中，input就是没有初始样式的，都需要自己指定 -->
		<view class="input-group">
			<input v-model="phone" class="input" placeholder="请输入手机号"/>
			<uni-icons class="icon left" type="phone-filled" size="25px" color="#090"/>
			<uni-icons class="icon right" type="clear" size="22px" color="#1296DB"/>
		</view>
		<!-- F4：密码输入框组  -->
		<view class="input-group pwd-group">
			<input v-model="pwd" :password="hidePwd" class="input" placeholder="请输入密码"/>
			<uni-icons class="icon left" type="locked-filled" size="25px" color="#090"/>
			<uni-icons class="icon right" :type="hidePwd ? 'eye-slash-filled' : 'eye-filled'"  @click="hidePwd = !hidePwd" size="22px" color="#8a8a8a"/>
		</view>
		<!-- F5：提交按钮 -->
		<button class="btn" @click="doLogin">登 录</button>
		<!-- F6：找回密码 -->
		<!-- 导航跳转/保留跳转 -->
		<navigator class="find" open-type="navigate" url="/pages/feePay/feePay">找回密码</navigator>
		<!-- 重定向跳转/销毁跳转 -->
		<!-- <navigator class="find" open-type="redirect" url="/pages/feePay/feePay">找回密码2</navigator> -->
		<!-- 切换页签页 -->
		<!-- <navigator class="find" open-type="switchTab" url="/pages/my/my">找回密码3</navigator> -->
	</view>
</template>

<script>
	import { userLogin } from '../../service/'
	export default {
		data(){
			return {
				statusBarHeight: 0,		//系统状态栏高度
				hidePwd: true,			//是否隐藏密码
				phone: "13501234567",	//用户输入的登录手机号
				pwd:"123456",			//用户输入的登录密码
			}
		},
		//生命周期方法 ------ 页面挂载完成
		onLoad(){    //此处此方法类似于mounted()
			//console.log('login组件挂载完成')
			//获取系统信息，读取其中的"状态栏高度"
			let {statusBarHeight} = uni.getSystemInfoSync()
			// console.log('屏幕高度：', screenHeight);
			this.statusBarHeight = statusBarHeight
		},
		methods: {
			async doLogin(){
				//console.log('当前输入：',this.phone, this.pwd)
				//1.验证手机号是否合法，不合法就弹出提示框，退出执行
				if(!/^1[3-9]\d{9}$/.test(this.phone)){
					uni.showToast({
						title: '手机号非法',		//提示标题
						icon: 'none',			//图标
						duration: 3000			//持续时长 
					})
					return
				}
				//2.验证密码是否合法，不合法就弹出提示框，退出执行
				if(this.pwd.length < 6){
					uni.showToast({
						title:'密码格式非法',
						icon: 'none',
						duration: 3000
					})
					return 
				}
				//3.把手机号/密码提交给服务器端数据API，进行登录验证
				let url = "https://www.codeboy.com/zhsqapi/user/login"
				let [err, res] = await uni.request({ 
					url,
					method: 'POST',
					//header: { 'Content-Type': 'application/json'},
					header: { }, //请求内容类型默认就是JSON格式
					//data: `{"phone":"${this.phone}", "pwd":"${this.pwd}"}`
					//JSON系列化：把普通的JS对象转换为JSON格式的字符串
					//data: JSON.stringify( {phone:this.phone, pwd:this.pwd})
					//uni.request方法会自动根据请求内容类型，把数据转换为需要的格式
					data: {phone:this.phone, pwd:this.pwd}
				})
				if(err){
					console.log('执行失败：', err);
				}else {
					console.log('异步请求成功：', res);
				}
				//4.登录成功，提示"欢迎回来"，跳转到首页
				if(data.code===2000){  	//登录成功
					//弹出一个"吐司"对话框
					uni.showToast({
						title: '欢迎回来',
						icon: 'none',			//图标：不要
						duration: 3000,			//持续时间：3s
						complete(){				//对话框成功关闭
							//跳转到"首页" ------ 切换页签
							uni.switchTab({
								url:'/pages/index/index'
							})
						}
					})
				}else {					//登录失败
					//弹出一个"模态"对话框
					uni.showModal({
						title: '错误',
						content: '登录失败！服务器返回消息：'+data.msg
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.status-bar {
	background-color: $zh-theme-color;
	width: 750rpx;		//宽度占满一整行
	//height: 30rpx;		//高度：临时
	position: fixed;	//固定定位
}
.logo {
	width: 450rpx;
	// height: 450rpx;
	// block或inline-block使用左右margin:auto实现水平居中
	margin: $uni-spacing-col-lg*6   auto   0;
}
//针对高度小于500px的屏幕，减小顶部留白
@media screen and (max-height: 500px) {
	.logo {
		margin-top: $uni-spacing-col-lg;
	}
}
//针对高度大于700px的屏幕，增大顶部留白
@media screen and (min-height: 700px) {
	.logo {
		margin-top: $uni-spacing-col-lg*12;
		margin-bottom: $uni-spacing-col-lg*4;
	}
}
.input-group {
	position: relative;
	margin: $uni-spacing-col-lg*3  $uni-spacing-row-lg   0;
	//弹性容器中的子元素在交叉轴上居中对齐
	align-items: center;
	&.pwd-group {
		margin-top: $uni-spacing-col-lg*2;
	}
	.input {
		font-size: $uni-font-size-base;
		border: 1px solid $zh-theme-color;
		border-radius: $uni-border-radius-base;
		width: 100%;
		padding: 0  $uni-spacing-row-base*3;
		height: $uni-font-size-lg*2.2;  //注意：此处不能使用line-height
	}
	.icon {
		position: absolute;
		&.left { left:$uni-spacing-row-sm; }
		&.right { right:$uni-spacing-row-sm; }
	}
}
.btn {
	margin: $uni-spacing-col-lg*2.5  $uni-spacing-row-lg 0;
	background: $zh-theme-color;
	color: $uni-text-color-inverse;
	font-size: $uni-font-size-base;
	//SCSS函数：darken(颜色, 百分比)，返回一个更深的颜色值
	//SCSS函数：lighten(颜色, 百分比)，返回一个更浅的颜色值
	&:active {
		background-color: darken($zh-theme-color, 5%);
	}
}
.find {
	text-align: center;
	color: $zh-theme-color;
	margin-top: $uni-spacing-col-lg*2;
}
</style>

export let base = 'https://www.codeboy.com/zhsqapi/'
export let userLogin = async (phone, pwd)=>{
	//1.准备请求URL
	let url = base + 'user/login'
	//console.log(url)
	//2.显示"加载中"提示框
	uni.showLoading({
		title: '用户登录中'
	})
	//3.发起异步请求消息
	let [err, res] = await uni.request({
		url,
		method: 'POST',
		data: {phone, pwd}
	})
	//4.隐藏"加载中"提示框
	uni.hideLoading()
	//5.返回响应消息主体
	return res.data
}

导航跳转方式

导航跳转

在访问历史栈中保存当前页面，再打开下一个页面

<navigator open-type="navigate" url="">

返回跳转

返回访问历史栈中的上一个页面

<navigator  open-type="navigateBack">

重定向跳转/销毁跳转

不在历史栈中记录当前页面，直接跳转到下一个页面（无法返回）

<navigator  open-type="redirect"  url="">

切换页签跳转

查看指定页签页是否打开过，若有则再次显示；若无则打开并放到访问栈中

<navigator  open-type="switchTab"  url="">

重启跳转

销毁历史栈中的所有记录，重启应用，打开指定页面

<navigator  open-type="reLaunch"  url="">

提示信息

吐司提示

显示一个吐司对话框（不太严重，仅做提示）

uni.showToast({
	title: '标题',
	duration: 2000
});

OBJECT参数说明

参数	类型	必填	说明	平台差异说明
title	String	是	提示的内容，长度与 icon 取值有关。
icon	String	否	图标，有效值详见下方说明，默认：success。
image	String	否	自定义图标的本地路径（app端暂不支持gif）	App、H5、微信小程序、百度小程序
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false	App、微信小程序
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500
position	String	否	纯文本轻提示显示位置，填写有效值后只有 `title` 属性生效，且不支持通过 uni.hideToast 隐藏。有效值详见下方说明。	App
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

icon 值说明

值	说明	平台差异说明
success	显示成功图标，此时 title 文本在`小程序`平台最多显示 7 个汉字长度。	支付宝小程序无长度无限制
error	显示错误图标，此时 title 文本在`小程序`平台最多显示 7 个汉字长度。	支付宝小程序、快手小程序、字节小程序、百度小程序、京东小程序、QQ小程序不支持
fail	显示错误图标，此时 title 文本无长度显示。	支付宝小程序、字节小程序
exception	显示异常图标。此时 title 文本无长度显示。	支付宝小程序
loading	显示加载图标，此时 title 文本在`小程序`平台最多显示 7 个汉字长度。	支付宝小程序不支持
none	不显示图标，此时 title 文本在`小程序`最多可显示两行，`App`仅支持单行显示。

模态提示

显示一个模态对话框（很严重，必需用户做出选择）

javascript 复制代码

uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});

OBJECT参数说明

参数	类型	必填	说明	平台差异说明
title	String	否	提示的标题
content	String	否	提示的内容
showCancel	Boolean	否	是否显示取消按钮，默认为 true
cancelText	String	否	取消按钮的文字，默认为"取消"
cancelColor	HexColor	否	取消按钮的文字颜色，默认为"#000000"	H5、微信小程序、百度小程序、字节小程序（2.62.0+）
confirmText	String	否	确定按钮的文字，默认为"确定"
confirmColor	HexColor	否	确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#576B95"，百度小程序平台默认为"#3c76ff"	H5、微信小程序、百度小程序、字节小程序（2.62.0+）
editable	Boolean	否	是否显示输入框	H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、字节小程序（2.62.0+）
placeholderText	String	否	显示输入框时的提示文本	H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、字节小程序（2.62.0+）
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明

参数	类型	说明	平台差异说明
confirm	Boolean	为 true 时，表示用户点击了确定按钮
cancel	Boolean	为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）
content	String	`editable` 为 true 时，用户输入的文本	H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、字节小程序（2.62.0+）

Ajax实现

uni.request(OBJECT)

发起网络请求。

OBJECT 参数说明

参数名	类型	必填	默认值	说明	平台差异说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数	App 3.3.7 以下不支持 ArrayBuffer 类型
header	Object	否		设置请求的 header，header 中不能设置 Referer	App、H5端会自动带上cookie，且H5端不可手动修改
method	String	否	GET	有效值详见下方说明
timeout	Number	否	60000	超时时间，单位 ms	H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
dataType	String	否	json	如果设为 json，会尝试对返回的数据做一次 JSON.parse
responseType	String	否	text	设置响应的数据类型。合法值：text、arraybuffer	支付宝小程序不支持
sslVerify	Boolean	否	true	验证 ssl 证书	仅App安卓端支持（HBuilderX 2.3.3+），不支持离线打包
withCredentials	Boolean	否	false	跨域请求时是否携带凭证（cookies）	仅H5支持（HBuilderX 2.6.15+）
firstIpv4	Boolean	否	false	DNS解析时优先使用ipv4	仅 App-Android 支持 (HBuilderX 2.8.0+)
enableHttp2	Boolean	否	false	开启 http2	微信小程序
enableQuic	Boolean	否	false	开启 quic	微信小程序
enableCache	Boolean	否	false	开启 cache	微信小程序、字节跳动小程序 2.31.0+
enableHttpDNS	Boolean	否	false	是否开启 HttpDNS 服务。如开启，需要同时填入 httpDNSServiceId 。 HttpDNS 用法详见移动解析HttpDNS	微信小程序
httpDNSServiceId	String	否		HttpDNS 服务商 Id。 HttpDNS 用法详见移动解析HttpDNS	微信小程序
enableChunked	Boolean	否	false	开启 transfer-encoding chunked	微信小程序
forceCellularNetwork	Boolean	否	false	wifi下使用移动网络发送请求	微信小程序
enableCookie	Boolean	否	false	开启后可在headers中编辑cookie	支付宝小程序 10.2.33+
cloudCache	Object/Boolean	否	false	是否开启云加速（详见云加速服务）	百度小程序 3.310.11+
defer	Boolean	否	false	控制当前请求是否延时至首屏内容渲染后发送	百度小程序 3.310.11+
success	Function	否		收到开发者服务器成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	类型	说明
data	Object/String/ArrayBuffer	开发者服务器返回的数据
statusCode	Number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header
cookies	`Array.<string>`	开发者服务器返回的 cookies，格式为字符串数组

data 数据说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：

对于 GET 方法，会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。

示例

javascript 复制代码

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});