微信小程序 + Go 开发《共享遛狗》（第三篇）携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

第三篇(开锁页面)

开锁页面

<view class="container">
    <view class="static">
        <image src="images/ad9d49ad5d8545268de7f77efbfcf4b5.png" />
        <view class="margin-top">
            <view>恭喜你，成为这只毛孩子的临时铲屎官</view>
            <view>开启愉快的一天吧</view>
        </view>
    </view>
    <button style="width:80%" class="bg-grey lg" bindtap="onUnlockTap">开始啦</button>
</view>

图片.png

获取用户头像

我们希望在这个页面可以获取用户的头像并展示在页面上。同时，也在首页展示用户的头像。

button 的 open-type 属性。

<button wx:if="{{!avatarURl}}" class="cu-avatar round lg bg-grey margin-xs" open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">
  <text class="cuIcon-people"></text>
</button>

getUserInfo	获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息

当用户不授权的时候，展示占位图标。

同时，用户也可以选择，授权之后，是否进行头像的展示。这个可以通过小程序中自带的 switch 组件来完成。

<view wx:if="{{avatarURl}}" class="switch-container">
  <image class="cu-avatar round lg bg-grey margin-xs" src="{{avatarURl}}" />
  <switch bindchange="onShareLocation" checked="{{shareLocation}}" />
</view>

在 getUserInfo 的回调函数中，获取到当前用户的信息。因为我们是首次授权获取，那么就是默认用户是选择展示头像。

这里我们需要借助小程序的 setStorageSync 和 getStorageSync 这两个 API。

wx.setStorageSync: 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

wx.getStorageSync: 从本地缓存中同步获取指定 key 的内容。

onGetUserInfo(e: any) {
  const userInfo: WechatMiniprogram.UserInfo = e.detail.userInfo
  if (userInfo) {
    this.setData({
      shareLocation: true,
    })
    wx.setStorageSync(shareLocationKey, true)
    wx.setStorageSync(avatarKey, userInfo.avatarUrl)
  }
},

switch 开关这个就比较简单了，true 和 false 的切换。

onShareLocation(e: any) {
  const shareLocation: boolean = e.detail.value
  wx.setStorageSync(shareLocationKey, shareLocation)
}

页面进入的时候，也应该去判断之后的选择，并展示出来。

async onLoad() {
  this.setData({
    avatarURl: wx.getStorageSync(avatarKey) || '',
    shareLocation: wx.getStorageSync(shareLocationKey) || false,
  })
},

此刻，我们的页面

图片.png

index 页面，需要进行一些代码的修改。

<cover-image class="round" src="{{avatarURL?avatarURL:'images/account.png'}}"></cover-image>

async onLoad() {
  this.setData({
    avatarURL: wx.getStorageSync(avatarKeyLock) || '',
  })
},

图片.png