在uniapp小程序中使用ECharts创建热力矩阵图，首先需要在项目中引入ECharts。由于uniapp不支持直接使用ECharts，可以使用第三方库如lime-echarts来简化这个过程。

1. 安装lime-echarts：

npm install lime-echarts

2. 在页面中引入lime-echarts和热力矩阵图的option配置：

// 引入lime-echarts
import * as echarts from 'lime-echarts';
// 引入热力矩阵图的option配置
import heatmapOption from './heatmap-option';
 
export default {
  data() {
    return {
      heatmapChart: null
    };
  },
  onReady() {
    // 初始化热力矩阵图
    this.initHeatmapChart();
  },
  methods: {
    initHeatmapChart() {
      const ctx = uni.createCanvasContext('heatmapCanvas', this);
      this.heatmapChart = echarts.init(ctx, null, {
        width: 375, // 设置画布宽度
        height: 250, // 设置画布高度
      });
      this.heatmapChart.setOption(heatmapOption);
    }
  }
}

3. 在页面的wxml文件中定义画布：

<view class="heatmap-container">
  <canvas canvas-id="heatmapCanvas" class="heatmap-canvas"></canvas>
</view>

4. 在页面的style标签或外部样式表中设置画布样式：

.heatmap-container {
  width: 100%;
  height: 300px;
}
.heatmap-canvas {
  width: 100%;
  height: 100%;
}

5. 在heatmap-option.js中定义热力矩阵图的option配置：

export default {
  series: [
    {
      type: 'heatmap',
      data: [...], // 数据填充
      // 其他配置项...
    }
  ]
  // 其他全局配置项...
};

以上代码提供了在uniapp小程序中使用lime-echarts创建热力矩阵图的基本框架。具体的数据和配置需要根据实际情况进行填充和调整。

<template>
  <view class="custom-nav">
    <view class="nav-title">{{ title }}</view>
    <view class="nav-operations">
      <view class="nav-btn" @click="handleClick(1)">操作1</view>
      <view class="nav-btn" @click="handleClick(2)">操作2</view>
    </view>
  </view>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
 
const title = ref('自定义标题');
 
const handleClick = (type: number) => {
  switch (type) {
    case 1:
      // 操作1的逻辑
      console.log('操作1被点击');
      break;
    case 2:
      // 操作2的逻辑
      console.log('操作2被点击');
      break;
    default:
      break;
  }
};
</script>
 
<style scoped>
.custom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
}
.nav-title {
  font-size: 18px;
  font-weight: bold;
}
.nav-operations {
  display: flex;
  align-items: center;
}
.nav-btn {
  margin-left: 10px;
  padding: 5px 10px;
  border-radius: 5px;
  color: #fff;
  background-color: #007aff;
  cursor: pointer;
}
</style>

这段代码展示了如何在uniapp中使用Vue 3的Composition API和<script setup>语法来创建一个具有自定义标题和操作按钮的导航栏。同时，它也包含了样式代码，确保导航栏在不同平台上的兼容性和视觉效果。

// 导入配置文件
import config from '@/common/config.js';
 
// 获取token函数
function getToken() {
  // 从storage中获取token
  const token = uni.getStorageSync('token');
  // 如果token不存在，则返回空字符串
  return token || '';
}
 
// 请求拦截器
uni.addInterceptor('request', {
  invoke(args) {
    // 判断是否为登录接口或者不需要token的接口
    if (!args.url.includes('login') && !args.noToken) {
      // 给所有请求添加token
      args.header = {
        ...args.header,
        'Authorization': `Bearer ${getToken()}`,
      };
    }
  }
});
 
// 响应拦截器
uni.addInterceptor('response', {
  invoke(args) {
    // 判断token是否过期或无效，进行处理
    if (args.statusCode === 401) {
      // 清除token，进行重新登录
      uni.removeStorage({
        key: 'token',
        success: function() {
          // 跳转到登录页面
          uni.navigateTo({
            url: '/pages/login/login',
          });
        },
      });
    }
  }
});

这段代码首先导入了配置文件，定义了获取token的函数。然后使用uni.addInterceptor注册了请求和响应拦截器，在请求拦截器中，根据配置给所有请求添加token；在响应拦截器中，如果响应状态码为401，则清除token并重定向到登录页面。这样就实现了在UniApp小程序中使用token进行接口请求的无感知登录方案。

在uniapp中，你可以使用uni.getLocation API获取当前的经纬度，然后通过这个经纬度，使用腾讯地图的WebService API接口来获取详细的地址信息。

以下是一个简单的示例代码：

// 获取当前位置的经纬度
uni.getLocation({
  type: 'wgs84',
  success: function (res) {
    // 获取经度
    var longitude = res.longitude;
    // 获取纬度
    var latitude = res.latitude;
 
    // 使用腾讯地图的WebService API进行逆地理编码
    var qqmapsdk = new QQMapWX({
      key: '你的腾讯地图key' // 必填
    });
 
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: function(res) {
        // 获取地址信息
        var address = res.result.address;
        console.log(address); // 输出地址信息
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    });
  },
  fail: function (error) {
    console.error(error);
  },
  complete: function (res) {
    console.log(res);
  }
});

