腾讯位置服务示例小程序（一）

最新推荐文章于 2023-02-11 21:21:17 发布

时闻折竹

最新推荐文章于 2023-02-11 21:21:17 发布

阅读量728

点赞数

本文链接：https://blog.csdn.net/ZeroSwift/article/details/109351744

版权

这篇博客探讨了腾讯位置服务示例小程序的主页面，包括四个一级菜单及其二级功能。作者分析了主页面的app.json、index.wxml、index.json和index.js文件，阐述了页面结构和实现逻辑，为后续深入学习Map组件奠定基础。

摘要由CSDN通过智能技术生成

腾讯位置服务示例小程序（一）

前沿
主页面思维图
主页面
小结

前沿

地图是一个较为常用的组件，它提供了非常丰富的功能，并能够组合上许多想法，进而开发处很多有趣的小程序。从这篇文章开始，主要对小程序官网提供的位置服务示例小程序进行学习，以达到能够良好使用地图组件的一个目标。

主页面思维图

在这里插入图片描述
该小程序在主页面中主要提供了四个一级菜单，每个一级菜单下会有不同内容的二级功能展示。作为系列文章的第一章，本篇博文主要对主页面的配置项和代码进行讨论。与之前类似，我们主要关注主页面的页面结构和实现逻辑，对页面的样式暂不进行讨论。

主页面

为了分析该主页面，我们主要从全局配置项app.json，页面结构文件index.wxml，页面配置index.json和页面实现逻辑index.js四个文件进行讨论。

app.json

与之前所遇到的配置文件类似，都定义了路由和标题栏等信息。但有些地方从未见过，故需要进行学习。

  // 小程序接口权限相关设置
  "permission": {
   
    // 位置相关权限声明
    "scope.userLocation": {
   
      "desc": "你的位置信息将用于小程序定位"
    }
  },
  // 声明小程序需要使用的插件
  // 在这里定义好插件后，就可以在页面中进行使用
  // 使用示例在后续代码中会有体现
  "plugins": {
   
    "routePlan": {
   
      "version": "1.0.5",
      "provider": "wx50b5593e81dd937a"
    },
    "chooseLocation": {
   
      "version": "1.0.2",
      "provider": "wx76a9a06e5b4e693e"
    },
    "subway": {
   
      "version": "1.0.8",
      "provider": "wx6aaf93c4435fa1c1"
    }
  },
  // 通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小
  "useExtendedLib": {
   
    // 这是一套基于样式库weui-wxss开发的小程序扩展组件库，
    // 同微信原生视觉体验一致的UI组件库，
    // 由微信官方设计团队和小程序团队为微信小程序量身设计，
    // 令用户的使用感知更加统一
    "weui": true
  },

index.wxml

该文件主要对页面结构进行描述，并让一级菜单和二级菜单能够动态的进行显示。

<!--主页-->
<view class="page-main-container">
	<view class="main-content">
		<view class="header-container">
			<view class="title-container">
				<image class="title-img" src="{
    {CDN_PATH + '/logo@3x.png'}}"></image>
			</view>
			<text class="introduce">腾讯位置服务示例中心包含小程序下 Map 组件、微信小程序插件、个性化地图示例。通过高频功能、典型场景供开发者参考，降低开发成本，提升开发效率。         </text>
		</view>
		
		<view class