(一)主要内容
1、微信小程序的开发技巧,例如通过脚本合理设置图片宽高,使得图片能自适应不同品牌、不同型号的设备。
2、授权获取用户信息。API给出了一种调用方法,是使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作,需要建立一个button按钮。
3、在地图中加入浮标,获取定位信息。微信小程序中可以导入腾讯地图,自己可以加入浮标,并显示定位的经纬度。
(二)相关代码
小程序用户信息组件示例代码
<!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级微信版本</view>
Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function() {
// 查看是否授权
wx.getSetting({
success (res){
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
}
})
}
}
})
},
bindGetUserInfo (e) {
console.log(e.detail.userInfo)
}
})
(三)作业
如图,定位后地图上能显示浮标,并显示经纬度。
为个人页面添加背景图,使头像与名称的背景图实现不同手机型号自适应高度。