在这段代码中，首先使用uni.getLocation获取当前的位置信息，然后通过腾讯地图的WebService API进行逆地理编码，获取详细的地址信息。

注意：

1. 你需要在腾讯地图官网申请一个key，并确保它是有效的。
2. 这段代码需要在真机上运行，因为小程序的API通常不能在开发工具中模拟位置信息。
3. 这里的示例代码假设你已经在项目中引入了腾讯地图的SDK。如果没有，你需要先通过npm或其他方式引入腾讯地图的SDK。

在uni-app中，如果你想要隐藏小程序或H5页面的顶部导航栏（navigationBar），可以通过以下几种方式实现：

1. 使用内置组件的navigationBar属性。
2. 使用全局的uni.hideNavigationBar方法。
3. 使用条件编译，针对不同平台进行处理。

方法一：使用内置组件的navigationBar属性

在页面的Vue文件中，可以通过设置页面配置的navigationBar属性为false来隐藏顶部导航栏。

<config>
{
    "navigationBar": false
}
</config>

方法二：使用uni.hideNavigationBar方法

在页面的onLoad生命周期函数中，调用uni.hideNavigationBar方法可以隐藏导航栏。

export default {
  onLoad() {
    uni.hideNavigationBar();
  }
}

方法三：使用条件编译

如果需要针对不同平台（小程序、H5等）做不同的处理，可以使用条件编译。

// #ifdef APP-PLUS || H5
uni.hideNavigationBar();
// #endif

以上代码会在小程序和H5平台隐藏导航栏。其他平台（如微信小程序）不执行隐藏操作。

报错信息 "FormData is not defined" 表示在你的uniapp小程序代码中使用了FormData这个构造函数，但是当前的执行环境中没有找到这个定义。

解释：

这通常发生在前端开发中，尤其是在浏览器环境下。FormData是一个Web API，用于构造一个可以包含任意数据的表单，这些数据可以通过XMLHttpRequest来发送。然而，在uniapp小程序中，并没有直接的DOM API支持，因此你无法直接使用FormData。

解决方法：

1. 如果你需要发送HTTP请求，可以使用uniapp提供的网络请求API，如uni.request。你可以将表单数据构造为一个普通的JavaScript对象，然后将其作为uni.request的参数。
2. 如果你需要处理文件上传，可以使用uniapp的uni.uploadFile方法，它允许你上传文件到服务器，并且可以将文件作为FormData的一部分发送。

示例代码：

// 使用uni.request发送请求
const data = {
  key1: 'value1',
  key2: 'value2'
};
uni.request({
  url: 'https://example.com/api/endpoint',
  method: 'POST',
  data: data,
  success: (res) => {
    console.log('request success:', res);
  },
  fail: (err) => {
    console.log('request fail:', err);
  }
});
 
// 使用uni.uploadFile上传文件
uni.chooseImage({
  success: chooseImageRes => {
    const tempFilePaths = chooseImageRes.tempFilePaths;
    uni.uploadFile({
      url: 'https://example.com/api/upload',
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: uploadFileRes => {
        console.log('upload success:', uploadFileRes);
      },
      fail: uploadFileErr => {
        console.log('upload fail:', uploadFileErr);
      }
    });
  }
});

在实际开发中，你需要根据你的具体需求选择合适的API来替代FormData的功能。

在uniapp中申请小程序地理位置权限并获取位置信息，可以使用uni.getLocation API。首先，你需要在小程序管理后台的"设置"-"开发设置"中添加合法域名（如果你在云端调用API），并在代码中进行权限申请。

以下是一个简单的示例代码：

// 在uni-app中申请地理位置权限并获取位置信息
uni.getSetting({
  success(res) {
    if (!res.authSetting['scope.userLocation']) {
      uni.authorize({
        scope: 'scope.userLocation',
        success() {
          // 用户已同意小程序使用定位功能
          getLocation();
        },
        fail() {
          // 用户拒绝了小程序使用定位功能的权限
          uni.showModal({
            title: '提示',
            content: '此功能需要获取您的地理位置，请确认授权',
            success: function(modalRes) {
              if (modalRes.confirm) {
                uni.openSetting();
              }
            }
          });
        }
      });
    } else {
      // 已经授权，可以直接调用getLocation
      getLocation();
    }
  }
});
 
function getLocation() {
  uni.getLocation({
    type: 'wgs84',
    success(res) {
      console.log('当前位置的经度：' + res.longitude);
      console.log('当前位置的纬度：' + res.latitude);
    },
    fail(err) {
      console.log('获取位置失败：', err);
    }
  });
}

这段代码首先检查用户的当前设置，如果没有授权小程序使用地理位置的权限，它会请求用户授权。如果用户拒绝，它会提示用户打开设置页面手动开启权限。一旦用户授权或者手动开启了权限，就可以调用uni.getLocation获取地理位置信息。

由于问题描述涉及的是一个完整的系统，我们可以提供一些关键的代码片段或概念来帮助理解。

1. 后端（Spring Boot）:

Spring Boot 控制层示例代码，用于处理小程序的请求：

