微信小程序开发：获取位置打开地图

01 准备工作

下载：
微信开发者工具，从微信官网下载即可，选择稳定版

创建工程：
可以创建AppleID，和自己的公众号绑定
可以使用云开发，就不需要域名

如果不创建AppleID，使用 测试号

02 小程序基础知识

微信小程序的四种类型的文件

• js ---------- JavaScrip文件
• json -------- 项目配置文件，负责窗口颜色等等
• wxml ------- 类似HTML文件
• wxss ------- 类似CSS文件

app.json

必须要有这个文件，如果没有这个文件，IDE会报错，因为微信框架把这个作为配置文件入口，
你只需创建这个文件，里面写个大括号就行
以后我们会在这里对整个小程序的全局配置。记录了页面组成，配置小程序的窗口 背景色，配置导航条样式，配置默认标题。

app.js

必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写
以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

app.wxss

这个文件不是必须的。因为它只是个全局CSS样式文件

app.wxml

这个也不是必须的，而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的

目录树

如果想要在几个界面交互，就在 Page 下创建新的文件夹（和index 同级别）

03 获取位置打开地图

参考

按键1、2参考：
微信小程序学习之路02-获取位置打开地图
按键3参考：
微信小程序–获取地理位置
其他：
微信小程序获取当前地址以及选择地址详解

效果

按键1：

按键2

按键3：

程序说明

定义函数 getCurrentLocation
调用微信小程序的获取地理位置函数 wx.getLocation
console.log(res)将获取的地理位置信息放到console控制台上
console.log(err)如果错误，就将错误消息输出到控制台（建议加这一句，不然错误看不到原因）
wx.showModal调出微信的弹框，关于弹窗，可以参考https://www.jb51.net/article/165148.htm

//index.js
//获取当前经纬度
  getCurrentLocation: function (e) {
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        console.log(res);
        var latitude = res.latitude
        var longitude = res.longitude
        //弹框
        wx.showModal({
          title: '当前位置',
          content: "纬度:" + latitude + ",经度:" + longitude,
        })
      },
      fail:function(err){
        console.log(err)
      }

    })
  }

创建按键，对于按键程序bindtap=“getCurrentLocation”

<!--index.wxml-->
<button class="page-body-button" type="primary" bindtap="getCurrentLocation">当前位置
</button>

04 遇到的问题及解决

问题：
按键1、3无效
解决：

• 在获取经纬度的函数内，加入console.log(err)输出错误信息
• 报错：{errMsg: “getLocation:fail no permission”}
• 查询，说应该是未获取许可。这个许可会在第一次跳出，若忽略，之后不再跳出
• 因此，在工具栏选择清除缓存

• 重新编译运行，提示如下

• 查相关资料，应该在app.json内加入：

"permission": {
    "scope.userLocation": {
    "desc": "你的位置信息将用于小程序位置接口的效果展示"  
    }
  }

• 重新运行，跳出弹窗，允许使用地理位置

05 学习资料

推荐微信小程序的官方文档

小程序官方学习资料：【推荐】
【教程】小程序开发指南

IDE官方资料 【推荐】
【IDE教程】微信开发者工具 使用指南

学习资料：
知乎：如何入门微信小程序开发，有哪些学习资料？
官方：小程序UI设计
小程序社区：【demo】微信小程序Demo：一个时间管理的微信小程序
小程序社区
微信小程序官方

什么是云开发：
小程序传统开发模式和云开发模式的对比
浅谈我对微信小程序云开发的认识与见解

入门：小程序申请流程
微信小程序快速入门分享大纲
百度经验：微信小程序开发入门

超详细入门：
微信小程序入门教程+案例demo
微信小程序开发教程–从零开始 【推荐】