微信小程序开发 Day04

任务：1、实现mine页面不点击button实现自动获取用户权限得到用户头像和名称；

           2、头像与名称的背景图实现不同手机型号自适应高度，地图页面给它加个光标。

1、实现mine页面不点击button实现自动获取用户权限得到用户头像和名称

只需要在onLoad: function开始的时候查看是否拥有权限，成功后就可以调用查看用户头像还有用户名称了，在这里调用用户名称还有头像用了open-data的方法，但是这种方法不能像平常一样将头像设定一个格式或者style，但是通过在wxss里面设置overflow:hidden;display: block;还是能够将头像的边角隐藏掉的。

下面是源代码（因为是和获取设备信息代码一起，所以代码有点长）：

js源代码：

const app = getApp()
Page({
  data: {
    model: '',
    pixelRatio: '',
    windowWidth: '',
    windowHeight: '',
    language: '',
    version: '',
    system: '',
    platform: '',
  },
  onLoad: function () {
    // 查看是否授权
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function (res) {
              console.log(res.userInfo)
              var userInfo = res.userInfo
              var nickName = userInfo.nickName
              var avatarUrl = userInfo.avatarUrl
              var gender = userInfo.gender //性别 0：未知、1：男、2：女
              var province = userInfo.province
              var city = userInfo.city
              var country = userInfo.country
            }
          })
        }
      }
    })
  },
  bindGetUserInfo(e) {
    console.log(e.detail.userInfo)
  },

  getInfo: function () {
    var _this = this;
    wx.getSystemInfo({
      success: function (res) {
        _this.setData({
          model: res.model,
          pixelRatio: res.pixelRatio,
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight,
          language: res.language,
          version: res.version,
          system: res.system,
          platform: res.platform
        })
      },
      fail: function (res) {
      },
      complete: function (res) {
      }
    })
  }
})

wxml源代码：

<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
<view class="userinfo">
  <view class="userinfo-avatar">
    <open-data  type="userAvatarUrl"></open-data>
  </view>
    <open-data type="userNickName"></open-data>
</view>
  <button bindtap='getInfo' >获取系统信息</button>
  <view wx:if="{{model !=''}}" class='bg'>
    <view>手机型号:{{model}}</view>
    <view>设备像素比:{{pixelRatio}}</view>
    <view>窗口宽度:{{windowWidth}}</view>
    <view>窗口高度:{{windowHeight}}</view>
    <view>微信设置的语言:{{language}}</view>
    <view>微信版本号:{{version}}</view>
    <view>操作系统版本:{{system}}</view>
    <view>客户端平台:{{platform}}</view>
  </view>

wxss源代码（图片的dase64代码太长了，在这里就不展示了）：

/* 头像 */
.userinfo-avatar {  
  overflow:hidden;  
  display: block;  
  width: 160rpx;  
  height: 160rpx;  
  margin: 20rpx;  
  margin-top: 50rpx;  
  border-radius: 50%;  
  border: 2px solid #fff;  
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);  
}  
/* 字体 */
.userinfo {  
  position: relative;  
  width: 750rpx;  
  height: 320rpx;  
  color: rgb(255, 255, 255);  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
/* 设备信息字体 */
.bg{
    position: relative;  
  width: 750rpx;  
  height: 320rpx;  
  color: rgb(187, 181, 181);  
  display: flex;  
  flex-direction: column;  
  align-items: center; 
}
/* 背景 */
.userinfo{  
  /* width: 100%;  
  height: 100%; */
    background-size:100% 100%;
     background-repeat:no-repeat;
  background-image: url("");
}

实现的图片如下：

 2、头像与名称的背景图实现不同手机型号自适应高度，地图页面给它加个光标

和昨天一样。。。

所以就直接上代码吧：

其实就是在classify.wxml加一个设定而已

wxml源代码：

{{longitude}}:{{latitude}}
<view class="" hover-class="none" hover-stop-propagation="false" style="width: 100%; height: 100%;">
  <map id="map" longitude="{{longitude}}" latitude=" {{latitude}}" markers="{{markers}}" scale="13" 
  show-location style="width: 100%; height: 100%;"></map>
</view>

就是里面的show-location style="width: 100%; height: 100%;"在起作用

效果图：