uniapp
Uni-App Day01
HBuilder安装卸载
安装
-
下载HBuilder最新版
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KQjbk0He-1688702512053)(assets/4.png)]
-
解压到安装目录，路径中不要有中文和空格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qdH0yIfW-1688702512054)(assets/5.png)]
-
在桌面上增加快捷方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MDVTsXun-1688702512056)(assets/6.png)]
卸载
-
执行reset.bat
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k1pwx7mn-1688702512057)(assets/7.png)]
-
删除HBuilder文件夹（如果提示文件被占用，杀死相关进程再删除）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SQ1jT2E9-1688702512059)(assets/8.png)]
夜神模拟器安装
安装
-
下载夜神模拟器
网址：https://www.yeshen.com/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wvJtbqgQ-1688702512061)(assets/image-20230221021628360.png)]
-
安装夜神模拟器
双击运行安装，目录中不要有中文和空格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bmIZmlXz-1688702512064)(assets/image-20230221021749434.png)]
移动端应用开发方式分类
移动端开发
| 技术 | 实现机制 | 优势 | ||
|---|---|---|---|---|
| 1 | NativeApp原生App | 原生App，Android使用Java，IOS使用OC编写的直接运行操作系统中的App | 可以直接调用底层系统接口、性能高 | 开发复杂，成本高 |
| 2 | H5 | 使用HTML/CSS/JS编写的网页，部署在服务器上，客户端使用手机中的浏览器/内嵌浏览器来浏览 | 编写简单，兼容性好，便于分享 | 运行性能低，功能有限，用户使用粘性低 |
| 3 | WebApp | 使用HTML/CSS/JS编写的网页，打包安装到用户的手机中，使用内置的WebView组件来浏览 | 编写简单，兼容性好，用户使用粘性高 | 运行性能低，功能有限 |
| 4 | HybridApp | 混合/混编App,使用HTML/CSS/JS + Nativ.js+Java/OC编写的App，打包安装到用户的手机中 | 运行性能比较高，功能丰富，开发方式灵活 | 如果项目中需要的原生代码较多时，开发反倒更复杂 |
| 5 | 各类小程序 | 运行于专有App平台的小型App(<2MB) | “无需安装”，点开即用 | 不跨平台 |
| 6 | 华为鸿蒙App | ArkUI平台，ArkTS语言，专用于鸿蒙系统，有自己专有的解释运行平台 | 性能高，功能丰富 | 只用于鸿蒙系统 |
| 7 | Flutter App | 2019年Google开发的新技术，直接在GPU绘图芯片上绘图，使用Dart语言 | 性能高，兼容性高 | 用户和案例偏少，“未来可期” |
H5：
- HTML5的简称
- 使用HTML5、CSS、JS开发的基于网页的应用程序，优势在于快速开发、上线、分享、迭代
不同前端框架可以开发哪些移动端应用程序？
- Vue.js: PC网站、H5站、WebApp
- uni-app: PC网站、H5站、WebApp、各类小程序
- React: PC网站、H5站、WebApp、NativeAPP
Uni-App概述
官网：https://dcloud.io
Uni-App是什么
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fh9HEOvv-1688702512066)(assets/2.png)]
Uni-App功能框架图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Za4wmLaX-1688702512068)(assets/3.png)]
案例1
创建一个示例项目，在浏览器中运行 - 即uni-app编译为H5网站
-
创建项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b1Obj092-1688702512072)(assets/image-20230221022117817.png)]
-
配置项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RQFeSouw-1688702512076)(assets/image-20230221022446382.png)]
-
创建项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y8GUxs84-1688702512078)(assets/image-20230221022549859.png)]
-
打开pages/index/index.vue
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xjCgDxPW-1688702512080)(assets/image-20230221022826099.png)]
-
运行项目到浏览器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-al2Hy4X5-1688702512081)(assets/image-20230221022722473.png)]
-
等待下载插件
HBuilder采用插件模式，工作时自动下载安装所需插件
-
等待编译后自动打开浏览器访问页面(如果没有自动打开手动访问控制台提示的地址)
-
通过HBuilder内置浏览器打开页面(可能会需要下载内置浏览器插件)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e1QfO0vy-1688702512081)(assets/image-20230221023346797.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9euCaqvA-1688702512082)(assets/image-20230221023449426.png)]
案例2
创建一个示例项目，在安卓手机中调试运行 - 即uni-app编译为WebApp
-
安装运行Android模拟器(夜神\雷电\逍遥等都可以)
-
找到模拟器的nox_adb.exe
ADB：Android Debugger，安卓调试器，理解为PC机与安卓模拟器之间的“USB数据线”
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FOgz6Qu2-1688702512083)(assets/image-20230221024649562.png)]
-
为HBuilder配置adb
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EsFTNwWJ-1688702512083)(assets/image-20230221024504735.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BPEdjefQ-1688702512084)(assets/image-20230221024610976.png)]
-
运行到Android模拟器中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PGpb3f5I-1688702512085)(assets/image-20230221024834325.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PzVeIMkP-1688702512085)(assets/image-20230221024848745.png)]
-
最终效果
Uni-App项目结构
Uni-App目录结构
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bPAkhG7j-1688702512086)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230607113023131.png)
components目录
自定义组件所在的目录，需要手动创建，且必须叫这个名字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jJdQoywa-1688702512086)(assets/image-20230221034201690.png)]
index.vue
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kY4FATF4-1688702512089)(assets/image-20230221034015760.png)]
static目录
静态资源所在目录
index.html
整个UniApp应用中唯一的HTML,SPA应用的唯一页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZloRFSl9-1688702512090)(assets/image-20230221042131830.png)]
main.js
编译入口文件,整个程序的入寇,加载了根组件App.vue
创建为Vue对象,写入到HTML的id为app的标签内进行渲染.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6us1NXkD-1688702512090)(assets/image-20230221042212478.png)]
App.vue
根组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a4KCj1qX-1688702512091)(assets/image-20230221042339192.png)]
pages.json
路由配置文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bo4QLmeI-1688702512092)(assets/image-20230221042824632.png)]
mainfest.json
配置清单文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wtwbWLRY-1688702512092)(assets/image-20230221042934882.png)]
首页显示原理
UniApp 页面的显示原理是基于 Vue.js 框架的单页面应用（SPA）模式。SPA 与传统的多页面应用相比，最大的区别是前者在加载应用时仅需要加载一次 HTML、CSS 和 JavaScript 资源，然后通过异步加载数据和局部更新视图来实现页面切换。这样可以提高网页的加载速度和用户体验。
在 UniApp 中，一个页面通常由四个主要部分组成：
- 模板（template）：表示页面的 HTML 结构，也就是页面的骨架。
- 样式（style）：表示页面的 CSS 样式，定义了页面中各元素的布局、字体、颜色等一系列视觉效果。
- 数据模型（data）：表示页面中的数据模型，包含了页面所需要的数据。
- 行为（methods）：表示页面的行为，也就是对用户的交互做出响应的代码逻辑。
当用户打开 UniApp 应用时，首先会加载入口文件 main.js，该文件会创建一个 Vue 实例，并把 Vue 实例挂载到 DOM 元素上。Vue 实例的根组件是 App.vue，其中包含了整个页面的结构和逻辑。在 App.vue 中，会引入各种子组件、路由和页面模块等，然后根据不同的路由跳转到不同的页面。每个页面都由一个单独的组件来负责处理，该组件通常被定义在 .vue 文件中。在该组件中，会通过模板、样式和脚本来实现页面的显示和交互。
当用户跳转到一个新页面时，UniApp 会首先异步加载该页面所需要的数据和资源，并根据数据模型和视图模板生成页面内容。然后再通过路由切换实现页面的显示。这样就可以保证用户在访问 UniApp 应用时能够获得更好的体验。
项目开发
产品原型：
https://www.axureshop.com/
https://www.axureshop.com/a/1504177.html
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4F240Swr-1688702512094)(assets/image-20230221043355539.png)]
创建页面
登录页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hZPzs7F9-1688702512095)(assets/image-20230221044643185.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SIZuPKiz-1688702512099)(assets/image-20230221044738965.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XmxpnkJR-1688702512100)(assets/image-20230221044841253.png)]
我的页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XJoNuwzV-1688702512100)(assets/image-20230221044913149.png)]
物业页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vmAbZRFF-1688702512101)(assets/image-20230221044927060.png)]
社区页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p88JBoy4-1688702512102)(assets/image-20230221044947066.png)]
路由配置文件
路由配置文件中自动生成了路由配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FC3wipLO-1688702512102)(assets/image-20230221045045384.png)]
页面基础配置
首页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AsmiTm2J-1688702512103)(assets/1676962240973.png)]
登录页
将登录页变为启动页：放置到数组第一位
去除导航栏
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bC4slbeY-1688702512108)(assets/1676962657307.png)]
我的页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gP4rR8K0-1688702512109)(assets/1676963765789.png)]
社区页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A1dR7Keh-1688702512110)(assets/1676964089900.png)]
物业页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hybbKzUp-1688702512111)(assets/1676964074153.png)]
页面代码
{
// 路由文件，pages配置子页面
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
//导航条标题文本
"navigationBarTitleText": "主页"
}
},
{
"path": "pages/login/login",
"style": {
//配置导航条样式为custom
//取消系统导航条
//可以配置自定义导航条
"navigationStyle": "custom"
}
}, {
"path": "pages/my/my",
"style": {
//导航条标题
"navigationBarTitleText": "我的"
}
}, {
"path": "pages/commurity/commurity",
"style": {
"navigationBarTitleText": "社区"
}
}, {
"path": "pages/property/property",
"style": {
"navigationBarTitleText": "物业"
}
],
"globalStyle": { //全局样式,在这里配置的样式对所有页面生效
"navigationBarBackgroundColor": "#009900",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false // 下拉刷新是转圈圈
},
全局配置
"globalStyle": { //全局样式,在这里配置的样式对所有页面生效
"navigationBarBackgroundColor": "#009900",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false
},
页签
页签：处于应用底部的用于页面跳转的链接：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CkrZefGa-1688702512112)(assets/1676974773670.png)]
配置页签(pages.json)
"uniIdRouter": {},
"tabBar": {//配置页签
//文字(未激活)颜色
"color": "#8a8a8a",
//文字(激活)颜色
"selectedColor": "#009900",
//配置页签列表
"list": [
{
//页签上的文字
"text": "首页",
//页签对应的页面路径
"pagePath": "pages/index/index",
//图标(未激活)路径
"iconPath": "static/img/home.png",
//图标(激活)路径
"selectedIconPath": "static/img/home_active.png"
},{
//页签上的文字
"text": "物业",
//页签对应的页面路径
"pagePath": "pages/property/property",
//图标(未激活)路径
"iconPath": "static/img/property.png",
//图标(激活)路径
"selectedIconPath": "static/img/property_active.png"
},{
//页签上的文字
"text": "社区",
//页签对应的页面路径
"pagePath": "pages/community/community",
//图标(未激活)路径
"iconPath": "static/img/community.png",
//图标(激活)路径
"selectedIconPath": "static/img/community_active.png"
},{
//页签上的文字
"text": "我的",
//页签对应的页面路径
"pagePath": "pages/my/my",
//图标(未激活)路径
"iconPath": "static/img/my.png",
//图标(激活)路径
"selectedIconPath": "static/img/my_active.png"
}
]
}
}
UniApp中的标签
uni-app中的标签需要保证兼容各个平台（H5、WebApp、小程序），一般不要使用HTML标签
https://uniapp.dcloud.net.cn/component/
内置组件
可以编译为任意平台可用的标签
view = div
text = span
view(视图)、scroll-view、swiper、text、rich-text、image、button、input…
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1LYfYMgD-1688702512113)(assets/1676967594614.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-feAnDZwM-1688702512115)(assets/1676967646966.png)]
扩展组件(uni-开头)
uni-ui组件库(官方+第三方)
扩展组件需要安装后才可以使用
uni-list、uni-card、uni-rating、uni-datetimer-picker…
-
安装扩展组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JRjWzrtf-1688702512116)(assets/1676968185243.png)]
-
直接下载扩展组件到HBuilder
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uTEEzoca-1688702512116)(assets/1676968239144.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-huFblOsG-1688702512117)(assets/1676968385960.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Opdfp0qG-1688702512118)(assets/1676968434487.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q5ADTiZT-1688702512119)(assets/1676968489607.png)]
-
使用扩展组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IuYC4HgZ-1688702512120)(assets/1676968787322.png)] -
最终效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i94u7dnD-1688702512123)(assets/1676968830874.png)] -
下载扩展组件在本质
下载的扩展组件，
本质上是浏览器调用的HBuilder中的uni_modules插件
下载了指定扩展组件放置到了项目的uni_modules目录下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H8RSpU4K-1688702512124)(assets/1676969156696.png)]
-
手动下载并导入扩展插件（直接导入不行使使用此方法）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pBR5HNdl-1688702512124)(assets/1676969673704.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qGyyhVDQ-1688702512125)(assets/1676969742757.png)]
自定义组件
创建自定义组件必需的文件：
文件必须创建在@/components目录下，且有同名父目录
在使用该组件的文件中声明自定义组件正式使用自定义组件
- 创建组件
在components目录下创建
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ag4QTQLo-1688702512126)(assets/1676971229976.png)]
- 编写组件代码
返回顶部
小程序、uni-app支持的全新尺寸单位：Responsive Pixel —— rpx，响应式像素数
因为不同的手机屏幕尺寸不同，如果做适配的话，传统的尺寸很麻烦；小程序引入了全新的尺寸单位，rpx —— 不论实际物理屏幕尺寸有多大，一律认为是750rpx
320px <=> 750rpx
360px <=> 750rpx
414px <=> 750rpx
这样一来，假设有个图片占屏幕宽度一半，width应该设定为 750rpx/2 = 375rpx
- 使用组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kt7PmzKS-1688702512126)(assets/1676973413639.png)]
条件编译
条件编译概念
不同的运行平台终归有些专有的特性，无法实现跨平台完全兼容，例如：微信小程序导航栏右上角的关闭图标。
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中使用
![image-20230222052657694]()
js中使用
![image-20230222052950587]()
![image-20230222053020263]()
css中使用
![image-20230222053100929]()
项目开发准备
标准开发流程
大型项目的软件生命周期：
| 阶段名称 | 负责人 | 主要内容 | 主要产出 | |
|---|---|---|---|---|
| 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或所有的移动端应用中，推荐在容器上使用“弹性布局”
小程序、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
登录功能开发
把登录页变为page.json第一个
状态栏开发
状态栏高度 不能写死,uniApp官方有方法可使用
.status-bar {
background-color: $zh-theme-color;
width: 750rpx; //宽度占满一整行
//height: 30rpx; //高度：临时
position: fixed; //固定定位
}
logo图片开发
①默认image的尺寸都是320px*240px，不论原始尺寸
②默认情况下，修改图片的宽度，高度不会自动等比例缩放
③可以指定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
扩展组件，代表图标的组件，需要提前安装
内置了大量图标可以直接使用
.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; }
}
}
密码输入框开发
export default {
data(){
return {
statusBarHeight: 0, //系统状态栏高度
hidePwd: true, //是否隐藏密码
}
},
//生命周期方法 —— 页面挂载完成
onLoad(){ //此处此方法类似于mounted()
//console.log('login组件挂载完成')
//获取系统信息，读取其中的“状态栏高度”
let {statusBarHeight} = uni.getSystemInfoSync()
// console.log('屏幕高度：', screenHeight);
this.statusBarHeight = statusBarHeight
},
methods: {
}
}
.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%);
}
}
找回密码开发
navigator：导航器，功能类似于HTML5中的超链接a
找回密码
.find {
text-align: center;
color: $zh-theme-color;
margin-top: $uni-spacing-col-lg*2;
}
找回密码
goFind() {
console.log("goFind");
uni.navigateTo({
url: "/pages/feePay/feePay"
})
},
媒体自适应(屏幕适配)
//针对高度小于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请求登录用户
登录失败，弹出吐司提示
登录成功呢，跳转到主页
完整代码
找回密码
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
}
跳转方式
url 指定跳转的页面(支持相对路径和绝对路径) open-type 指定跳转方式
导航跳转
在访问历史栈中保存当前页面，再打开下一个页面
打开新页面 旧页面不销毁,旧页面压栈 支持返回操作
方法: uni.navigateTo(url)
返回跳转
返回访问历史栈中的上一个页面
从栈中取出栈顶页面显示 完成了返回操作
方法: uni.navigateBack()
重定向跳转/销毁跳转
不在历史栈中记录当前页面，直接跳转到下一个页面（无法返回）
打开新页面 销毁旧页面 旧页面不压栈 不支持返回操作
方法: uni.redirectTo(url)
切换页签跳转
查看指定页签页是否打开过，若有则再次显示；若无则打开并放到访问栈中
切换到指定页签页 旧页面不销毁 旧页面不压栈 不支持返回操作
页签页只能通过页签跳转跳过去
方法: uni.switchTab(url)
重启跳转
销毁历史栈中的所有记录，重启应用，打开指定页面
所有旧页面销毁 栈清空 打开新页面
看起来就好像整个程序重启过一样
方法: uni.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仅支持单行显示。 |
模态提示
显示一个模态对话框（很严重，必需用户做出选择）
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实现
Ajax实现方式
DOM实现 (xhr)
Jquery ajax $.ajax $.get() $.post()
axios - 解决了回调地狱
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. |
开发者服务器返回的 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。
示例
uni.request({
url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
method:'GET', // 请求的方式 默认GET
data: {
text: 'uni.request' // 数据
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
Promise 是 ES6 引入的一个对象，它用于处理异步操作。它通过定义一个 pending（进行中）、fulfilled（已成功）和 rejected（已失败）三种状态来控制异步操作的执行流程，并通过 then 或 catch 方法进行后续操作。当一个异步操作完成后，会将其结果传递给 then 方法的回调函数或者 catch 方法的回调函数进行处理。
async/await 是 ES7 引入的一个语法糖，它基于 Promise 实现。async 函数用于定义一个异步函数，该函数内部包含一个或多个异步操作，可以通过 await 操作符等待异步操作完成并返回结果。当所有的异步操作都完成后，async 函数会返回一个 Promise 对象，该 Promise 对象的结果就是该函数最终的返回值。使用 async/await 可以使异步代码更加直观易读，并且可以避免嵌套过多的回调函数。
//-- 异步方式执行 回调方式发送ajax
uni.request({
url: 'https://www.codeboy.com/zhsqapi/user/list', // 请求接口地址
method: 'GET',
header: {},
data: {},
success(res) {
console.log(res.data);
}
});
//-- 异步方式执行 Promise实现ajax
let retObj = uni.request({
url: 'https://www.codeboy.com/zhsqapi/user/list', // 请求接口地址
method: 'GET',
header: {},
data: {}
});
// Promise拿到结果的方式
retObj.then((res) => {
console.log(res.data);
})
console.log(retObj); //Promise 处理异步的回调 ajax解决回调
// --同步方式实现Ajax Ajax是异步的 但是可以通过async await 等待它的执行 使其变为同步
// 因为是登录操作,必须验证成功才能进行下一步 所以用同步
async login(){
let res = await uni.request({
url: 'https://www.codeboy.com/zhsqapi/user/list', // 请求接口地址
method: 'GET',
header: {},
data: {}
});
console.log(res);
}
//调用时,
async wang(){
let login1 = await login()
}
登录功能开发
实现POST提交
uni.request({
url: 'https://www.codeboy.com/zhsqapi/user/login', // 请求接口地址
method: 'POST',
//通过Content-Type告知服务器当前发送的数据的格式
// header: {
// 'Content-Type': 'application/json'
// },
//-- 自己拼json字符串
// data: `{'phone':${this.phone},'pwd':${this.pwd}}`
//-- 将对象转为json字符串
// data: JSON.stringify({
// phone: this.phone,
// pwd: this.pwd
// })
//--默认会将对象转为json
data: {
phone: this.phone,
pwd: this.pwd
}
});
// POST请求简化版
uni.request({
url: 'https://www.codeboy.com/zhsqapi/user/login', // 请求接口地址
method: 'POST',
data: {
phone: this.phone,
pwd: this.pwd
}
}); // 返回值是Promise 处理Promise三种情况 回调函数,.then(), async await
HTTP协议规定请求消息内容类型(Content-Type)有哪些？—— 只有四种
text/plain 没有编码的普通数据 普通字符串
application/x-www-form-urlencoded 编码后的普通数据 name=zs&pwd=123
multipart/form-data 请求主体中包含文件上传域 文件二进制内容
application/json 请求主体是 JSON 格式字符串 {name:‘zs’, age:18}
HTTP协议规定响应消息内容类型(Content-Type)有哪些？—— 有很多种
text/html、 文本
text/plain、
text/css、
application/javascript、
image/jpeg、
application/mpeg3、
application/json、
…
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jjeV8I6s-1688702512127)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day03\assets\1677133337805.png)]
实现页面跳转
吐司对话框—— 用于简单的提醒，非重要事件的提示
uni.showToast( {title, icon, duration} )
模态对话框 —— 用于严重的提示，甚至必须作出选择的提示
uni.showModal({title, content })
加载中对话框—— 提示操作正在进行中
uni.showLoading( ) / uni.hideLoading()
动作清单对话框—— 让用户选择要执行的动作
uni.showActionSheet( )
导航跳转：、 uni.navigateTo( )
导航返回跳转：、 uni.navigateBack( )
重定向跳转：、 uni.redirectTo( )
切换页签跳转：、 uni.switchTab ( )
重启跳转：、 uni.reLaunch( )
删除uni.promisify.adaptor.js内容
Ajax集中管理
因为ajax访问在应用开发中频繁使用、代码复杂，且接口地址、数据结构等可能会发生变化
所以将ajax相关代码提取为方法，统一保存管理在外部文件中
创建service/index.js
/* 将对服务器接口的访问代码进行封装 */
/**
* 服务器端基础地址
*/
export let base = 'https://www.codeboy.com/zhsqapi/'
/**
* API-1.2、用户登录
* 接口地址：user/login
* 请求方式：POST
* 请求主体格式：application/json
* 名称 必填 类型 说明
* phone 是 string 手机号
* pwd 是 string 密码
*/
export let userLogin = async (phone, pwd) => {
// 1.拼接url
let url = base + 'user/login'
// async await 强制请求转换为同步,会等待上个操作完成 可能出现白屏 所以要加loading
// 2.提示loading
uni.showLoading({
title: '登录中...'
})
// 3.发起异步请求
let [err, res] = await uni.request({
url, // 请求接口地址
method: 'POST',
data: {
phone,
pwd
},
});
// 4.取消loading
uni.hideLoading()
// 5.返回数据
return res.data
}
// 使用时 login.js
import {userLogin} from '../../service'
async login() {
let data = await userLogin(this.phone, this.pwd)
// 4.校验错误,提示
if (data.code != 2000) {
uni.showToast({
title: '登录失败',
icon: 'none',
duration: 2000,
position: 'bottom'
})
return
}
}
登录完整代码
处理吐司弹窗
无法实现吐司弹窗结束后页面跳转
所以需要将吐司提示放置到目标页-index.vue中实现
login.vue
index.vue
//生命周期方法：组件加载完成
async onLoad() {
//弹出“欢迎回来”提示框
uni.showToast({
title:'欢迎回来',
icon: 'none',
duration: 3000
})
},
吐司封装
1.和接口写一块 service/index.js
export let showToast = (title, icon = 'none', position = 'bottom', duration = 2000) => {
uni.showToast({
title,
icon,
position,
duration
})
}
login.js
import {showToast,} from '../../service'
showToast('密码长度不正确')
2.App.vue
export default {
methods: {
toast(title, icon = 'none', position = 'bottom', duration = 2000) {
uni.showToast({
title,
icon,
position,
duration
})
}
}
}
login.js
getApp().toast("toast")
3.main.js
vue对象上绑定一个toast() 使用this.toast就可以获取这个
// 在vue上增加自定义方法
Vue.prototype.toast = (title, icon = 'none', position = 'bottom', duration = 2000) => {
uni.showToast({
title,
icon,
position,
duration
})
}
使用时 login
this.toast("toast") //this不能省
令牌机制
令牌概念
HTTP协议属于**“无状态协议”**——客户端发起一个HTTP请求，服务器返回一个HTTP响应，服务器不会记录客户端的任何信息。实际应用中，很多场景下需要服务器记录客户端访问信息：例如根据访问历史进行后续的推荐、主题选择、购物车…
实现这类效果可用的技术：Cookie、SessionStorage&LocalStorage、Session、Token
Token：令牌，用于证明客户端身份的机制。
**原理：服务器端把客户端的信息保存在一个对象中，**加密为一个定长字符串，发送给客户端；客户端保存起来；等到下次请求时，客户端可以再把加密字符串返回给服务器；服务器可以解密出其中的原始信息，从而进一步查询更多信息——类似于银行给客户端的“银行卡”，其中存储着客户端的信息（加密存储，客户端是读不懂的），后续有些请求需要客户端出示此“银行卡”有些请求则不需要。
| 客户端 | 服务器 |
|---|---|
| 1、客户端发送简单请求，包含phone和pwd | |
| 2、服务器验证登录信息，成功后，把客户端信息保存在一个对象中，形如：{ 用户编号：123, 用户名：yaya， 登录时间：x年x月x日 xx:xx:xx, 登录过期时间：x年x月x日 xx:xx:xx …. } | |
| 3.服务器将上述对象加密为定长字符串（即token）；随同响应消息一同返回给客户端： { code:2000, msg: ‘login succ’, token: ‘加密后的定长字符串’ } | |
| 4、接收到响应消息，把其中的token保存在客户端 uni.setStorageSync(‘userToken’, data.token) | |
| 5、从客户端读取之前保存的token let token=uni.getStorageSync(‘userToken’) | |
| 6、发送请求消息，把token放在请求消息头中（与后端协商好的请求头） uni.request({ url, header:{ token: token } }) 生成的请求消息形如： GET /index/data HTTP1.1 token: ‘‘加密后的字符串’’ | |
| 7、服务器接收到请求消息，从请求头中读取req.headers.token（即token），解密令牌，得到原始的令牌信息，即：{ 用户编号：123, 用户名：yaya 登录时间：x年x月x日 xx:xx:xx, 登录过期时间：x年x月x日 xx:xx:xx …. } | |
| 8、服务器根据用户信息查询数据库，将用户信息返回给客户端 |
本地存储
异步操作localStorage：
uni.setStorage(k, v, success(){})
uni.getStorage(k, success(){})
uni.removeStorage(k, success(){})
uni.clearStorage( success(){} )
同步操作localStorage：
uni.setStorageSync(k, v)
uni.getStorageSync(k)
uni.removeStorageSync(k)
uni.clearStorageSync( )
uni.setStorageSync('userToken', data.token);//存
uni.getStorageSync('userToken') //取
获取主页数据
service/index.js中提供后去主页数据方法
传输令牌 获取数据
/**
* API-2.1、首页数据
* 接口地址：index/data
* 请求方式：GET
* 请求头部：token - 用户登录后保存在客户端的身份凭证
*/
export let indexData = async ( )=>{
//1.准备请求URL
let url = base + 'index/data'
//2.显示“加载中”提示框
uni.showLoading({
title: '首页数据读取中'
})
//3.发起异步请求消息
let [err, res] = await uni.request({
url, //请求地址
header: { //请求头部-token(客户端身份令牌)
token: uni.getStorageSync('userToken')
}
})
//4.隐藏“加载中”提示框
uni.hideLoading()
//5.返回响应消息主体
return res.data
}
index.vue在onLoad()中获取主页数据
import { indexData, base } from '@/service'
//生命周期方法：组件加载完成
async onLoad() {
//弹出“欢迎回来”提示框
uni.showToast({
title:'欢迎回来',
icon: 'none',
duration: 3000
})
//向服务器请求首页数据
let data = await indexData()
console.log(data)
},
生命周期方法
应用程序生命周期方法
整个应用程序的生命周期方法 —— App.vue —— 高仿微信小程序**
onLaunch()：整个应用程序启动了
onShow()：应用程序显示出来，例如：第一次启动完成、从其它应用切换会当前应用
onHide()：应用程序隐藏起来了，例如：来电话了、用户点击桌面按钮
页面生命周期方法
页面的生命周期方法 —— pages —— 高仿微信小程序**
**onLoad()：**当前页面挂载完成，功能类似于mounted
onShow()：页面显示出来了，例如：第一次挂载完成、导航返回之前的页面
onReady()：页面准备就绪了，每个页面此方法调用且仅调用一次——第一次调用onShow之后
onHide()：页面隐藏起来了，例如：导航跳转到下一个页面
**onUnload()****：**当前页面完成卸载，功能类似于destroyed
onPageScroll()：页面滚动了
**onReachBottom()****：**页面滚动到底部了
onPullDownRefresh()：页面在顶部下拉刷新了
组件生命周期方法
组件的生命周期方法 —— components —— 高仿Vue.js
创建时期：beforeCreate()、created()
挂载时期：beforeMount()、mounted()
更新时期：beforeUpdate()、updated()
销毁时期：beforeDestroy()、destroyed()
主页开发
保存主页数据
轮播图实现
swiper
滑块视图容器。
一般用于左右滑动或上下滑动，比如banner轮播图。
注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。
属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| indicator-dots | Boolean | false | 是否显示面板指示点 | |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 | |
| indicator-active-color | Color | #000000 | 当前选中的指示点颜色 | |
| active-class | String | swiper-item 可见时的 class | 支付宝小程序 | |
| changing-class | String | acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class | 支付宝小程序 | |
| autoplay | Boolean | false | 是否自动切换 | |
| current | Number | 0 | 当前所在滑块的 index | |
| current-item-id | String | 当前所在滑块的 item-id ，不能与 current 被同时指定 | 支付宝小程序不支持 | |
| interval | Number | 5000 | 自动切换时间间隔 | |
| duration | Number | 500 | 滑动动画时长 | app-nvue不支持 |
| circular | Boolean | false | 是否采用衔接滑动，即播放到末尾后重新回到开头 | |
| vertical | Boolean | false | 滑动方向是否为纵向 | |
| previous-margin | String | 0px | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 | app-nvue、字节跳动小程序、飞书小程序不支持 |
| next-margin | String | 0px | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 | app-nvue、字节跳动小程序、飞书小程序不支持 |
| acceleration | Boolean | false | 当开启时，会根据滑动速度，连续滑动多屏 | 支付宝小程序 |
| disable-programmatic-animation | Boolean | false | 是否禁用代码变动触发 swiper 切换时使用动画。 | 支付宝小程序 |
| display-multiple-items | Number | 1 | 同时显示的滑块数量 | app-nvue、支付宝小程序不支持 |
| skip-hidden-item-layout | Boolean | false | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 | App、微信小程序、京东小程序 |
| disable-touch | Boolean | false | 是否禁止用户 touch 操作 | App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序与飞书小程序（只在初始化时有效，不能动态变更） |
| touchable | Boolean | true | 是否监听用户的触摸事件，只在初始化时有效，不能动态变更 | 字节跳动小程序与飞书小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch） |
| easing-function | String | default | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic | 微信小程序、快手小程序、京东小程序 |
| @change | EventHandle | current 改变时会触发 change 事件，event.detail = {current: current, source: source} | ||
| @transition | EventHandle | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy | App、H5、微信小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序 | |
| @animationfinish | EventHandle | 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} | 字节跳动小程序与飞书小程序不支持 |
宫格图实现
需要安装uni-grid组件
组件名：uni-grid
宫格组件。
uni-grid 属性说明：
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| column | Number | 3 | 每列显示个数 |
| borderColor | String | #d0dee5 | 边框颜色 |
| showBorder | Boolean | true | 是否显示边框 |
| square | Boolean | true | 是否方形显示 |
| highlight | Boolean | true | 点击背景是否高亮 |
{{item.title}}
商业服务功实现
需要安装uni-card扩展组件
组件名：uni-card
卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。
Card Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | String | - | 标题文字 |
| sub-title | String | - | 副标题文字 |
| extra | String | - | 标题额外信息 |
| thumbnail | String | - | 标题左侧缩略图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如：/static/xxx.png |
| cover | String | - | 封面图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如：/static/xxx.png |
| is-full | Boolean | false | 卡片内容是否通栏，为true时将去除padding值 |
| is-shadow | Boolean | false | 卡片内容是否开启阴影 |
| shadow | String | 0px 0px 3px 1px rgba(0, 0, 0, 0.08) | 卡片阴影,需符合 css 值 |
| border | Boolean | true | 卡片边框 |
| margin | String | 10px | 卡片外边距 |
| spacing | String | 10px | 卡片内边距 |
| padding | String | 10px | 卡片内容内边距 |
| border | Boolean | true | 卡片边框 |
| mode[弃用] | String | basic | 卡片模式 ，可选值， basic：基础卡片 ；style ：图文卡片 ； title ：标题卡片 |
| note[弃用] | String | - | 底部信息 |
房屋租售
租房
短租
便民服务
便利店
超市
App.vue
//清除自定义样式对系统默认组件的影响
view.card {
flex-direction: column;
//使用!important提升当前样式的优先级，可以覆盖系统默认样式
margin-top: $uni-spacing-col-base !important;
}
.service {
width: 100%;
.service-item {
//弹性子元素尺寸增长权重为：1
flex: 1;
padding-top: $uni-spacing-col-sm;
padding-bottom: $uni-spacing-col-sm;
&:nth-child(1) {padding-right: $uni-spacing-row-sm;}
&:nth-child(2) {padding-left: $uni-spacing-row-sm;}
justify-content: space-between; //弹性容器中的子元素在主轴方向上：空白在中央
align-items: center; //弹性容器中的子元素在交叉轴方向上：居中对齐
.img { width: 150rpx; height: 120rpx;}
.txt {
font-size: $uni-font-size-sm;
flex-direction: column;
flex: 1; //弹性子元素尺寸增长权重：1
navigator {margin-right: $uni-spacing-row-sm;}
}
}
}
社区活动功能实现
需要安装uni-ist
组件名：uni-list
List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
List Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| border | Boolean | true | 是否显示边框 |
ListItem Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | String | - | 标题 |
| note | String | - | 描述 |
| ellipsis | Number | 0 | title 是否溢出隐藏，可选值，0:默认; 1:显示一行; 2:显示两行; |
| thumb | String | - | 左侧缩略图，若thumb有值，则不会显示扩展图标 |
| thumbSize | String | medium | 略缩图尺寸，可选值，lg:大图; medium:一般; sm:小图; |
| showBadge | Boolean | false | 是否显示数字角标 |
| badgeText | String | - | 数字角标内容 |
| badgeType | String | - | 数字角标类型，参考uni-icons |
| badgeStyle | Object | - | 数字角标样式，使用uni-badge的custom-style参数 |
| rightText | String | - | 右侧文字内容 |
| disabled | Boolean | false | 是否禁用 |
| showArrow | Boolean | true | 是否显示箭头图标 |
| link | String | navigateTo | 新页面跳转方式，可选值见下表 |
| to | String | - | 新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功 |
| clickable | Boolean | false | 是否开启点击反馈 |
| showSwitch | Boolean | false | 是否显示Switch |
| switchChecked | Boolean | false | Switch是否被选中 |
| showExtraIcon | Boolean | false | 左侧是否显示扩展图标 |
| extraIcon | Object | - | 扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'}，参考 uni-icons |
| direction | String | row | 排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制 |
ListItem Slots 插槽
| 名称 | 说明 |
|---|---|
| header | 左/上内容插槽，可完全自定义默认显示 |
| body | 中间内容插槽，可完全自定义中间内容 |
| footer | 右/下内容插槽，可完全自定义右侧内容 |
通过插槽扩展 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现 如果
uni-list-item组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。 uni-list-item提供了3个可扩展的插槽：header、body、footer
- 当
direction属性为row时表示水平排列，此时header表示列表的左边部分，body表示列表的中间部分，footer表示列表的右边部分- 当
direction属性为column时表示垂直排列，此时header表示列表的上边部分，body表示列表的中间部分，footer表示列表的下边部分 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。
{{a.title}}
{{a.content}}
{{a.startTime | datetime}}
uni.scss
CSS中如何实现“文本在一行中显示，如果有溢出，则使用省略号代替”？
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* 自定义的样式混入 */
@mixin ellipsis-1 {
white-space: nowrap; //文本在空白处不换行
overflow: hidden; //内容溢出的话则隐藏
text-overflow: ellipsis; //如果发生文本溢出则用省略号代替
}
@mixin ellipsis-2 {
}
@mixin ellipsis-3 {
}
.activity-item {
align-items: center;//弹性容器中的子元素交叉轴上居中对齐
.activity-body {
flex-direction: column;
width: 420rpx; //父元素指定宽度，子元素就可能显示省略号
.title {
font-size: $uni-font-size-base - 1;
@include ellipsis-1;
}
.content {
font-size: $uni-font-size-sm;
color:$uni-text-color-grey;
@include ellipsis-1;
}
.time {
font-size: $uni-font-size-sm;
color:$uni-text-color-grey;
}
}
.pic {
width:240rpx;
flex-shrink: 0;//弹性子元素尺寸收缩权重： 0 —— 参与尺寸缩小
}
}
时间戳转化
https://www.w3school.com.cn/jsref/jsref_obj_date.asp
dateTime(num) {
let date = new Date(num); // 创建 Date 对象并传入时间戳
let year = date.getFullYear(); // 获取年份
let month = date.getMonth() + 1; // 获取月份（注意加 1）
month = month < 10 ? '0' + month : month
let day = date.getDate(); // 获取日期
day = day < 10 ? '0' + day : day
let hours = date.getHours(); // 获取小时
hours = hours < 10 ? '0' + hours : hours
let minutes = date.getMinutes(); // 获取分钟
minutes = minutes < 10 ? '0' + minutes : minutes
return `${year}-${month}-${day} ${hours}:${minutes}`; // 返回日期时间字符串
}
vue过滤器
// 在vue上绑定过滤器 main.js 配置全局过滤器
Vue.filter('dateTime', (num) => {
let date = new Date(num); // 创建 Date 对象并传入时间戳
let year = date.getFullYear(); // 获取年份
let month = date.getMonth() + 1; // 获取月份（注意加 1）
month = month < 10 ? '0' + month : month
let day = date.getDate(); // 获取日期
day = day < 10 ? '0' + day : day
let hours = date.getHours(); // 获取小时
hours = hours < 10 ? '0' + hours : hours
let minutes = date.getMinutes(); // 获取分钟
minutes = minutes < 10 ? '0' + minutes : minutes
return `${year}-${month}-${day} ${hours}:${minutes}`; // 返回日期时间字符串
})
//使用
<text class="time">{{act.startTime|dateTime }}</text>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OKV27mth-1688702512129)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day04\assets\image-20230224063109827.png)]
main.js
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
//声明全局过滤器——可供所有的页面/组件使用
Vue.filter('datetime', (num)=>{
//参数是数字——时间戳，返回日期时间字符串
let d = new Date(num) //把时间戳转换为日期对象
//获取Date中的不同部分
let yy = d.getFullYear()
let mm = d.getMonth() + 1 //注意：默认的月份是0~11
mm = mm<10 ? '0'+mm : mm
let dd = d.getDate()
dd = dd<10 ? '0'+dd : dd
let hh = d.getHours()
hh = hh<10 ? '0'+hh : hh
let mi = d.getMinutes()
mi = mi<10 ? '0'+mi : mi
return `${yy}-${mm}-${dd} ${hh}:${mi}`
})
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
缴费列表页面开发
property-fee.vue
标题栏开发
样式穿透
Vue.js / uni-app经典面试题：样式穿透是什么？
设法让父组件因为使用scoped属性产生的data-v-随机数 属性在所有的子组件体内元素上也生成一份，这样一来父组件的样式就可以应用到子组件内
样式穿透：让父组件内编写的样式可以作用到子组件内。实现方法：
CSS： >>> 选择器 { }
Less： /deep/ 选择器 { }
SCSS： ::v-deep 选择器 { }
页面 parent.vue
PARENT1
PARENT2
组件 zh-child.vue
CHILD1
CHILD2
累积费用统计开发
当前待缴费用(元)
￥{{amount}}
.fee-statistics {
background-color: $zh-theme-color;
border-top: $uni-border;
padding: $uni-spacing-col-lg*3 0;
flex-direction: column; //弹性容器的主轴方向：纵向
align-items: center; //弹性容器中的子元素在交叉轴上居中对齐
color: $uni-text-color-inverse;
.hint {
font-size: $uni-font-size-lg;
margin-bottom: $uni-spacing-col-base;
}
.amount {
font-size: $uni-font-size-base * 2.5;
font-weight: bold;
}
}
各项费用的列表开发
/**
* API-3.1、当前登录用户各项待缴费金额汇总
* 接口地址：fee/list
* 请求方式：GET
* 请求头部：token - 用户登录后保存在客户端的身份凭证
*/
export let feeList = async ( )=>{
//1.准备请求URL
let url = base + 'fee/list'
//2.显示“加载中”提示框
uni.showLoading({
title: '缴费数据读取中'
})
//3.发起异步请求消息
let [err, res] = await uni.request({
url, //请求地址
header: { //请求头部-token(客户端身份令牌)
token: uni.getStorageSync('userToken')
}
})
//4.隐藏“加载中”提示框
uni.hideLoading()
//5.返回响应消息主体
return res.data
}
缴费记录页面开发
feeRecord.vue
下拉菜单/数据拾取器
{{curFeeType<0 ? '缴费类型' : feeTypes[curFeeType] }}
{{curMonth}}
缴费记录卡片开发
{{curFeeType<0 ? '缴费类型' : feeTypes[curFeeType] }}
{{curMonth}}
缴费类型过滤器
// 缴费类型查询缴费类型名称
Vue.filter("feeType", (type) => {
let arr = ['全部类型', '水费', '电费', '燃气费', '物业费', '停车费', '宽带费']
// return arr[type] == null ? '未知类型' : arr[type]
// ？？运算福 第一个表达式的值存在，返回该值，否则返回第二个表达式的值
return arr[type] ?? "未知类型"
})
// 缴费类型查询缴费类型图片
Vue.filter("feeTypeIcon", (type) => {
// 1-shui.png 2-dian.png 3-ranqi.png 4-wuye.png 5-tingche.png
let arr = ['logo2', 'shui', 'dian', 'ranqi', 'wuye', 'tingche', 'kuandai']
let imgName = arr[type] ?? 'logo2'
return `/static/img/${imgName}.png`
})
获取缴费记录
service/index.js
/**
* API-3.4、当前登录用户缴费记录
* 接口地址：fee/record
* 请求方式：GET
* 请求参数：
* type - 费用的类型；
* startTime - 缴费开始时间（时间戳数字）；
* endTime - 缴费结束时间（时间戳数字）；
* 请求头部：token - 用户登录后保存在客户端的身份凭证
*/
export let feeRecord = async (type, startTime, endTime)=>{
//1.准备请求URL
//根据HTTP协议规定，URL后出现的“?k=v&k=v” 称为“查询字符串(QueryString)”或“搜索参数(SearchParams)”
let url = base + `fee/record?type=${type}&startTime=${startTime}&endTime=${endTime}`
//2.显示“加载中”提示框
uni.showLoading({
title: '缴费记录读取中'
})
//3.发起异步请求消息
let [err, res] = await uni.request({
url, //请求地址
header: { //请求头部-token(客户端身份令牌)
token: uni.getStorageSync('userToken')
}
})
//4.隐藏“加载中”提示框
uni.hideLoading()
//5.返回响应消息主体
return res.data
}
{{curFeeType<0 ? '缴费类型' : feeTypes[curFeeType] }}
{{curMonth}}
没有查询到相关记录
main.js
Vue.filter('feeType', (num)=>{
//1-水费 2-电费 3-燃气费 4-物业费 5-停车费 6-宽带费
//此处可以使用 if...else... 或者 switch...case... 或者：
let arr = ['全部类型', '水费', '电费', '燃气费', '物业费', '停车费', '宽带费']
let type = arr[num] ?? '未知类型'
//??运算符表示：第一个表达式的值如果存在，就返回它的值；否则就返回第二个表达式的值
return type
})
Vue.filter('feeTypeIcon', (num)=>{
//1-shui 2-dian 3-ranqi 4-wuye 5-tingche 6-kuandai
//此处可以使用 if...else... 或者 switch...case... 或者：
let arr = ['logo2', 'shui', 'dian', 'ranqi', 'wuye', 'tingche', 'kuandai']
let type = arr[num] ?? 'logo2'
//??运算符表示：第一个表达式的值如果存在，就返回它的值；否则就返回第二个表达式的值
return `../../static/img/${type}.png`
})
缴费页面开发
feePay.vue
<uni-list class="list-amount">
<uni-list-item class="list-item" :title="type |feeType" :thumb="type | feeTypeIcon" thumbSize="lg">
<template v-slot:footer>
<view class="footer-amount">
<input type="digit" placeholder="请输入缴费金额" />
<text>元</text>
</view>
</template>
</uni-list-item>
</uni-list>
接收类型信息
自定义导航栏
.nav-bar{
display: block;
::v-deep .uni-navbar__content{
display: block;
}
}
缴费类型&金额
元
.list-amount {
margin-top: $uni-spacing-col-base;
.footer-amount {
font-size: $uni-font-size-base;
align-items: center; //弹性容器中的子元素在交叉轴上居中对齐
input {font-size: $uni-font-size-base; width: 8em;}
}
}
缴费详情
.list-details{
margin-top: $uni-spacing-col-base;
.user-id{
font-size: $uni-font-size-sm;
text-align: right;
}
}
立即缴费按钮
.subBut{
background-color: $zh-theme-color;
color: $uni-text-color-inverse;
width: 90%;
margin: 100rpx auto 0;
&:active{
background-color: darken($zh-theme-color,5%);
}
}
收费单位列表
/*
3.2、获取指定类型的收费单位列表
接口地址：fee/collector
请求方式：GET
请求主体：无
请求示例：fee/collector?type=2
请求数据说明：
名称 必填 类型 说明
type 是 number 收费类型 1-水费、2-电费、3-燃气费、4-物业费、5-停车费、6-宽带费
*/
export let feeCollector = async (type)=>{
//1.准备URL
let url = base + 'fee/collector'
//2.显示loading..
uni.showLoading({
title:"加载信息中.."
})
//3.访问接口获取数据
let [err,res] = await uni.request({
url,
data:{type}
})
//4.取消loading..
uni.hideLoading()
//5.返回数据
return res.data;
}
缴费单位
.popup-content{
flex-direction: column;
width: 600rpx;
background-color: $uni-bg-color;
.popup-header{
background-color: $zh-theme-color;
color: $uni-text-color-inverse;
font-size: $uni-font-size-lg;
padding: $uni-spacing-col-base 0;
justify-content: center;
}
.popup-body{
padding: $uni-spacing-col-base 0;
.radio-group{
display: flex;
flex-direction: column;
width: 100%;
.radio-item{
display: flex;
flex-direction: row;
width: 100%;
padding: $uni-spacing-col-base;
text{
flex:1;
}
}
}
}
.popup-footer{
box-shadow: 0 0 16rpx $uni-border-color;
padding: $uni-spacing-col-base $uni-spacing-row-base;
button{
font-size: $uni-font-size-base;
background-color: $zh-theme-color;
color: $uni-text-color-inverse;
}
}
}
用户信息加载
/*
4.1、根据业主缴费编号查询该业主的基本信息
接口地址：household/query
请求方式：GET
请求主体：无
请求示例：household/query?hhid=S60011
注意：前端对此接口的请求需要防抖，时间间隔在2s以上
名称 必填 类型 说明
hhid 必需 string 待查询的业主缴费编号
*/
export let householdQuery = async (hhid)=>{
//1.拼接地址
let url = base + 'household/query';
//2.访问接口获取数据
let [err,res] = await uni.request({
url,
data:{hhid}
})
//3.返回数据
return res.data;
}
防抖机制
防抖机制：
多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行
使用场景：
频繁触发事件，搜索框输入值，及滚动条触发事件
实现方法：
方式1：非立即执行
非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则重新计算函数执行时间
方式2：立即执行
立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果
缴费信息提交
/*
3.3、提交缴费记录
接口地址：fee/add
请求方式：POST
请求主体格式：application/json
请求头部：token - 用户登录后保存在客户端的身份凭证
请求数据说明：
名称 必填 类型 说明
token 是 string 请求头部中必须携带登录成功后得到的身份令牌，且必须在有效期内
type 是 number 1-水费、2-电费、3-燃气费、4-物业费、5-停车费、6-宽带费
collectorId 是 number 收费单位编号
householdId 是 string 业主用户编号
amount 是 float(10,2) 缴费金额
*/
export let feeAdd = async (type,collectorId,householdId,amount)=>{
//1.准备地址
let url = base + 'fee/add';
//2.显示loading..
uni.showLoading({
title:"执行中.."
})
//3.访问接口
let [err,res] = await uni.request({
url,
method:"POST",
data:{type,collectorId,householdId,amount},
header:{"token":uni.getStorageSync("userToken")}
})
//4.关闭loading..
uni.hideLoading();
//5.返回结果
return res.data;
}
完整代码
feePay.vue
元
缴费单位
index.js
/*
3.2、获取指定类型的收费单位列表
接口地址：fee/collector
请求方式：GET
请求主体：无
请求示例：fee/collector?type=2
请求数据说明：
名称 必填 类型 说明
type 是 number 收费类型， 1-水费、2-电费、3-燃气费、
4-物业费、5-停车费、6-宽带费
*/
export let feeCollector = async (type)=>{
//1.准备URL
let url = base + 'fee/collector'
//2.显示loading..
uni.showLoading({
title:"加载信息中.."
})
//3.访问接口获取数据
let [err,res] = await uni.request({
url,
data:{type}
})
//4.取消loading..
uni.hideLoading()
//5.返回数据
return res.data;
}
/*
4.1、根据业主缴费编号查询该业主的基本信息
接口地址：household/query
请求方式：GET
请求主体：无
请求示例：household/query?hhid=S60011
注意：前端对此接口的请求需要防抖，时间间隔在2s以上
名称 必填 类型 说明
hhid 必需 string 待查询的业主缴费编号
*/
export let householdQuery = async (hhid)=>{
//1.拼接地址
let url = base + 'household/query';
//2.访问接口获取数据
let [err,res] = await uni.request({
url,
data:{hhid}
})
//3.返回数据
return res.data;
}
/*
3.3、提交缴费记录
接口地址：fee/add
请求方式：POST
请求主体格式：application/json
请求头部：token - 用户登录后保存在客户端的身份凭证
请求数据说明：
名称 必填 类型 说明
token 是 string 请求头部中必须携带登录成功后得到的身份令牌，且必须在有效期内
type 是 number 1-水费、2-电费、3-燃气费、4-物业费、5-停车费、6-宽带费
collectorId 是 number 收费单位编号
householdId 是 string 业主用户编号
amount 是 float(10,2) 缴费金额
*/
export let feeAdd = async (type,collectorId,householdId,amount)=>{
//1.准备地址
let url = base + 'fee/add';
//2.显示loading..
uni.showLoading({
title:"执行中.."
})
//3.访问接口
let [err,res] = await uni.request({
url,
method:"POST",
data:{type,collectorId,householdId,amount},
header:{"token":uni.getStorageSync("userToken")}
})
//4.关闭loading..
uni.hideLoading();
//5.返回结果
return res.data;
}
main.js
// 缴费类型查询缴费类型名称
Vue.filter("feeType", (type) => {
let arr = ['全部类型', '水费', '电费', '燃气费', '物业费', '停车费', '宽带费']
// return arr[type] == null ? '未知类型' : arr[type]
// ？？运算福 第一个表达式的值存在，返回该值，否则返回第二个表达式的值
return arr[type] ?? "未知类型"
})
// 缴费类型查询缴费类型图片
Vue.filter("feeTypeIcon", (type) => {
// 1-shui.png 2-dian.png 3-ranqi.png 4-wuye.png 5-tingche.png
let arr = ['logo2', 'shui', 'dian', 'ranqi', 'wuye', 'tingche', 'kuandai']
let imgName = arr[type] ?? 'logo2'
return `/static/img/${imgName}.png`
})
智慧停车
UniApp地图配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8RPZhqdi-1688702512130)(C:/Users/TEACHER/Desktop/UniAPP/Day07/assets/image-20230330095006703.png)]
申请高德地图key
高德地图开放平台:https://lbs.amap.com/
高德地图坐标拾取器:https://lbs.amap.com/tools/picker
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lqUhdO5O-1688702512131)(C:/Users/TEACHER/Desktop/UniAPP/Day07/assets/image-20230330095510325.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AUorql8K-1688702512132)(C:/Users/TEACHER/Desktop/UniAPP/Day07/assets/image-20230330095950134.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OHZD9cMH-1688702512133)(C:/Users/TEACHER/Desktop/UniAPP/Day07/assets/image-20230330100226903.png)]
地图组件
Map
地图组件。
地图服务商说明
| 地图服务商 | App | H5 | 微信小程序 |
|---|---|---|---|
| 高德 | √ | 3.6.0+ | |
| Goolge | 3.4+ | 3.2.10+ | |
| 腾讯 | √ | √ |
map属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| longitude | Number | 中心经度 | ||
| latitude | Number | 中心纬度 | ||
| scale | Number | 16 | 缩放级别，取值范围为3-20 | 高德地图缩放比例与微信小程序不同 |
| theme | String | normal | 主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持） | 京东小程序 |
| min-scale | Number | 3 | 最小缩放级别 | App-nvue 3.1.0+、微信小程序2.13+ |
| max-scale | Number | 20 | 最大缩放级别 | App-nvue 3.1.0+、微信小程序2.13+ |
| layer-style | Number/String | 1 | 个性化地图 | App-nvue 3.1.0+、微信小程序2.13+ |
| markers | Array | 标记点 | ||
| polyline | Array | 路线 | 飞书小程序不支持 | |
| circles | Array | 圆 | ||
| controls | Array | 控件 | ||
| include-points | Array | 缩放视野以包含所有给定的坐标点 | App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序 | |
| enable-3D | Boolean | false | 是否显示3D楼块 | App-nvue 2.1.5+、微信小程序2.3.0 |
| show-compass | Boolean | false | 是否显示指南针 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-zoom | Boolean | true | 是否支持缩放 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-scroll | Boolean | true | 是否支持拖动 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-rotate | Boolean | false | 是否支持旋转 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-overlooking | Boolean | false | 是否开启俯视 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-satellite | Boolean | false | 是否开启卫星图 | App-nvue 2.1.5+、微信小程序2.7.0 |
| enable-traffic | Boolean | false | 是否开启实时路况 | App-nvue 2.1.5+、微信小程序2.7.0 |
| enable-poi | Boolean | false | 是否展示 POI 点 | App-nvue 3.1.0+ |
| enable-building | Boolean | false | 是否展示建筑物 | App-nvue 3.1.0+ 支持 (废除原enable-3D属性 高德地图默认开启建筑物就是3D无法设置) |
| show-location | Boolean | 显示带有方向的当前定位点 | 微信小程序、H5、百度小程序、支付宝小程序、京东小程序 | |
| polygons | Array. |
多边形 | App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序、支付宝小程序 | |
| enable-indoorMap | Boolean | false | 是否展示室内地图 | App-nvue 3.1.0+ |
| @markertap | EventHandle | 点击标记点时触发，e.detail = {markerId} | App-nvue 2.3.3+、H5、微信小程序、支付宝小程序 （App和H5平台需要指定 marker 对象属性 id） | |
| @labeltap | EventHandle | 点击label时触发，e.detail = {markerId} | 微信小程序2.9.0 | |
| @callouttap | EventHandle | 点击标记点对应的气泡时触发，e.detail = {markerId} | ||
| @controltap | EventHandle | 点击控件时触发，e.detail = {controlId} | ||
| @regionchange | EventHandle | 视野发生变化时触发 | 微信小程序、H5、百度小程序、支付宝小程序、京东小程序 | |
| @tap | EventHandle | 点击地图时触发; App-nvue、微信小程序2.9支持返回经纬度 | ||
| @updated | EventHandle | 在地图渲染更新完成时触发 | 微信小程序、H5、百度小程序 | |
| @anchorpointtap | EventHandle | 点击定位标时触发，e.detail = {longitude, latitude} | App-nvue 3.1.0+、微信小程序2.13+ | |
| @poitap | EventHandle | 点击地图poi点时触发，e.detail = {name, longitude, latitude} | 微信小程序2.3.0+ |
注意
组件的宽/高推荐写直接量，比如：750rpx，不要设置百分比值。- 谷歌地图使用
wgs84坐标，其他地图使用gcj02坐标，用错坐标类型会显示偏移。
标记点markers
标记点用于在地图上显示标记的位置
| 属性 | 说明 | 类型 | 必填 | 备注 | 平台差异说明 |
|---|---|---|---|---|---|
| id | 标记点id | Number | 是 | marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。最大限制9位数 | |
| latitude | 纬度 | Number | 是 | 浮点数，范围 -90 ~ 90 | |
| longitude | 经度 | Number | 是 | 浮点数，范围 -180 ~ 180 | |
| title | 标注点名 | String | 否 | 点击时显示，callout存在时将被忽略 | App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序 |
| iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径，支持相对路径写法，以’/'开头则表示相对小程序根目录；也支持临时路径 | |
| rotate | 旋转角度 | Number | 否 | 顺时针旋转的角度，范围 0 ~ 360，默认为 0 | App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序 |
| alpha | 标注的透明度 | Number | 否 | 默认1，无透明，范围 0 ~ 1 | App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序 |
| width | 标注图标宽度 | Number | 否 | 默认为图片实际宽度 | App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序 |
| height | 标注图标高度 | Number | 否 | 默认为图片实际高度 | App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序 |
| callout | 自定义标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表，可识别换行符。 | App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序 |
| label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表，可识别换行符。 | App-nvue 2.1.5+、微信小程序、H5、App、百度小程序、支付宝小程序 |
| anchor | 经纬度在标注图标的锚点，默认底边中点 | Object | 否 | {x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| clusterId | 自定义点聚合簇效果时使用 | Number | 否 | App-nvue 3.1.0+、微信小程序 | |
| customCallout | 自定义气泡窗口 | Object | 否 | App-nvue 2.1.5+、微信小程序、支付宝小程序 | |
| aria-label | 无障碍访问，（属性）元素的额外描述 | String | 否 | App-nvue 3.1.0+、微信小程序 | |
| joinCluster | 是否参与点聚合 | Boolean | 否 | 如果指定点聚合 此选项值必须设置为true,才会生效 | App-nvue 3.1.0+、微信小程序 |
气泡callout
| 属性 | 说明 | 类型 | 平台差异说明 |
|---|---|---|---|
| content | 文本 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序、支付宝小程序 |
| color | 文本颜色 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| fontSize | 文字大小 | Number | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| borderRadius | callout边框圆角 | Number | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| borderWidth | 边框宽度 | Number | 微信小程序、京东小程序、百度小程序 |
| borderColor | 边框颜色 | String | 微信小程序、京东小程序、百度小程序 |
| bgColor | 背景色 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| padding | 文本边缘留白 | Number | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| display | ‘BYCLICK’:点击显示; ‘ALWAYS’:常显 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| textAlign | 文本对齐方式。有效值: left, right, center | String | App-nvue 2.1.5+、微信小程序、百度小程序、京东小程序 |
| anchorX | 横向偏移量，向右为正数 | Number | 微信小程序2.11.0 |
| anchorY | 纵向偏移量，向下为正数 | Number | 微信小程序2.11.0 |
marker 上的标签 label
| 属性 | 说明 | 类型 | 平台差异说明 |
|---|---|---|---|
| content | 文本 | String | |
| color | 文本颜色 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序 |
| fontSize | 文字大小 | Number | App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序 |
| x | label的坐标，原点是 marker 对应的经纬度 | Number | H5、百度小程序 |
| y | label的坐标，原点是 marker 对应的经纬度 | Number | H5、百度小程序 |
| anchorX | label的坐标，原点是 marker 对应的经纬度 | Number | App-nvue 2.1.5+、微信小程序 |
| anchorY | label的坐标，原点是 marker 对应的经纬度 | Number | App-nvue 2.1.5+、微信小程序 |
| borderWidth | 边框宽度 | Number | 微信小程序、百度小程序 |
| borderColor | 边框颜色 | String | 微信小程序、百度小程序 |
| borderRadius | 边框圆角 | Number | App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序 |
| bgColor | 背景色 | String | App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序 |
| padding | 文本边缘留白 | Number | App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序 |
| textAlign | 文本对齐方式。有效值: left, right, center | String | App-nvue 2.1.5+、微信小程序、百度小程序 |
| aria-label | 无障碍访问，（属性）元素的额外描述 | String | App-nvue 3.1.0+、微信小程序 |
地图上下文对象
地图上下文对象,用来操作地图
创建地图上下文对象
uni.createMapContext(mapId,this)
地图上下文对象API
| 方法 | 参数 | 说明 | 平台差异说明 | 最低版本 |
|---|---|---|---|---|
| getCenterLocation | OBJECT | 获取当前地图中心的经纬度，返回的是 gcj02 坐标系，可以用于 uni.openLocation | ||
| moveToLocation | OBJECT | 将地图中心移动到当前定位点，需要配合map组件的show-location使用 | ||
| translateMarker | OBJECT | 平移marker，带动画 | app-nvue 2.1.5+、微信小程序带动画、字节、支付宝、京东、百度、QQ小程序 | |
| includePoints | OBJECT | 缩放视野展示所有经纬度 | app-nvue 2.1.5+、微信、字节、支付宝、京东、百度、快手、QQ小程序 | |
| getRegion | OBJECT | 获取当前地图的视野范围 | ||
| getRotate | OBJECT | 获取当前地图的旋转角 | 微信、字节、支付宝、京东、QQ小程序 | |
| getScale | OBJECT | 获取当前地图的缩放级别 | ||
| getSkew | OBJECT | 获取当前地图的倾斜角 | 微信、字节、支付宝、京东、QQ小程序 | |
| addCustomLayer | OBJECT | 添加个性化图层 | 微信小程序 | |
| addGroundOverlay | OBJECT | 创建自定义图片图层，图片会随着地图缩放而缩放 | App-nvue 3.1.0+，微信、字节小程序 | |
| addMarkers | OBJECT | 添加 marker | App-nvue 3.1.0+，微信小程序 | |
| fromScreenLocation | OBJECT | 获取屏幕上的点对应的经纬度，坐标原点为地图左上角 | 微信小程序 | |
| initMarkerCluster | OBJECT | 初始化点聚合的配置，未调用时采用默认配置 | App-nvue 3.1.0+，微信小程序 | |
| moveAlong | OBJECT | 沿指定路径移动 marker，用于轨迹回放等场景。动画完成时触发回调事件，若动画进行中，对同一 marker 再次调用 moveAlong 方法，前一次的动画将被打断。 | 支持 android 不支持autoRotate属性设置 默认ture | App-nvue 3.1.0+，微信、字节小程序 |
| openMapApp | OBJECT | 拉起地图APP选择导航。 | App-nvue 3.1.0+，微信、字节、快手小程序 | |
| removeCustomLayer | OBJECT | 移除个性化图层 | 微信小程序 | |
| removeGroundOverlay | OBJECT | 移除自定义图片图层 | App-nvue 3.1.0+，微信小程序 | |
| removeMarkers | OBJECT | 移除 marker。 | App-nvue 3.1.0+，微信小程序 | |
| setCenterOffset | OBJECT | 设置地图中心点偏移，向后向下为增长，屏幕比例范围(0.25~0.75)，默认偏移为[0.5, 0.5] | 微信、字节小程序 | |
| toScreenLocation | OBJECT | 获取经纬度对应的屏幕坐标，坐标原点为地图左上角。 | 微信小程序 | |
| updateGroundOverlay | OBJECT | 更新自定义图片图层。 | App-nvue 3.1.0+，微信、字节小程序 | |
| on | Method | 监听地图事件。 | App-nvue 3.1.0+，微信小程序 | |
| $getAppMap | 获取原生地图对象 plus.maps.Map | app-vue | 1.9.3 |
智慧停车地图实现
绘制地图
增加标记点
/*
5.1、返回所有停车区坐标及当前空闲数据
接口地址：parking/zone/list
请求方式：GET
请求主体：无
*/
export let parkingZoneList = async ()=>{
//1.准备地址
let url = base + "parking/zone/list"
//2.显示loading..
uni.showLoading({
title:"数据加载中.."
})
//3.访问接口
let [err,res] = await uni.request({url})
//4.取消loading..
uni.hideLoading();
//5.返回结果
return res.data
}
点击互动
秋云图表组件
UniApp插件市场：https://ext.dcloud.net.cn/
秋云UniApp插件页:https://ext.dcloud.net.cn/plugin?id=271
秋云图标库官网：https://www.ucharts.cn/
智慧停车图表实现
图表实现
图表隐藏显示
图表地图联动
智慧停车
UniApp地图配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4gCXksFW-1688702512135)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day07\assets\image-20230330095006703.png)]
申请高德地图key
高德地图开放平台:https://lbs.amap.com/
高德地图坐标拾取器:https://lbs.amap.com/tools/picker
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KDc7cIyO-1688702512137)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day07\assets\image-20230330095510325.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VJtFEYQL-1688702512138)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day07\assets\image-20230330095950134.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ImKCTzXZ-1688702512140)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day07\assets\image-20230330100226903.png)]
地图组件
Map
地图组件。
地图服务商说明
| 地图服务商 | App | H5 | 微信小程序 |
|---|---|---|---|
| 高德 | √ | 3.6.0+ | |
| Goolge | 3.4+ | 3.2.10+ | |
| 腾讯 | √ | √ |
map属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| longitude | Number | 中心经度 | ||
| latitude | Number | 中心纬度 | ||
| scale | Number | 16 | 缩放级别，取值范围为3-20 | 高德地图缩放比例与微信小程序不同 |
| theme | String | normal | 主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持） | 京东小程序 |
| min-scale | Number | 3 | 最小缩放级别 | App-nvue 3.1.0+、微信小程序2.13+ |
| max-scale | Number | 20 | 最大缩放级别 | App-nvue 3.1.0+、微信小程序2.13+ |
| layer-style | Number/String | 1 | 个性化地图 | App-nvue 3.1.0+、微信小程序2.13+ |
| markers | Array | 标记点 | ||
| polyline | Array | 路线 | 飞书小程序不支持 | |
| circles | Array | 圆 | ||
| controls | Array | 控件 | ||
| include-points | Array | 缩放视野以包含所有给定的坐标点 | App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序 | |
| enable-3D | Boolean | false | 是否显示3D楼块 | App-nvue 2.1.5+、微信小程序2.3.0 |
| show-compass | Boolean | false | 是否显示指南针 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-zoom | Boolean | true | 是否支持缩放 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-scroll | Boolean | true | 是否支持拖动 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-rotate | Boolean | false | 是否支持旋转 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-overlooking | Boolean | false | 是否开启俯视 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-satellite | Boolean | false | 是否开启卫星图 | App-nvue 2.1.5+、微信小程序2.7.0 |
| enable-traffic | Boolean | false | 是否开启实时路况 | App-nvue 2.1.5+、微信小程序2.7.0 |
| enable-poi | Boolean | false | 是否展示 POI 点 | App-nvue 3.1.0+ |
| enable-building | Boolean | false | 是否展示建筑物 | App-nvue 3.1.0+ 支持 (废除原enable-3D属性 高德地图默认开启建筑物就是3D无法设置) |
| show-location | Boolean | 显示带有方向的当前定位点 | 微信小程序、H5、百度小程序、支付宝小程序、京东小程序 | |
| polygons | Array. |
多边形 | App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序、支付宝小程序 | |
| enable-indoorMap | Boolean | false | 是否展示室内地图 | App-nvue 3.1.0+ |
| @markertap | EventHandle | 点击标记点时触发，e.detail = {markerId} | App-nvue 2.3.3+、H5、微信小程序、支付宝小程序 （App和H5平台需要指定 marker 对象属性 id） | |
| @labeltap | EventHandle | 点击label时触发，e.detail = {markerId} | 微信小程序2.9.0 | |
| @callouttap | EventHandle | 点击标记点对应的气泡时触发，e.detail = {markerId} | ||
| @controltap | EventHandle | 点击控件时触发，e.detail = {controlId} | ||
| @regionchange | EventHandle | 视野发生变化时触发 | 微信小程序、H5、百度小程序、支付宝小程序、京东小程序 | |
| @tap | EventHandle | 点击地图时触发; App-nvue、微信小程序2.9支持返回经纬度 | ||
| @updated | EventHandle | 在地图渲染更新完成时触发 | 微信小程序、H5、百度小程序 | |
| @anchorpointtap | EventHandle | 点击定位标时触发，e.detail = {longitude, latitude} | App-nvue 3.1.0+、微信小程序2.13+ | |
| @poitap | EventHandle | 点击地图poi点时触发，e.detail = {name, longitude, latitude} | 微信小程序2.3.0+ |
注意
组件的宽/高推荐写直接量，比如：750rpx，不要设置百分比值。- 谷歌地图使用
wgs84坐标，其他地图使用gcj02坐标，用错坐标类型会显示偏移。
标记点markers
标记点用于在地图上显示标记的位置
| 属性 | 说明 | 类型 | 必填 | 备注 | 平台差异说明 |
|---|---|---|---|---|---|
| id | 标记点id | Number | 是 | marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。最大限制9位数 | |
| latitude | 纬度 | Number | 是 | 浮点数，范围 -90 ~ 90 | |
| longitude | 经度 | Number | 是 | 浮点数，范围 -180 ~ 180 | |
| title | 标注点名 | String | 否 | 点击时显示，callout存在时将被忽略 | App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序 |
| iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径，支持相对路径写法，以’/'开头则表示相对小程序根目录；也支持临时路径 | |
| rotate | 旋转角度 | Number | 否 | 顺时针旋转的角度，范围 0 ~ 360，默认为 0 | App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序 |
| alpha | 标注的透明度 | Number | 否 | 默认1，无透明，范围 0 ~ 1 | App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序 |
| width | 标注图标宽度 | Number | 否 | 默认为图片实际宽度 | App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序 |
| height | 标注图标高度 | Number | 否 | 默认为图片实际高度 | App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序 |
| callout | 自定义标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表，可识别换行符。 | App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序 |
| label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表，可识别换行符。 | App-nvue 2.1.5+、微信小程序、H5、App、百度小程序、支付宝小程序 |
| anchor | 经纬度在标注图标的锚点，默认底边中点 | Object | 否 | {x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| clusterId | 自定义点聚合簇效果时使用 | Number | 否 | App-nvue 3.1.0+、微信小程序 | |
| customCallout | 自定义气泡窗口 | Object | 否 | App-nvue 2.1.5+、微信小程序、支付宝小程序 | |
| aria-label | 无障碍访问，（属性）元素的额外描述 | String | 否 | App-nvue 3.1.0+、微信小程序 | |
| joinCluster | 是否参与点聚合 | Boolean | 否 | 如果指定点聚合 此选项值必须设置为true,才会生效 | App-nvue 3.1.0+、微信小程序 |
气泡callout
| 属性 | 说明 | 类型 | 平台差异说明 |
|---|---|---|---|
| content | 文本 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序、支付宝小程序 |
| color | 文本颜色 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| fontSize | 文字大小 | Number | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| borderRadius | callout边框圆角 | Number | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| borderWidth | 边框宽度 | Number | 微信小程序、京东小程序、百度小程序 |
| borderColor | 边框颜色 | String | 微信小程序、京东小程序、百度小程序 |
| bgColor | 背景色 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| padding | 文本边缘留白 | Number | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| display | ‘BYCLICK’:点击显示; ‘ALWAYS’:常显 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| textAlign | 文本对齐方式。有效值: left, right, center | String | App-nvue 2.1.5+、微信小程序、百度小程序、京东小程序 |
| anchorX | 横向偏移量，向右为正数 | Number | 微信小程序2.11.0 |
| anchorY | 纵向偏移量，向下为正数 | Number | 微信小程序2.11.0 |
marker 上的标签 label
| 属性 | 说明 | 类型 | 平台差异说明 |
|---|---|---|---|
| content | 文本 | String | |
| color | 文本颜色 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序 |
| fontSize | 文字大小 | Number | App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序 |
| x | label的坐标，原点是 marker 对应的经纬度 | Number | H5、百度小程序 |
| y | label的坐标，原点是 marker 对应的经纬度 | Number | H5、百度小程序 |
| anchorX | label的坐标，原点是 marker 对应的经纬度 | Number | App-nvue 2.1.5+、微信小程序 |
| anchorY | label的坐标，原点是 marker 对应的经纬度 | Number | App-nvue 2.1.5+、微信小程序 |
| borderWidth | 边框宽度 | Number | 微信小程序、百度小程序 |
| borderColor | 边框颜色 | String | 微信小程序、百度小程序 |
| borderRadius | 边框圆角 | Number | App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序 |
| bgColor | 背景色 | String | App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序 |
| padding | 文本边缘留白 | Number | App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序 |
| textAlign | 文本对齐方式。有效值: left, right, center | String | App-nvue 2.1.5+、微信小程序、百度小程序 |
| aria-label | 无障碍访问，（属性）元素的额外描述 | String | App-nvue 3.1.0+、微信小程序 |
地图上下文对象
地图上下文对象,用来操作地图
创建地图上下文对象
uni.createMapContext(mapId,this)
地图上下文对象API
| 方法 | 参数 | 说明 | 平台差异说明 | 最低版本 |
|---|---|---|---|---|
| getCenterLocation | OBJECT | 获取当前地图中心的经纬度，返回的是 gcj02 坐标系，可以用于 uni.openLocation | ||
| moveToLocation | OBJECT | 将地图中心移动到当前定位点，需要配合map组件的show-location使用 | ||
| translateMarker | OBJECT | 平移marker，带动画 | app-nvue 2.1.5+、微信小程序带动画、字节、支付宝、京东、百度、QQ小程序 | |
| includePoints | OBJECT | 缩放视野展示所有经纬度 | app-nvue 2.1.5+、微信、字节、支付宝、京东、百度、快手、QQ小程序 | |
| getRegion | OBJECT | 获取当前地图的视野范围 | ||
| getRotate | OBJECT | 获取当前地图的旋转角 | 微信、字节、支付宝、京东、QQ小程序 | |
| getScale | OBJECT | 获取当前地图的缩放级别 | ||
| getSkew | OBJECT | 获取当前地图的倾斜角 | 微信、字节、支付宝、京东、QQ小程序 | |
| addCustomLayer | OBJECT | 添加个性化图层 | 微信小程序 | |
| addGroundOverlay | OBJECT | 创建自定义图片图层，图片会随着地图缩放而缩放 | App-nvue 3.1.0+，微信、字节小程序 | |
| addMarkers | OBJECT | 添加 marker | App-nvue 3.1.0+，微信小程序 | |
| fromScreenLocation | OBJECT | 获取屏幕上的点对应的经纬度，坐标原点为地图左上角 | 微信小程序 | |
| initMarkerCluster | OBJECT | 初始化点聚合的配置，未调用时采用默认配置 | App-nvue 3.1.0+，微信小程序 | |
| moveAlong | OBJECT | 沿指定路径移动 marker，用于轨迹回放等场景。动画完成时触发回调事件，若动画进行中，对同一 marker 再次调用 moveAlong 方法，前一次的动画将被打断。 | 支持 android 不支持autoRotate属性设置 默认ture | App-nvue 3.1.0+，微信、字节小程序 |
| openMapApp | OBJECT | 拉起地图APP选择导航。 | App-nvue 3.1.0+，微信、字节、快手小程序 | |
| removeCustomLayer | OBJECT | 移除个性化图层 | 微信小程序 | |
| removeGroundOverlay | OBJECT | 移除自定义图片图层 | App-nvue 3.1.0+，微信小程序 | |
| removeMarkers | OBJECT | 移除 marker。 | App-nvue 3.1.0+，微信小程序 | |
| setCenterOffset | OBJECT | 设置地图中心点偏移，向后向下为增长，屏幕比例范围(0.25~0.75)，默认偏移为[0.5, 0.5] | 微信、字节小程序 | |
| toScreenLocation | OBJECT | 获取经纬度对应的屏幕坐标，坐标原点为地图左上角。 | 微信小程序 | |
| updateGroundOverlay | OBJECT | 更新自定义图片图层。 | App-nvue 3.1.0+，微信、字节小程序 | |
| on | Method | 监听地图事件。 | App-nvue 3.1.0+，微信小程序 | |
| $getAppMap | 获取原生地图对象 plus.maps.Map | app-vue | 1.9.3 |
智慧停车地图实现
绘制地图
增加标记点
/*
5.1、返回所有停车区坐标及当前空闲数据
接口地址：parking/zone/list
请求方式：GET
请求主体：无
*/
export let parkingZoneList = async ()=>{
//1.准备地址
let url = base + "parking/zone/list"
//2.显示loading..
uni.showLoading({
title:"数据加载中.."
})
//3.访问接口
let [err,res] = await uni.request({url})
//4.取消loading..
uni.hideLoading();
//5.返回结果
return res.data
}
点击互动
秋云图表组件
UniApp插件市场：https://ext.dcloud.net.cn/
秋云UniApp插件页:https://ext.dcloud.net.cn/plugin?id=271
秋云图标库官网：https://www.ucharts.cn/
智慧停车图表实现
图表实现
图表隐藏显示
图表地图联动
邻里互动
开发页面
hello
没有岁月静好，只是有人替我们负重前行!
开发接口
/*
6.3、分页获取互动消息列表
接口地址：chat/query
请求方式：GET
请求参数：pageNum
请求数据：
名称 必填 类型 说明
pageNum 非必需 number 默认值为1；要查询的互动消息页号
*/
export let chatQuery = async (pageNum)=>{
//1.准备URL
let url = base + "chat/query";
//2.显示loading..
uni.showLoading({title:"加载中.."})
//3.访问接口
let [err,res] = await uni.request({
url,
data:{pageNum}
})
//4.取消loading..
uni.hideLoading();
//5.返回结果
return res.data
}
访问接口更新首页
{{msg.uname}}
{{msg.content}}
触底刷新
智慧停车
UniApp地图配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yG7ZyivU-1688702512141)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day08\assets\image-20230330095006703.png)]
申请高德地图key
高德地图开放平台:https://lbs.amap.com/
高德地图坐标拾取器:https://lbs.amap.com/tools/picker
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GDtA63Jr-1688702512142)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day08\assets\image-20230330095510325.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yNfQoj3z-1688702512143)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day08\assets\image-20230330095950134.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QkreTQ10-1688702512144)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day08\assets\image-20230330100226903.png)]
地图组件
Map
地图组件
地图服务商说明
| 地图服务商 | App | H5 | 微信小程序 |
|---|---|---|---|
| 高德 | √ | 3.6.0+ | |
| Goolge | 3.4+ | 3.2.10+ | |
| 腾讯 | √ | √ |
map属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| longitude | Number | 中心经度 | ||
| latitude | Number | 中心纬度 | ||
| scale | Number | 16 | 缩放级别，取值范围为3-20 | 高德地图缩放比例与微信小程序不同 |
| theme | String | normal | 主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持） | 京东小程序 |
| min-scale | Number | 3 | 最小缩放级别 | App-nvue 3.1.0+、微信小程序2.13+ |
| max-scale | Number | 20 | 最大缩放级别 | App-nvue 3.1.0+、微信小程序2.13+ |
| layer-style | Number/String | 1 | 个性化地图 | App-nvue 3.1.0+、微信小程序2.13+ |
| markers | Array | 标记点 | ||
| polyline | Array | 路线 | 飞书小程序不支持 | |
| circles | Array | 圆 | ||
| controls | Array | 控件 | ||
| include-points | Array | 缩放视野以包含所有给定的坐标点 | App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序 | |
| enable-3D | Boolean | false | 是否显示3D楼块 | App-nvue 2.1.5+、微信小程序2.3.0 |
| show-compass | Boolean | false | 是否显示指南针 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-zoom | Boolean | true | 是否支持缩放 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-scroll | Boolean | true | 是否支持拖动 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-rotate | Boolean | false | 是否支持旋转 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-overlooking | Boolean | false | 是否开启俯视 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-satellite | Boolean | false | 是否开启卫星图 | App-nvue 2.1.5+、微信小程序2.7.0 |
| enable-traffic | Boolean | false | 是否开启实时路况 | App-nvue 2.1.5+、微信小程序2.7.0 |
| enable-poi | Boolean | false | 是否展示 POI 点 | App-nvue 3.1.0+ |
| enable-building | Boolean | false | 是否展示建筑物 | App-nvue 3.1.0+ 支持 (废除原enable-3D属性 高德地图默认开启建筑物就是3D无法设置) |
| show-location | Boolean | 显示带有方向的当前定位点 | 微信小程序、H5、百度小程序、支付宝小程序、京东小程序 | |
| polygons | Array. |
多边形 | App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序、支付宝小程序 | |
| enable-indoorMap | Boolean | false | 是否展示室内地图 | App-nvue 3.1.0+ |
| @markertap | EventHandle | 点击标记点时触发，e.detail = {markerId} | App-nvue 2.3.3+、H5、微信小程序、支付宝小程序 （App和H5平台需要指定 marker 对象属性 id） | |
| @labeltap | EventHandle | 点击label时触发，e.detail = {markerId} | 微信小程序2.9.0 | |
| @callouttap | EventHandle | 点击标记点对应的气泡时触发，e.detail = {markerId} | ||
| @controltap | EventHandle | 点击控件时触发，e.detail = {controlId} | ||
| @regionchange | EventHandle | 视野发生变化时触发 | 微信小程序、H5、百度小程序、支付宝小程序、京东小程序 | |
| @tap | EventHandle | 点击地图时触发; App-nvue、微信小程序2.9支持返回经纬度 | ||
| @updated | EventHandle | 在地图渲染更新完成时触发 | 微信小程序、H5、百度小程序 | |
| @anchorpointtap | EventHandle | 点击定位标时触发，e.detail = {longitude, latitude} | App-nvue 3.1.0+、微信小程序2.13+ | |
| @poitap | EventHandle | 点击地图poi点时触发，e.detail = {name, longitude, latitude} | 微信小程序2.3.0+ |
注意
组件的宽/高推荐写直接量，比如：750rpx，不要设置百分比值。- 谷歌地图使用
wgs84坐标，其他地图使用gcj02坐标，用错坐标类型会显示偏移。
标记点markers
标记点用于在地图上显示标记的位置
| 属性 | 说明 | 类型 | 必填 | 备注 | 平台差异说明 |
|---|---|---|---|---|---|
| id | 标记点id | Number | 是 | marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。最大限制9位数 | |
| latitude | 纬度 | Number | 是 | 浮点数，范围 -90 ~ 90 | |
| longitude | 经度 | Number | 是 | 浮点数，范围 -180 ~ 180 | |
| title | 标注点名 | String | 否 | 点击时显示，callout存在时将被忽略 | App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序 |
| iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径，支持相对路径写法，以’/'开头则表示相对小程序根目录；也支持临时路径 | |
| rotate | 旋转角度 | Number | 否 | 顺时针旋转的角度，范围 0 ~ 360，默认为 0 | App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序 |
| alpha | 标注的透明度 | Number | 否 | 默认1，无透明，范围 0 ~ 1 | App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序 |
| width | 标注图标宽度 | Number | 否 | 默认为图片实际宽度 | App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序 |
| height | 标注图标高度 | Number | 否 | 默认为图片实际高度 | App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序 |
| callout | 自定义标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表，可识别换行符。 | App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序 |
| label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表，可识别换行符。 | App-nvue 2.1.5+、微信小程序、H5、App、百度小程序、支付宝小程序 |
| anchor | 经纬度在标注图标的锚点，默认底边中点 | Object | 否 | {x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| clusterId | 自定义点聚合簇效果时使用 | Number | 否 | App-nvue 3.1.0+、微信小程序 | |
| customCallout | 自定义气泡窗口 | Object | 否 | App-nvue 2.1.5+、微信小程序、支付宝小程序 | |
| aria-label | 无障碍访问，（属性）元素的额外描述 | String | 否 | App-nvue 3.1.0+、微信小程序 | |
| joinCluster | 是否参与点聚合 | Boolean | 否 | 如果指定点聚合 此选项值必须设置为true,才会生效 | App-nvue 3.1.0+、微信小程序 |
气泡callout
| 属性 | 说明 | 类型 | 平台差异说明 |
|---|---|---|---|
| content | 文本 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序、支付宝小程序 |
| color | 文本颜色 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| fontSize | 文字大小 | Number | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| borderRadius | callout边框圆角 | Number | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| borderWidth | 边框宽度 | Number | 微信小程序、京东小程序、百度小程序 |
| borderColor | 边框颜色 | String | 微信小程序、京东小程序、百度小程序 |
| bgColor | 背景色 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| padding | 文本边缘留白 | Number | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| display | ‘BYCLICK’:点击显示; ‘ALWAYS’:常显 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
| textAlign | 文本对齐方式。有效值: left, right, center | String | App-nvue 2.1.5+、微信小程序、百度小程序、京东小程序 |
| anchorX | 横向偏移量，向右为正数 | Number | 微信小程序2.11.0 |
| anchorY | 纵向偏移量，向下为正数 | Number | 微信小程序2.11.0 |
marker 上的标签 label
| 属性 | 说明 | 类型 | 平台差异说明 |
|---|---|---|---|
| content | 文本 | String | |
| color | 文本颜色 | String | App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序 |
| fontSize | 文字大小 | Number | App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序 |
| x | label的坐标，原点是 marker 对应的经纬度 | Number | H5、百度小程序 |
| y | label的坐标，原点是 marker 对应的经纬度 | Number | H5、百度小程序 |
| anchorX | label的坐标，原点是 marker 对应的经纬度 | Number | App-nvue 2.1.5+、微信小程序 |
| anchorY | label的坐标，原点是 marker 对应的经纬度 | Number | App-nvue 2.1.5+、微信小程序 |
| borderWidth | 边框宽度 | Number | 微信小程序、百度小程序 |
| borderColor | 边框颜色 | String | 微信小程序、百度小程序 |
| borderRadius | 边框圆角 | Number | App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序 |
| bgColor | 背景色 | String | App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序 |
| padding | 文本边缘留白 | Number | App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序 |
| textAlign | 文本对齐方式。有效值: left, right, center | String | App-nvue 2.1.5+、微信小程序、百度小程序 |
| aria-label | 无障碍访问，（属性）元素的额外描述 | String | App-nvue 3.1.0+、微信小程序 |
地图上下文对象
地图上下文对象,用来操作地图
创建地图上下文对象
uni.createMapContext(mapId,this)
地图上下文对象API
| 方法 | 参数 | 说明 | 平台差异说明 | 最低版本 |
|---|---|---|---|---|
| getCenterLocation | OBJECT | 获取当前地图中心的经纬度，返回的是 gcj02 坐标系，可以用于 uni.openLocation | ||
| moveToLocation | OBJECT | 将地图中心移动到当前定位点，需要配合map组件的show-location使用 | ||
| translateMarker | OBJECT | 平移marker，带动画 | app-nvue 2.1.5+、微信小程序带动画、字节、支付宝、京东、百度、QQ小程序 | |
| includePoints | OBJECT | 缩放视野展示所有经纬度 | app-nvue 2.1.5+、微信、字节、支付宝、京东、百度、快手、QQ小程序 | |
| getRegion | OBJECT | 获取当前地图的视野范围 | ||
| getRotate | OBJECT | 获取当前地图的旋转角 | 微信、字节、支付宝、京东、QQ小程序 | |
| getScale | OBJECT | 获取当前地图的缩放级别 | ||
| getSkew | OBJECT | 获取当前地图的倾斜角 | 微信、字节、支付宝、京东、QQ小程序 | |
| addCustomLayer | OBJECT | 添加个性化图层 | 微信小程序 | |
| addGroundOverlay | OBJECT | 创建自定义图片图层，图片会随着地图缩放而缩放 | App-nvue 3.1.0+，微信、字节小程序 | |
| addMarkers | OBJECT | 添加 marker | App-nvue 3.1.0+，微信小程序 | |
| fromScreenLocation | OBJECT | 获取屏幕上的点对应的经纬度，坐标原点为地图左上角 | 微信小程序 | |
| initMarkerCluster | OBJECT | 初始化点聚合的配置，未调用时采用默认配置 | App-nvue 3.1.0+，微信小程序 | |
| moveAlong | OBJECT | 沿指定路径移动 marker，用于轨迹回放等场景。动画完成时触发回调事件，若动画进行中，对同一 marker 再次调用 moveAlong 方法，前一次的动画将被打断。 | 支持 android 不支持autoRotate属性设置 默认ture | App-nvue 3.1.0+，微信、字节小程序 |
| openMapApp | OBJECT | 拉起地图APP选择导航。 | App-nvue 3.1.0+，微信、字节、快手小程序 | |
| removeCustomLayer | OBJECT | 移除个性化图层 | 微信小程序 | |
| removeGroundOverlay | OBJECT | 移除自定义图片图层 | App-nvue 3.1.0+，微信小程序 | |
| removeMarkers | OBJECT | 移除 marker。 | App-nvue 3.1.0+，微信小程序 | |
| setCenterOffset | OBJECT | 设置地图中心点偏移，向后向下为增长，屏幕比例范围(0.25~0.75)，默认偏移为[0.5, 0.5] | 微信、字节小程序 | |
| toScreenLocation | OBJECT | 获取经纬度对应的屏幕坐标，坐标原点为地图左上角。 | 微信小程序 | |
| updateGroundOverlay | OBJECT | 更新自定义图片图层。 | App-nvue 3.1.0+，微信、字节小程序 | |
| on | Method | 监听地图事件。 | App-nvue 3.1.0+，微信小程序 | |
| $getAppMap | 获取原生地图对象 plus.maps.Map | app-vue | 1.9.3 |
智慧停车地图实现
绘制地图
增加标记点
/*
5.1、返回所有停车区坐标及当前空闲数据
接口地址：parking/zone/list
请求方式：GET
请求主体：无
*/
export let parkingZoneList = async ()=>{
//1.准备地址
let url = base + "parking/zone/list"
//2.显示loading..
uni.showLoading({
title:"数据加载中.."
})
//3.访问接口
let [err,res] = await uni.request({url})
//4.取消loading..
uni.hideLoading();
//5.返回结果
return res.data
}
点击互动
秋云图表组件
UniApp插件市场：https://ext.dcloud.net.cn/
秋云UniApp插件页:https://ext.dcloud.net.cn/plugin?id=271
秋云图标库官网：https://www.ucharts.cn/
智慧停车图表实现
图表实现
图表隐藏显示
图表地图联动
邻里互动
开发页面
hello
没有岁月静好，只是有人替我们负重前行!
开发接口
/*
6.3、分页获取互动消息列表
接口地址：chat/query
请求方式：GET
请求参数：pageNum
请求数据：
名称 必填 类型 说明
pageNum 非必需 number 默认值为1；要查询的互动消息页号
*/
export let chatQuery = async (pageNum)=>{
//1.准备URL
let url = base + "chat/query";
//2.显示loading..
uni.showLoading({title:"加载中.."})
//3.访问接口
let [err,res] = await uni.request({
url,
data:{pageNum}
})
//4.取消loading..
uni.hideLoading();
//5.返回结果
return res.data
}
访问接口更新首页
{{msg.uname}}
{{msg.content}}
触底加载
增加底部提示条
{{msg.uname}}
{{msg.content}}
开启页面下拉功能
开发下拉刷新
删除旧数据
重新加载第一页数据
停止下拉刷新
//生命周期方法:顶部下拉刷新
onPullDownRefresh() {
//清除旧数据
this.msgList = [];
this.pageNum = 0;
this.pageCount = 9999;
this.isLoading = false;
//加载下一页(此时是第一页)数据
this.loadNextPageData();
//停止下拉刷新
uni.stopPullDownRefresh()
},
打包应用
配置AppID
DCloud appid（以后简称 appid） 是 DCloud 应用的唯一标识，在 DCloud 提供的所有服务中，都会以 appid 来标记一个应用。注意这和各家小程序的appid以及Apple的appid（其实就是iOS的包名）是不同的体系。
AppId不能为空,也不能重复,如果提示空或重复需要重新获取
打包为web项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CoJCuUs2-1688702512146)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day08\assets\image-20230331101839132.png)]
打包为手机APP
配置manifest.json
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FteSUVxZ-1688702512229)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day08\assets\image-20230331102712978.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C2Mzhczp-1688702512231)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day08\assets\image-20230331112425990.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RwEvhsd5-1688702512231)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day08\assets\image-20230331103414067.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FSb18xLG-1688702512232)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day08\assets\image-20230331103656666.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QclGD71k-1688702512233)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day08\assets\image-20230331103846898.png)]
云打包
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QLD6a8U0-1688702512235)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day08\assets\image-20230331104918732.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Js0ffr2z-1688702512237)(C:\Users\Administrator\Desktop\web2212\22.uniApp\Day08\assets\image-20230331110726090.png)]
可以重命名.apk文件，发布到应用商店 或
可以放到自己的网站上供人下载
可以直接把安装文件拷贝(用数据线或QQ)到自己的手机中，安装使用APP
/chat/16704373811634187.jpg">
```scss
开发接口
/*
6.3、分页获取互动消息列表
接口地址：chat/query
请求方式：GET
请求参数：pageNum
请求数据：
名称 必填 类型 说明
pageNum 非必需 number 默认值为1；要查询的互动消息页号
*/
export let chatQuery = async (pageNum)=>{
//1.准备URL
let url = base + "chat/query";
//2.显示loading..
uni.showLoading({title:"加载中.."})
//3.访问接口
let [err,res] = await uni.request({
url,
data:{pageNum}
})
//4.取消loading..
uni.hideLoading();
//5.返回结果
return res.data
}
访问接口更新首页
{{msg.uname}}
{{msg.content}}
触底加载
增加底部提示条
{{msg.uname}}
{{msg.content}}
开启页面下拉功能
开发下拉刷新
删除旧数据
重新加载第一页数据
停止下拉刷新
//生命周期方法:顶部下拉刷新
onPullDownRefresh() {
//清除旧数据
this.msgList = [];
this.pageNum = 0;
this.pageCount = 9999;
this.isLoading = false;
//加载下一页(此时是第一页)数据
this.loadNextPageData();
//停止下拉刷新
uni.stopPullDownRefresh()
},
打包应用
配置AppID
DCloud appid（以后简称 appid） 是 DCloud 应用的唯一标识，在 DCloud 提供的所有服务中，都会以 appid 来标记一个应用。注意这和各家小程序的appid以及Apple的appid（其实就是iOS的包名）是不同的体系。
AppId不能为空,也不能重复,如果提示空或重复需要重新获取
打包为web项目
[外链图片转存中…(img-CoJCuUs2-1688702512146)]
打包为手机APP
配置manifest.json
[外链图片转存中…(img-FteSUVxZ-1688702512229)]
[外链图片转存中…(img-C2Mzhczp-1688702512231)]
[外链图片转存中…(img-RwEvhsd5-1688702512231)]
[外链图片转存中…(img-FSb18xLG-1688702512232)]
[外链图片转存中…(img-QclGD71k-1688702512233)]
云打包
[外链图片转存中…(img-QLD6a8U0-1688702512235)]
[外链图片转存中…(img-Js0ffr2z-1688702512237)]
可以重命名.apk文件，发布到应用商店 或
可以放到自己的网站上供人下载
可以直接把安装文件拷贝(用数据线或QQ)到自己的手机中，安装使用APP
2414