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

程序云开发(篇三)"/>

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

文章目录

• 一、我的页面
• • 效果展示：
  • 1.1、将数据缓存在本地
  • 1.2、取出本地缓存
  • 1.3、清除本地缓存
  • 1.4、授权登录
  • 1.5、退出登录
  • 1.6、我的页面布局
  • 1.7、透明背景图片的设置
  • 1.8、个人中心条例框架
  • 1.9、用户头像与名称

一、我的页面

效果展示：

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(.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;
}

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