Commit 4ac35564 authored by coldice's avatar coldice

完成功能

parent 2949133b
{
"less.compile": {
"outExt": ".wxss"
}
}
\ No newline at end of file
imgs/0.png

55.9 KB

This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
// index.js
// 获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
time: 0,
timer: null,
imgId: 1
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
onLoad() {
if (wx.getUserProfile) {
touchstart_fn(e) {
let timer = setInterval(() => {
this.setData({
canIUseGetUserProfile: true
time: this.data.time + 1
})
}
},
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
let temp = this.data.time % 9
if (temp >= 7) {
this.setData({ imgId: 5 })
} else if (temp >= 5) {
this.setData({ imgId: 4 })
} else if (temp >= 2) {
this.setData({ imgId: 3 })
} else if (temp >= 1) {
this.setData({ imgId: 2 })
}
})
},
getUserInfo(e) {
// 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
console.log(e)
console.log(temp);
}, 1000);
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
timer
})
},
touchend_fn(e) {
clearInterval(this.data.timer)
this.setData({ time: 0, imgId: 1 })
}
})
})
\ No newline at end of file
page {
.out {
position: fixed;
width: 428rpx;
height: 422rpx;
left: -20rpx;
right: 0rpx;
top: -10rpx;
bottom: 0;
margin: auto;
}
.in {
position: fixed;
width: 193rpx;
height: 169rpx;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.out4 {
left: 0rpx;
width: 430rpx;
}
.out5 {
left: -120rpx;
width: 530rpx;
}
.out2 {
left: -120rpx;
width: 530rpx;
}
.out3 {
left: -120rpx;
width: 680rpx;
}
}
\ No newline at end of file
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<block wx:if="{{canIUseOpenData}}">
<view class="userinfo-avatar" bindtap="bindViewTap">
<open-data type="userAvatarUrl"></open-data>
</view>
<open-data type="userNickName"></open-data>
</block>
<block wx:elif="{{!hasUserInfo}}">
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
<button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<view wx:else> 请使用1.4.4及以上版本基础库 </view>
</block>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
<view class="wrap">
<image wx:if="{{imgId === 1}}" src="/imgs/1.png" class="out" />
<image wx:elif="{{imgId === 2}}" src="/imgs/4.png" class="out out4" />
<image wx:elif="{{imgId === 3}}" src="/imgs/5.png" class="out out5" />
<image wx:elif="{{imgId === 4}}" src="/imgs/2.png" class="out out2" />
<image wx:elif="{{imgId === 5}}" src="/imgs/3.png" class="out out3" />
<image src="/imgs/0.png" catch:touchstart="touchstart_fn" catch:touchend="touchend_fn" class="in" />
</view>
\ No newline at end of file
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
page .out {
position: fixed;
width: 428rpx;
height: 422rpx;
left: -20rpx;
right: 0rpx;
top: -10rpx;
bottom: 0;
margin: auto;
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
page .in {
position: fixed;
width: 193rpx;
height: 169rpx;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
page .out4 {
left: 0rpx;
width: 430rpx;
}
page .out5 {
left: -120rpx;
width: 530rpx;
}
page .out2 {
left: -120rpx;
width: 530rpx;
}
page .out3 {
left: -120rpx;
width: 680rpx;
}
.usermotto {
margin-top: 200px;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment