微信小程序踩坑之个人中心

1.头像圆角

 <open-data type="userAvatarUrl"></open-data>
  <open-data type="userNickName"></open-data>

这样就可以显示头像&微信名称啦，如果想要更多个人信息，用如下代码：

    wx.getUserInfo({
      success(res) {
        const userInfo = res.userInfo
        const nickName = userInfo.nickName
        const avatarUrl = userInfo.avatarUrl
        const gender = userInfo.gender // 性别 0：未知、1：男、2：女
        const province = userInfo.province
        const city = userInfo.city
        const country = userInfo.country
        console.log(res);
      }
    })

image.png

gender：2是女性的意思
但是做头像圆角，<open-data>标签用border-radious是无效的,就再外面裹个view，类名.XXX

.XXX{
border-radius: 30px;
overflow: hidden;
}

2.获取位置

我们常用的模糊搜索比如：“北京市付小姐在成都”。。^_，就会出现北京很多家该分店地址：

var QQMapWX = require('./../../lib/js/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
  onLoad: function (options) {
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'G5NBZ-CXXXXXXXXPJO-BHFLG'
    });
  },
  onShow: function () {
    qqmapsdk.search({
      keyword: '北京市付小姐在成都',
      success: function (res) {
        console.log(res);
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  }
 });

在app.json加入以下配置：

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

详细配置信息：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#全局配置
返回了五六个地址信息，经度(longitude)和纬度(latitude)

image.png

3.如何申请key？下载qqmap-wx-jssdk

1. 申请开发者密钥（key）：申请密钥
2. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0
3. 在微信公众平台（我的账号是29XXX，密码是xmXXX）3. 安全域名设置，在“开发” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com
申请：

image.png
image.png
下次登录找key的话在这儿：key管理
image.png
记得勾选，不然地址获取不到
image.png

4.新增地址功能

我们先获取到当前位置的经度纬度：
声明一下先：

  data: {
    addressList: [],//这里装搜索到的很多地址data
    latitude:0,
    longitude:0
  }

获取：

onLoad: function (options) {
    var this_ = this;
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'G5NBZ-CZSWR-UR2WH-WBFWV-7UPJO-BHFLG'
    });

    wx.getLocation({
      type: 'wgs84',
      success(res) {
      
        this_.setData({
          latitude: res.latitude,
          longitude: res.longitude
        });
        this_.searchaddressFn();//看下面的代码
      }
    });
  }

然后进行该经度纬度地址搜索： this_.searchaddressFn()
注意：keyword字段是必填的，可以填当前城市名

searchaddressFn:function(){
  var this_ = this;
  qqmapsdk.search({
    keyword: '北京',
    location: {
      latitude: this_.data.latitude,
      longitude: this_.data.longitude
    },
    success: function (res) {    
      this_.setData({
        addressList: res.data//八九个地址信息吧
      });
    },
    fail: function (res) {
      
    },
    complete: function (res) {
     
    }
  });
}

5.获取当前所在位置信息

位置相关的SDK用的是腾讯地图SDK，如果你用的是百度地图就用百度地图接口，否则会显示

image.png

检查一下自己配置的request 合法域名列表，在微信公众号--开发--开发设置--服务器域名（点击操作）

image.png

首先在onLoad中获取当前位置的经纬度，获取成功调用this.loadCity()，
核心代码：

https://apis.map.qq.com/ws/geocoder/v1/?location=经度，纬度&key=你的key值&get_poi=0

相关配置参数https://lbs.qq.com/webservice_v1/guide-gcoder.html

loadCity:function(){
    var this_ = this;
    wx.request({
      url: 'https://apis.map.qq.com/ws/geocoder/v1/?location='
       + this_.data.latitude + ',' + this_.data.longitude + '&key=G5NBZ-CZSWR-UR2WH-WBFWV-7UPJO-BHFLG&get_poi=0',
      data: {},
      header: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        // success  
        var citys = res.data.result.address_component.city;//北京市
        wx.setStorageSync('city', citys);//存起来以后用
        this_.setData({ location: citys});
      },
      fail: function () {
       
      }
    })
  }

6.位置范围距离计算

 cauculateRoute: function () {
    var _this = this;
    //调用距离计算接口
    qqmapsdk.calculateDistance({
      //mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填
      mode: 'walking',
      //from参数不填默认当前地址
      //获取表单提交的经纬度并设置from和to参数（示例为string格式）
      from: '', //若起点有数据则采用起点坐标，若为空默认当前地址。也可以这样写： from: e.detail.value.start || ''
      to: '39.984060,116.307520;39.984060,116.507520', //终点坐标
      success: function (res) {
        console.log(res);
      },fail:function(res){
        console.log(res);
      }
    })
  }

7.一些页面跳转问题

（1.带参跳转

wx.navigateTo({
        url: '../adressput/adressput?type='+item.address
       //对象转为字符串 url: '../adressput/adressput?type='+JSON.stringify(item)
      })

接收：

 onLoad: function (options) {
    console.log(options.type);
}

（2.区别
wx.navigateTo
wx.redirectTo
这俩个都是页面跳转，wx.redirectTo关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
页面效果是a-b-c用wx.navigateTo跳转，回退正常
但是wx.redirectTo直接退出应用Ｏ(≧口≦)Ｏ
（3.页面回退并传递参数给之前页面。
这种应用很常见，比如

image.png

代码如下：

var pages = getCurrentPages();
  var prevPage = pages[pages.length - 2];//上一页，pages[pages.length - 1]表示当前页
   prevPage.setData({
      addresstr: item.address
    }) 
    wx.navigateBack({
      url: '../adress/adress'
    });