微信小程序云开发(篇三)

学习记录

一、我的页面

效果展示：

1.1、将数据缓存在本地

• 文档
  微信官方文档
• 功能描述
  将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
• 参数
  string key
  本地缓存中指定的 key
• any data
  需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
• 示例代码

        //将用户信息缓存到本地
        try {
          wx.setStorageSync('key', user)
        } catch (e) {
          // Do something when catch error 
        }

1.2、取出本地缓存

• any wx.getStorageSync(string key)
• 功能描述
  从本地缓存中同步获取指定 key 的内容。
• 示例代码

  onLoad() {
    try {
      var user = wx.getStorageSync('key')
      if (user) {
        this.setData({
          userInfo: user
        })
      }
    } catch (e) {
      // Do something when catch error
    }
  },

1.3、清除本地缓存

• 清除缓存，可以认为就是将缓存设置为 null 空

    //清除缓存，可以认为就是将缓存设置为 null 空
    wx.setStorageSync('key', null)

    this.setData({
      userInfo: ''
    })

1.4、授权登录

  data: {
    userInfo: ''
  },
  onLoad() {
    try {
      var user = wx.getStorageSync('key')
      if (user) {
        this.setData({
          userInfo: user
        })
      }
    } catch (e) {
      // Do something when catch error
    }
  },

  //授权登录
  login() {
    wx.getUserProfile({
      desc: '授权才能使用完整功能',
      success: res => {
        let user = res.userInfo

        //将用户信息缓存到本地
        try {
          wx.setStorageSync('key', user)
          wx.showToast({
            title: '登录成功',
          })
        } catch (e) {
          // Do something when catch error 
        }

        console.log("用户信息", user)
        this.setData({
          userInfo: user
        })
      },
      fail: res => {
        console.log("授权失败", res)
      }
    })
  },

1.5、退出登录

  //退出登录
  loginOut() {
    this.setData({
      userInfo: ''
    })
    //wx.setStorageSync('key', null)

  },

1.6、我的页面布局

因为代码有点长，这里就写点主要的。

• 消除按钮样式

wxml 中

    <!-- 意见反馈 -->
    <view class="item1">
      <image class="img2" src="/imgs/icn2.png"></image>
      <button class="button" open-type="feedback">意见反馈</button>
      <view class="right"> </view>
    </view>
    <!-- 联系客服 -->
    <view class="item1">
      <image class="img3" src="/imgs/icn3.png"></image>
      <button class="button" open-type="contact">联系客服</button>
      <view class="right"> </view>
    </view>

wxss
对于意见反馈和联系客服，我们只需赋予open-type特定的值即可达到功能。

详见： 文档说明

但是这个按钮是有自带样式的，想要达到上面的效果，就要自己去消除它。

/* ----------------------------消除按钮样式------------------ */
.button {
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: none;
  text-align: left;
  padding: 0px;
  margin: 0px;
  line-height: 1.3;
  font-size: 16px;
}
.button::after {
  border: none;
  border-radius: 0;
}

再调整一下如下图：

1.7、透明背景图片的设置

我在wxml中的最外面套个view

<view class="background">

设置样式;wxss

.background {
  margin-top: 0rpx;
  padding: 10rpx;
  background: url(https://636c-cloud1-6geteyha69be255a-1308694316.tcb.qcloud.la/22.png?sign=4d9665369dad5af2f6eb9e265ca58fc2&t=1654405738) no-repeat;
  /* 推荐使用这个cover属性来实现 图片尺寸 */
  background-size: cover;
  height: 750px;
  width:  100%;
  position: relative;
} 

1.8、个人中心条例框架

给个 item

wxss

.item1 {
  margin-top: 40rpx;
  display: flex;
  padding: 20rpx;
  background: rgba(255,255,255,0.1);
  align-items: center;
  border-bottom: 2rpx solid gainsboro;
}

1.9、用户头像与名称

wxml中

  <view class="top1">
    <button wx:if="{{!userInfo}}" class="bt_connect" hover-class="hover-class-1" bindtap="login">授权登录</button>

    <view wx:else class="root">
      <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
      <text  class="nicheng">{{userInfo.nickName}}</text>
      <button class="tuichu" bindtap="loginOut">退出登录</button>
    </view>
  </view>

wxss

.root {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.touxiang {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-top: 40rpx;
  margin-bottom: 20rpx;
}

.bt_connect {
  width: 300rpx;
  height: 70rpx;
  color: #8e377d;
  border: 3rpx solid #0ede15;
  border-radius: 80rpx;
  font-size: 35rpx;
  margin-top: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;

}

.nicheng {
  color: #ad0382;
  font-size: 46rpx;
}

/* 按钮的点击效果 */
.hover-class-1 {
  top: 3rpx;
  background-color: #518267;
}

未完待续~~学习中，拜拜