厦门市住房和建设局网站,科技小制作视频,动画设计考研,品牌的网站建设一般多少钱条件编译
条件编译概念 不同的运行平台终归有些专有的特性#xff0c;无法实现跨平台完全兼容#xff0c;例如#xff1a;微信小程序导航栏右上角的关闭图标。 uni-app提供了一种“条件编译”机制#xff0c;可以针对特定的平台编译执行特定的代码#xff0c;否则不执行。…
条件编译
条件编译概念 不同的运行平台终归有些专有的特性无法实现跨平台完全兼容例如微信小程序导航栏右上角的关闭图标。 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项目设计项目架构师/设计师/产品经理体系结构、前后端技术选型、子系统划分、模块化、功能点设计《项目原型设计》2UI设计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 langscss/*每个页面共用的公共样式 *///选择所有的元素:not(not) {//提示uni-app提供的内置组件默认都不带内外边距//简化盒子模型的计算方案由默认的内容盒子改为边框盒子// box-sizing: content-box;//默认值总宽度marginbordderpaddingwidthbox-sizing: border-box; //总宽度marginwidth}//选择每个页面的根元素用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 classstatus-bar :style{height: statusBarHeightpx}/viewscriptexport 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”实现“宽度固定高度自动等比例缩放” !-- F2LOGO --
!-- mode图片的缩放模式 widthFix宽度使用指定的固定值高度自动等比例缩放 --
image src../../static/img/logo.png classlogo modewidthFix/.logo {width: 450rpx;// height: 450rpx;// block或inline-block使用左右margin:auto实现水平居中margin: $uni-spacing-col-lg*6 auto 0;
}手机号输入框开发 input输入框组件注意它的属性与HTML5中的input是不一样的 例如typetext/number/digit/idcard指定的是弹出来的键盘类型 uni-icons 扩展组件代表图标的组件需要提前安装 内置了大量图标可以直接使用 !-- F3手机号码输入框组 --
!-- 提示真正的App开发中input就是没有初始样式的都需要自己指定 --
view classinput-groupinput classinput placeholder请输入手机号/uni-icons classicon left typephone-filled size25px color#090/uni-icons classicon right typeclear size22px 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 classinput-group pwd-groupinput :passwordhidePwd classinput placeholder请输入密码/uni-icons classicon left typelocked-filled size25px color#090/uni-icons classicon right :typehidePwd ? eye-slash-filled : eye-filled clickhidePwd !hidePwd size22px color#8a8a8a/
/viewexport 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 classbtn clickdoLogin登 录/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 classfind open-typenavigate url/pages/feePay/feePay找回密码/navigator
!-- 重定向跳转/销毁跳转 --
!-- navigator classfind open-typeredirect url/pages/feePay/feePay找回密码2/navigator --
!-- 切换页签页 --
!-- navigator classfind open-typeswitchTab 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 classinput-groupinput v-modelphone classinput placeholder请输入手机号/uni-icons classicon left typephone-filled size25px color#090/uni-icons classicon right typeclear size22px color#1296DB/
/view
!-- F4密码输入框组 --
view classinput-group pwd-groupinput v-modelpwd :passwordhidePwd classinput placeholder请输入密码/uni-icons classicon left typelocked-filled size25px color#090/uni-icons classicon right :typehidePwd ? eye-slash-filled : eye-filled clickhidePwd !hidePwd size22px color#8a8a8a/
/viewscriptexport 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/listlet [err, res] await uni.request({url})if(err){console.log(异步请求失败错误原因err.errMsg)}else {console.log(请求成功服务器返回响应消息主体 res.data)}//4.登录成功提示“欢迎回来”跳转到首页},}}
/script完整代码
templateview classcontent!-- F1手机系统状态栏设定 --view classstatus-bar :style{height: statusBarHeightpx}/view!-- F2LOGO --!-- mode图片的缩放模式 widthFix宽度使用指定的固定值高度自动等比例缩放 --image src../../static/img/logo.png classlogo modewidthFix/!-- F3手机号码输入框组 --!-- 提示真正的App开发中input就是没有初始样式的都需要自己指定 --view classinput-groupinput v-modelphone classinput placeholder请输入手机号/uni-icons classicon left typephone-filled size25px color#090/uni-icons classicon right typeclear size22px color#1296DB//view!-- F4密码输入框组 --view classinput-group pwd-groupinput v-modelpwd :passwordhidePwd classinput placeholder请输入密码/uni-icons classicon left typelocked-filled size25px color#090/uni-icons classicon right :typehidePwd ? eye-slash-filled : eye-filled clickhidePwd !hidePwd size22px color#8a8a8a//view!-- F5提交按钮 --button classbtn clickdoLogin登 录/button!-- F6找回密码 --!-- 导航跳转/保留跳转 --navigator classfind open-typenavigate url/pages/feePay/feePay找回密码/navigator!-- 重定向跳转/销毁跳转 --!-- navigator classfind open-typeredirect url/pages/feePay/feePay找回密码2/navigator --!-- 切换页签页 --!-- navigator classfind open-typeswitchTab url/pages/my/my找回密码3/navigator --/view
/templatescriptimport { 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/loginlet [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.code2000){ //登录成功//弹出一个“吐司”对话框uni.showToast({title: 欢迎回来,icon: none, //图标不要duration: 3000, //持续时间3scomplete(){ //对话框成功关闭//跳转到“首页” —— 切换页签uni.switchTab({url:/pages/index/index})}})}else { //登录失败//弹出一个“模态”对话框uni.showModal({title: 错误,content: 登录失败服务器返回消息data.msg})}},}}
/scriptstyle langscss 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;
}
/styleexport let base https://www.codeboy.com/zhsqapi/
export let userLogin async (phone, pwd){//1.准备请求URLlet 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-typenavigate url返回跳转 返回访问历史栈中的上一个页面 navigator open-typenavigateBack重定向跳转/销毁跳转 不在历史栈中记录当前页面直接跳转到下一个页面无法返回 navigator open-typeredirect url切换页签跳转 查看指定页签页是否打开过若有则再次显示若无则打开并放到访问栈中 navigator open-typeswitchTab url重启跳转 销毁历史栈中的所有记录重启应用打开指定页面 navigator open-typereLaunch url提示信息
吐司提示 显示一个吐司对话框不太严重仅做提示 uni.showToast({title: 标题,duration: 2000
});OBJECT参数说明
参数类型必填说明平台差异说明titleString是提示的内容长度与 icon 取值有关。iconString否图标有效值详见下方说明默认success。imageString否自定义图标的本地路径app端暂不支持gifApp、H5、微信小程序、百度小程序maskBoolean否是否显示透明蒙层防止触摸穿透默认falseApp、微信小程序durationNumber否提示的延迟时间单位毫秒默认1500positionString否纯文本轻提示显示位置填写有效值后只有 title 属性生效且不支持通过 uni.hideToast 隐藏。有效值详见下方说明。AppsuccessFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
icon 值说明
值说明平台差异说明success显示成功图标此时 title 文本在小程序平台最多显示 7 个汉字长度。支付宝小程序无长度无限制error显示错误图标此时 title 文本在小程序平台最多显示 7 个汉字长度。支付宝小程序、快手小程序、字节小程序、百度小程序、京东小程序、QQ小程序不支持fail显示错误图标此时 title 文本无长度显示。支付宝小程序、字节小程序exception显示异常图标。此时 title 文本无长度显示。支付宝小程序loading显示加载图标此时 title 文本在小程序平台最多显示 7 个汉字长度。支付宝小程序不支持none不显示图标此时 title 文本在小程序最多可显示两行App仅支持单行显示。
模态提示 显示一个模态对话框很严重必需用户做出选择 uni.showModal({title: 提示,content: 这是一个模态弹窗,success: function (res) {if (res.confirm) {console.log(用户点击确定);} else if (res.cancel) {console.log(用户点击取消);}}
});OBJECT参数说明
参数类型必填说明平台差异说明titleString否提示的标题contentString否提示的内容showCancelBoolean否是否显示取消按钮默认为 truecancelTextString否取消按钮的文字默认为取消cancelColorHexColor否取消按钮的文字颜色默认为#000000H5、微信小程序、百度小程序、字节小程序2.62.0confirmTextString否确定按钮的文字默认为确定confirmColorHexColor否确定按钮的文字颜色H5平台默认为#007aff微信小程序平台默认为#576B95百度小程序平台默认为#3c76ffH5、微信小程序、百度小程序、字节小程序2.62.0editableBoolean否是否显示输入框H5 (3.2.10)、App (3.2.10)、微信小程序 (2.17.1)、字节小程序2.62.0placeholderTextString否显示输入框时的提示文本H5 (3.2.10)、App (3.2.10)、微信小程序 (2.17.1)、字节小程序2.62.0successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
success返回参数说明
参数类型说明平台差异说明confirmBoolean为 true 时表示用户点击了确定按钮cancelBoolean为 true 时表示用户点击了取消用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭contentStringeditable 为 true 时用户输入的文本H5 (3.2.10)、App (3.2.10)、微信小程序 (2.17.1)、字节小程序2.62.0
Ajax实现
uni.request(OBJECT)
发起网络请求。
OBJECT 参数说明
参数名类型必填默认值说明平台差异说明urlString是开发者服务器接口地址dataObject/String/ArrayBuffer否请求的参数App 3.3.7 以下不支持 ArrayBuffer 类型headerObject否设置请求的 headerheader 中不能设置 RefererApp、H5端会自动带上cookie且H5端不可手动修改methodString否GET有效值详见下方说明timeoutNumber否60000超时时间单位 msH5(HBuilderX 2.9.9)、APP(HBuilderX 2.9.9)、微信小程序2.10.0、支付宝小程序dataTypeString否json如果设为 json会尝试对返回的数据做一次 JSON.parseresponseTypeString否text设置响应的数据类型。合法值text、arraybuffer支付宝小程序不支持sslVerifyBoolean否true验证 ssl 证书仅App安卓端支持HBuilderX 2.3.3不支持离线打包withCredentialsBoolean否false跨域请求时是否携带凭证cookies仅H5支持HBuilderX 2.6.15firstIpv4Boolean否falseDNS解析时优先使用ipv4仅 App-Android 支持 (HBuilderX 2.8.0)enableHttp2Boolean否false开启 http2微信小程序enableQuicBoolean否false开启 quic微信小程序enableCacheBoolean否false开启 cache微信小程序、字节跳动小程序 2.31.0enableHttpDNSBoolean否false是否开启 HttpDNS 服务。如开启需要同时填入 httpDNSServiceId 。 HttpDNS 用法详见 移动解析HttpDNS微信小程序httpDNSServiceIdString否HttpDNS 服务商 Id。 HttpDNS 用法详见 移动解析HttpDNS微信小程序enableChunkedBoolean否false开启 transfer-encoding chunked微信小程序forceCellularNetworkBoolean否falsewifi下使用移动网络发送请求微信小程序enableCookieBoolean否false开启后可在headers中编辑cookie支付宝小程序 10.2.33cloudCacheObject/Boolean否false是否开启云加速详见云加速服务百度小程序 3.310.11deferBoolean否false控制当前请求是否延时至首屏内容渲染后发送百度小程序 3.310.11successFunction否收到开发者服务器成功返回的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
success 返回参数说明
参数类型说明dataObject/String/ArrayBuffer开发者服务器返回的数据statusCodeNumber开发者服务器返回的 HTTP 状态码headerObject开发者服务器返回的 HTTP Response HeadercookiesArray.string开发者服务器返回的 cookies格式为字符串数组
data 数据说明
最终发送给服务器的数据是 String 类型如果传入的 data 不是 String 类型会被转换成 String。转换规则如下
对于 GET 方法会将数据转换为 query string。例如 { name: name, age: 18 } 转换后的结果是 namenameage18。对于 POST 方法且 header[content-type] 为 application/json 的数据会进行 JSON 序列化。对于 POST 方法且 header[content-type] 为 application/x-www-form-urlencoded 的数据会将数据转换为 query string。
示例
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;}
});
