201711671116 实训学习日志四

（一）主要内容

1、微信小程序的开发技巧，例如通过脚本合理设置图片宽高，使得图片能自适应不同品牌、不同型号的设备。

2、授权获取用户信息。API给出了一种调用方法，是使用 &ltbutton open-type="getUserInfo"&gt&lt/button&gt 引导用户主动进行授权操作，需要建立一个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)
  }
})

 

（三）作业

如图，定位后地图上能显示浮标，并显示经纬度。

为个人页面添加背景图，使头像与名称的背景图实现不同手机型号自适应高度。