@RestController
@RequestMapping("/api/v1/properties")
public class PropertyController {
 
    @GetMapping("/list")
    public ResponseEntity<List<Property>> getPropertyList() {
        // 获取物业列表的逻辑
        List<Property> properties = propertyService.findAll();
        return ResponseEntity.ok(properties);
    }
 
    // 其他控制器方法...
}

2. 前端（Vue）:

在 Vue 中发送请求并处理响应的示例代码：

<template>
  <div>
    <ul>
      <li v-for="property in properties" :key="property.id">{{ property.name }}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      properties: []
    };
  },
  created() {
    this.fetchPropertyList();
  },
  methods: {
    async fetchPropertyList() {
      try {
        const response = await this.$http.get('/api/v1/properties/list');
        this.properties = response.data;
      } catch (error) {
        console.error('Error fetching property list:', error);
      }
    }
  }
};
</script>

3. 移动端（UniApp）:

UniApp 中调用后端 API 的示例代码：

<template>
  <view>
    <view v-for="(property, index) in properties" :key="index">{{ property.name }}</view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      properties: []
    };
  },
  onLoad() {
    this.getPropertyList();
  },
  methods: {
    getPropertyList() {
      uni.request({
        url: 'https://your-backend-domain.com/api/v1/properties/list',
        method: 'GET',
        success: (res) => {
          this.properties = res.data;
        },
        fail: (err) => {
          console.error('Error fetching property list:', err);
        }
      });
    }
  }
};
</script>

这些代码片段展示了如何在 Spring Boot 后端、Vue 前端和 UniApp 移动端中创建API控制器和调用后端API的方法。实际的系统还会涉及更多细节，例如权限验证、数据库操作、异常处理等，但这些是构建任何智慧物业平台小程序所必需的核心组件。

为了回答您的问题，我需要提供一个基于Spring Boot、Vue和uni-app的驾校预约平台小程序的核心功能示例。由于篇幅所限，我将提供一个简化的示例，说明如何使用Spring Boot作为后端API服务，以及使用Vue和uni-app来构建用户界面。

后端API (Spring Boot):

@RestController
@RequestMapping("/api/v1/appointments")
public class AppointmentController {
 
    // 假设有一个服务层处理预约相关的逻辑
    @Autowired
    private AppointmentService appointmentService;
 
    @PostMapping
    public ResponseEntity<Appointment> createAppointment(@RequestBody Appointment appointment) {
        return ResponseEntity.ok(appointmentService.createAppointment(appointment));
    }
 
    @GetMapping
    public ResponseEntity<List<Appointment>> getAppointments() {
        return ResponseEntity.ok(appointmentService.getAppointments());
    }
 
    // 其他API端点，例如取消预约、更新状态等
}

前端 (Vue):

<template>
  <div>
    <input v-model="appointment.date" type="date" />
    <input v-model="appointment.time" type="time" />
    <button @click="createAppointment">预约</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      appointment: {
        date: '',
        time: ''
      }
    };
  },
  methods: {
    async createAppointment() {
      try {
        const response = await this.$http.post('/api/v1/appointments', this.appointment);
        // 处理成功的预约创建
      } catch (error) {
        // 处理错误
      }
    }
  }
};
</script>

前端 (uni-app):

<template>
  <view>
    <input v-model="appointment.date" type="date" />
    <input v-model="appointment.time" type="time" />
    <button @click="createAppointment">预约</button>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      appointment: {
        date: '',
        time: ''
      }
    };
  },
  methods: {
    createAppointment() {
      uni.request({
        url: '/api/v1/appointments',
        method: 'POST',
        data: this.appointment,
        success: (res) => {
          // 处理成功的预约创建
        },
        fail: (err) => {
          // 处理错误
        }
      });
    }
  }
};
</script>

这个示例展示了如何使用Spring Boot作为后端API服务，以及如何使用Vue和uni-app来构建用户界面，并通过HTTP请求与后端服务进行交互。在实际的项目中，您需要实现完整的业务逻辑，包括用户认证、预约状态管理、数据库交互等功能。

目前，UniApp 官方并没有为 Vue 3 提供官方支持的脚手架。但是，你可以使用第三方的脚手架，如 @dcloudio/uni-cli-shared，它是基于 Vue 3 的 UniApp 项目脚手架。

以下是如何使用这个第三方脚手架来创建一个使用 Vue 3 的 UniApp 项目的简要步骤：

1. 确保你已经安装了 Node.js 和 npm。
2. 全局安装 @dcloudio/uni-cli-shared：

npm install -g @dcloudio/uni-cli-shared

3. 创建新的 Vue 3 UniApp 项目：

dclis init <project-name>

替换 <project-name> 为你的项目名称。

4. 进入项目目录并安装依赖：

cd <project-name>
npm install

5. 运行开发环境：

npm run dev:mp-weixin

这里以微信小程序为例，你可以替换 :mp-weixin 为其他平台，如支付宝小程序、H5 等。

请注意，这个脚手架是第三方提供的，可能会随时间更新而发生变化。如果你需要最新的支持信息，请参考 UniApp 官方文档或者相关第三方脚手架的 GitHub 仓库。