杭州高端网站设计,免费企业网站建设要求,个体企业建网站,合肥工程建设交易中心网站uniapp
文件详情
├── pages # 页面文件夹
│ │── index # index文件夹
│ │ │── index.vue # index页面
├── static # 静态资源#xff08;类似于图片 字体图标等#xff09;
│ …uniapp
文件详情
├── pages # 页面文件夹
│ │── index # index文件夹
│ │ │── index.vue # index页面
├── static # 静态资源类似于图片 字体图标等
│ │── logo.png # 图片视频或字体图标
├── unpackage # 存放打包输出的文件
├── App.vue # 项目根组件
├── main.js # 项目入口文件
├── manifest.json # 应用的配置文件
├── pages.json # 页面存放目录 page属性中第一项为项目启动页
├── uni.scss # 整体控制应用的风格globalStyle 属性
属性类型默认值描述平台差异说明navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色同状态栏背景色APP与H5为#F7F7F7小程序平台请参考相应小程序文档navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色仅支持 black/whitenavigationBarTitleTextString导航栏标题文字内容navigationStyleStringdefault导航栏样式仅支持 default/custom。custom即取消默认的原生导航栏需看使用注意微信小程序 7.0、百度小程序、H5、App2.0.3backgroundColorHexColor#ffffff下拉显示出来的窗口的背景色微信小程序backgroundTextStyleStringdark下拉 loading 的样式仅支持 dark / light微信小程序enablePullDownRefreshBooleanfalse是否开启下拉刷新详见页面生命周期。onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离单位只支持px详见页面生命周期backgroundColorTopHexColor#ffffff顶部窗口的背景色bounce回弹区域仅 iOS 平台backgroundColorBottomHexColor#ffffff底部窗口的背景色bounce回弹区域仅 iOS 平台titleImageString导航栏图片地址替换当前文字标题支付宝小程序内必须使用https的图片链接地址支付宝小程序、H5、APPtransparentTitleStringnone导航栏整体前景、背景透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明支付宝小程序、H5、APPtitlePenetrateStringNO导航栏点击穿透支付宝小程序、H5pageOrientationStringportrait横屏配置屏幕旋转设置仅支持 auto / portrait / landscape 详见 响应显示区域变化App 2.4.7、微信小程序animationTypeStringpop-in窗口显示的动画效果详见窗口动画AppanimationDurationNumber300窗口显示动画的持续时间单位为 msAppapp-plusObject设置编译到 App 平台的特定样式配置项参考下方 app-plusApph5Object设置编译到 H5 平台的特定样式配置项参考下方 H5H5mp-alipayObject设置编译到 mp-alipay 平台的特定样式配置项参考下方 MP-ALIPAY支付宝小程序mp-weixinObject设置编译到 mp-weixin 平台的特定样式微信小程序mp-baiduObject设置编译到 mp-baidu 平台的特定样式百度小程序mp-toutiaoObject设置编译到 mp-toutiao 平台的特定样式字节跳动小程序mp-qqObject设置编译到 mp-qq 平台的特定样式QQ小程序usingComponentsObject引用小程序组件参考 小程序组件renderingModeString同层渲染webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层微信小程序leftWindowBooleantrue当存在 leftWindow 时默认是否显示 leftWindowH5topWindowBooleantrue当存在 topWindow 时默认是否显示 topWindowH5rightWindowBooleantrue当存在 rightWindow 时默认是否显示 rightWindowH5rpxCalcMaxDeviceWidthNumber960rpx 计算所支持的最大设备宽度单位 pxApp、H52.8.12rpxCalcBaseDeviceWidthNumber375rpx 计算使用的基准设备宽度设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算单位 pxApp、H52.8.12rpxCalcIncludeWidthNumber750rpx 计算特殊处理的值始终按实际的设备宽度计算单位 rpxApp、H52.8.12maxWidthNumber1190单位px当浏览器可见区域宽度大于maxWidth时两侧留白当小于等于maxWidth时页面铺满不同页面支持配置不同的maxWidthmaxWidth leftWindow(可选)page(页面主体)rightWindow(可选)H52.9.9
tabBar属性
tarbar
属性类型必填默认值描述平台差异说明colorHexColor是tab 上的文字默认颜色selectedColorHexColor是tab 上的文字选中时的颜色backgroundColorHexColor是tab 的背景色borderStyleString否blacktabbar 上边框的颜色仅支持 black/whiteApp 2.3.4 支持其他颜色值listArray是tab 的列表详见 list 属性说明最少2个、最多5个 tabpositionString否bottom可选值 bottom、toptop 值仅微信小程序支持
list
属性类型必填说明pagePathString是页面路径必须在 pages 中先定义textString是tab 上按钮文字在 5APP 和 H5 平台为非必填。例如中间可放一个没有文字的号图标iconPathString否图片路径icon 大小限制为40kb建议尺寸为 81px * 81px当 postion 为 top 时此参数无效不支持网络图片不支持字体图标selectedIconPathString否选中时的图片路径icon 大小限制为40kb建议尺寸为 81px * 81px 当 postion 为 top 时此参数无效
tabBar: {list: [{text: 首页,pagePath:pages/index/index,iconPath:static/tabs/home.png,selectedIconPath:static/tabs/home-active.png},{text: 信息,pagePath:pages/message/message,iconPath:static/tabs/message.png,selectedIconPath:static/tabs/message-active.png},{text: 我们,pagePath:pages/contact/contact,iconPath:static/tabs/contact.png,selectedIconPath:static/tabs/contact-active.png}]}view 组件用法
属性名说明hover-class指定按下去的样式类。当 hover-class“none” 时没有点击态效果hover-stop-propagation指定是否阻止本节点的祖先节点出现点击态hover-start-time按住后多久出现点击态单位毫秒hover-stay-time手指松开后点击态保留时间单位毫秒
text组件用法
属性说明selectable文本是否可选space显示连续空格可选参数ensp、emsp、nbspdecode是否解码nbsp lt gt amp apos ensp emsp
space值的意义
值说明ensp中文字符空格一半大小emsp中文字符空格大小nbsp根据字体设置的空格大小
生命周期函数
应用的生命函数
函数名说明onLaunch初始化完成时触发全局只触发一次onShow启动或从后台进入前台显示onHide从前台进入后台onError报错时触发
页面的生命函数
数名说明onLoad监听页面加载其参数为上个页面传递的数据参数类型为Object用于页面传参onShow监听页面显示。页面每次出现在屏幕上都触发包括从下级页面点返回露出当前页面页面切换不会触发onload函数只会触发onshowonReady监听页面初次渲染完成。onHide监听页面隐藏onUnload监听页面卸载
下拉刷新
在pages文件中 style:{enablePullDownRefresh:true
}使用函数 uni.startPullDownRefresh()监听下拉刷新函数 onPullDownRefresh(){console.log(页面刷新了)
}上拉刷新
监听上拉刷新函数 onReachBottom(){console.log(页面触底了)
}属性类型默认值描述onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离单位只支持px style:{onReachBottomDistance:200
}网络请求 uni.request({// 参数见下方
})传值说明
参数名类型说明urlString开发者服务器接口地址dataObject/String/ArrayBuffer请求的参数headerObject设置请求的 headerheader 中不能设置 Referer。methodString有效值详见下方说明timeoutNumber超时时间单位 msdataTypeString如果设为 json会尝试对返回的数据做一次 JSON.parseresponseTypeString设置响应的数据类型。合法值text、arraybuffersslVerifyBoolean验证 ssl 证书withCredentialsBoolean跨域请求时是否携带凭证cookiesfirstIpv4BooleanDNS解析时优先使用ipv4
请求情况返回数据
参数名类型说明successFunction收到开发者服务器成功返回的回调函数failFunction接口调用失败的回调函数completeFunction接口调用结束的回调函数调用成功、失败都会执行
本地数据缓存
存储数据------setStorage------异步 uni.setStorage({key:存储的键名,data:存储的值,success(){存储成功调用的函数},fail(){存储失败调用的函数},complete(){接口调用结束调用的函数}
})获取数据------getStorage------异步 uni.getStorage({key:数据缓存中的键名,success(){存储成功调用的函数},fail(){存储失败调用的函数},complete(){接口调用结束调用的函数}
})移除数据-----removeStorage------异步 uni.removeStorage({key:数据缓存中的键名,success(){删除成功调用的函数},fail(){删除失败调用的函数},complete(){接口调用结束调用的函数}
})清除本地所有数据------clearStorage------异步 uni.clearStorage()存储数据------setStorageSync------同步 uni.setStorageSync(键名,值)获取数据------getStorageSync------同步 const res uni.getStorageSync(键名)移除数据-----removeStorage------同步 uni.removeStorage(键名)清除本地所有数据------clearStorage------同步 uni.clearStorageSync()上传图片
从本地相册选择图片或使用相机拍照------chooseImage
参数名说明count最多可以选择的图片张数默认9sizeTypeoriginal 原图compressed 压缩图默认二者都有extension根据文件拓展名过滤每一项都不能是空字符串。默认不过滤。sourceTypealbum 从相册选图camera 使用相机默认二者都有。如需直接开相机或直接选相册请只使用一个选项crop图像裁剪参数设置后 sizeType 失效success成功则返回图片的本地文件路径列表 tempFilePathsfail接口调用失败的回调函数complete接口调用结束的回调函数调用成功、失败都会执行
crop
参数名说明quality取值范围为1-100数值越小质量越低仅对jpg格式有效。默认值为80。width裁剪的宽度单位为px用于计算裁剪宽高比。height裁剪的高度单位为px用于计算裁剪宽高比。resize是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注设置为false时在裁剪编辑界面显示图片的像素值设置为true时不显示
success 返回参数说明
参数说明tempFilePaths图片的本地文件路径列表tempFiles图片的本地文件列表每一项是一个 File 对象
File 对象结构如下
参数说明path本地文件路径size本地文件大小单位Bname包含扩展名的文件名称仅H5支持type文件类型仅H5支持
预览图片------previewImage
参数名说明current详见下方说明urls需要预览的图片链接列表indicator图片指示器样式可取值“default” - 底部圆点指示器 “number” - 顶部数字指示器 “none” - 不显示指示器。(只在App中适用)loop是否可循环预览默认值为 false (只在App中适用)longPressActions长按图片显示操作菜单如不填默认为保存相册只在App 1.9.5适用success接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数调用成功、失败都会执行
longPressActions 参数说明
参数类型必填说明itemListArray是按钮的文字数组itemColorString否按钮的文字颜色字符串格式默认为#000000successFunction否接口调用成功的回调函数详见返回参数说明failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
success 返回参数说明
参数类型说明indexNumber用户长按图片的索引值tapIndexNumber用户点击按钮列表的索引值
条件注释实现跨端兼容 注释 #ifdef 平台值 开头注释 #endif 平台值 结尾值平台APP-PLUS5AppH5H5MP-WEIXIN微信小程序MP-ALIPAY支付宝小程序MP-BAIDU百度小程序MP-TOUTIAO头条小程序MP-QQQQ小程序MP微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序
页面跳转
navigator------声明式导航跳转
属性名说明url应用内的跳转链接值为相对路径或绝对路径如“…/first/first”“/pages/first/first”注意不能加 .vue 后缀open-type跳转方式delta当 open-type 为 ‘navigateBack’ 时有效表示回退的层数animation-type当 open-type 为 navigate、navigateBack 时有效窗口的显示/关闭动画效果(只在App中适用)animation-duration当 open-type 为 navigate、navigateBack 时有效窗口显示/关闭动画的持续时间。(只在App中适用)hover-class指定点击时的样式类当hover-classnone时没有点击态效果hover-stop-propagation指定是否阻止本节点的祖先节点出现点击态(只在微信小程序中适用)hover-start-time按住后多久出现点击态单位毫秒hover-stay-time手指松开后点击态保留时间单位毫秒target在哪个小程序目标上发生跳转默认当前小程序值域self/miniProgram(只在微信2.0.7、百度2.5.2、QQ中适用)
open-type 有效值
值说明navigate对应 uni.navigateTo 的功能redirect对应 uni.redirectTo 的功能switchTab对应 uni.switchTab 的功能reLaunch对应 uni.reLaunch 的功能字节跳动小程序不支持navigateBack对应 uni.navigateBack 的功能exit退出小程序targetminiProgram时生效只在微信2.1.0、百度2.5.2、QQ1.4.7适用
跳转tabbar页面必须设置open-type“switchTab”navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, navigator 的子节点背景色应为透明色。navigator-open-type属性 如果使用对应的值则对应值的功能会高于对应跳转路径。app-nvue 平台只有纯nvue项目render为native才支持 navigator。非render为native的情况下nvue暂不支持navigator组件请使用API跳转。app下退出应用Android平台可以使用plus.runtime.quit。iOS没有退出应用的概念。uLink组件是navigator组件的增强版样式上自带下划线功能上支持打开在线网页、其他App的schema、mailto发邮件、tel打电话。
编程式导航跳转
函数说明navigateTo保留当前页面跳转到应用内的某个页面redirectTo关闭当前页面跳转到应用内的某个页面。reLaunch关闭所有页面打开到应用内的某个页面。switchTab跳转到 tabBar 页面并关闭其他所有非 tabBar 页面。navigateBack关闭当前页面返回上一页面或多级页面
参数说明url需要跳转的应用内非 tabBar 的页面的路径 , 或tabBar页面仅限于switchTab路径后可以带参数。参数与路径之间使用?分隔参数键与参数值用相连不同参数用分隔如 ‘path?keyvaluekey2value2’path为下一个页面的路径下一个页面的onLoad函数可得到传递的参数animationType窗口动画效果(只在App中适用)animationDuration窗口动画持续时间单位为 ms(只在App中适用)events页面间通信接口用于监听被打开页面发送到当前页面的数据。2.8.9 开始支持。success接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数调用成功、失败都会执行
