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);
}
})
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)
3.如何申请key？下载qqmap-wx-jssdk
1. 申请开发者密钥（key）：申请密钥
2. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0
3. 在微信公众平台（我的账号是29XXX，密码是xmXXX）3. 安全域名设置，在“开发” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com
申请：
下次登录找key的话在这儿：key管理
记得勾选，不然地址获取不到
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，如果你用的是百度地图就用百度地图接口，否则会显示
检查一下自己配置的request 合法域名列表，在微信公众号--开发--开发设置--服务器域名（点击操作）
首先在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.页面回退并传递参数给之前页面。
这种应用很常见，比如
代码如下：
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];//上一页，pages[pages.length - 1]表示当前页
prevPage.setData({
addresstr: item.address
})
wx.navigateBack({
url: '../adress/adress'
});
8.锚点定位
在html中我们可以用a标签，微信小程序中我们需要用scroll-view标签，用法：
<scroll-view class='storydetailSome' style='height: calc(100vh - 250px)' scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true">
//定位到这个view
<view class='roomdetailSome-item roomlistSame' id="roomlistSame">
</view>
</scroll-view>
//定位触发按钮
<view class='aboutyard' bindtap='about_btn' data-opt="roomlistSame">相关小院</view>
js:
about_btn:function(e){
let target = e.currentTarget.dataset.opt;
this.setData({
toView: target
})
}
这里需要注意的一点是，scroll-view必须设定高度，如果你不确定，可以使用calc（）设置
