小程序定位

做小程序有四个月的时间，对小程序的认知还是比较浅的，小程序已上线，正好有空余时间总结一下。=.=

门店定位

门店定位用到了百度地图，先说一下怎么实现定位的，贴代码

var bmap = require('../libs/bmap-wx.min.js');
// 获取定位信息
getLocation() {
  let that = this;
  let BMap = new bmap.BMapWX({
    ak: that.$parent.globalData.appInfo.ak
  });
  //定位失败或是拒绝定位授权
  let fail = function (data) {
    let _info = {
      title: '提示',
      content: "未定位到门店，请选择门店",
      confirmText: '选择门店',
      showCancel: false,
      success(res) {
        if (res.confirm) {
          wx.reLaunch({
            url: './location'
          })
        }
      }
    };
    wx.showModal(_info);
    //that.matchNearmall();
  };
  let success = function (data) {
    //返回数据内，已经包含经纬度 
    //使用wxMarkerData获取数据
    let wxMarkerData = data.wxMarkerData;
    //把所有数据放在初始化data内 
    that.$parent.globalData.locationInfo = {
      latitude: wxMarkerData[0].latitude,
      longitude: wxMarkerData[0].longitude,
      address: wxMarkerData[0].address,
      cityInfo: data.originalData.result.addressComponent
    };
    if (data) {
      // 获取到经纬度传给后台匹配最近门店并返回当前门店的信息
      that.gthomeInfo(that.$parent.globalData.locationInfo);
    }
  }
  //发起regeocoding检索请求   
  BMap.regeocoding({
    fail: fail,
    success: success
  });
}
复制代码

目前定位门店并获取门店信息的流程是
百度地图api 下载链接

1. 在百度api虎鲸数据手动添加对应门店信息位置
2. 引入百度地图api
3. 在文件中引入var bmap = require('./libs/bmap-wx.min.js')
4. 匹配附近门店

代码实现

var bmap = require('./libs/bmap-wx.min.js')
getLocation () {
    // 
    let Bmap = new bmap.BMapWX({
      ak: this.globalData.appInfo.ak
    })
    Bmap.regeocoding({
      fail: res => {
        console.log(res)
      },
      success: res => {
        console.log(res)
        let wxMarkerData = res.wxMarkerData
        wx.setStorageSync('location', {
          longitude: wxMarkerData[0].longitude,
          latitude: wxMarkerData[0].latitude,
          address: wxMarkerData[0].address,
          addressComponent: res.originalData.result.addressComponent
        })
        this.nearLocationInfo()
      }
    })
  }
  // 匹配附近
  nearLocationInfo() {
    wx.request({
      url: 'http://api.map.baidu.com/geosearch/v3/nearby?ak=nqcYH1wuDwhloiynnROqx2jDAXdkBPln',
      data: {
        geotable_id: this.globalData.appInfo.geotable_id,
        location: wx.getStorageSync('location').longitude + ',' + wx.getStorageSync('location').latitude,
        radius: 1000000,
        sortby: 'distance:1',
        page_index: 0,
        page_size: 10
      },
      success: data => {
        console.log(data)
        // 调用成功之后获取第一个数据就是附近的定位
        // 因为sortby给定顺序
      }
    })
  }
  onLaunch() {
    this.getLocation()
  }
复制代码

不知道大家怎么实现的，有比较好的意见，欢迎大家提议。

小程序我使用了wepy组件 使用过程中 也会遇到很多坑。有时跳转有问题 在最终还是使用小程序原生组件。 问题说的比较笼统，下面我总结一下自己用到的功能展现。我也是初识小程序，在项目中也是不断挖坑填坑，技术还不到家 有问题的话，希望大家指出~_~

微信小程序swiper轮播图卡死来回疯狂轮播