微信小程序-按照首字母检索城市

一、前期准备：

1.先去百度地图先申请密钥（ak）

地址：http://lbsyun.baidu.com/apiconsole/key

需要提供小程序的appID

2.去微信公众平台 -》设置——》开发设置-》服务器域名 配置https://api.map.baidu.com

如果以上两步缺少任何一步骤，小程序端会报错：

3.运用小程序组件 citySelect -城市选择器

可以参考https://github.com/chenjinxinlove/citySelect

下载下来放在pages同级目录下面：

 

二、效果图：

 

三、代码

1)小程序端授权获取定位信息：

 wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          //未授权
          wx.showModal({
            title: '请求授权当前位置',
            content: '需要获取您的地理位置，请确认授权',
            success: function (res) {
              if (res.cancel) {
                //取消授权
                wx.showToast({
                  title: '拒绝授权',
                  icon: 'none',
                  duration: 1000
                })
              } else if (res.confirm) {
                //确定授权，通过wx.openSetting发起授权请求
                wx.openSetting({
                  success: function (res) {
                    if (res.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授权，调用wx.getLocation的API
                      that.getLocationApi();
                    } else {
                      wx.showToast({
                        title: '授权失败',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          //用户首次进入页面,调用wx.getLocation的API
          that.getLocationApi();
        }
        else {
          console.log('授权成功')
          //调用wx.getLocation的API
          that.getLocationApi();
        }
      }
    })

getLocationApi: function () {
    let that = this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        let latitude = res.latitude
        let longitude = res.longitude
        let speed = res.speed
        let accuracy = res.accuracy
        wx.request({
          url: 'https://api.map.baidu.com/geocoder/v2/?ak='你自己的ak'&location=' + latitude + ',' + longitude + '&output=json',
          data: {},
          header: { 'Content-Type': 'application/json' },
          success: function (ops) {
            console.log('定位城市：', ops.data.result.addressComponent.city)
             //需要缓存就操作缓存
            wx.setStorageSync("location", ops.data.result.addressComponent.city)
          },
          fail: function (resq) {
            wx.showModal({
              title: '提示信息',
              content:'获取定位失败',
              showCancel: false,
              confirmColor: '#f37938'
            });
          },
          complete: function () {
          }
        })
      }
    })
  },

定位的下拉按钮，点击跳转到城市选择的页面：

selectArea:function(){
    wx.navigateTo({
      url: '../selectArea/selectArea',
    })
  },

2）selectArea.wxml

  定位城市
  
    {{currentLocation}}
  
  

主要的就是selectArea.json中注意引用：

{
  "usingComponents": {
    "list-html": "/component/wx-index-list/wx-index-list"
  }
}

然后就是选择某个城市，拿到城市的值：

bindtap:function(e) {
    let selectArea = e.detail.name
    wx.setStorageSync('selectArea', selectArea)
    wx.switchTab({
      url: '../index/index',
    })
  },

暂时就这些，后面遇到坑在更新咯。