更多好玩的功能见文章主页,陆续推出。
微信小程序【一】一键登录
微信小程序【二】显示登录时的头像和昵称
微信小程序【三】超Q旋转音乐播放器
微信小程序【四】好玩的点击展开弹框功能
微信小程序【五】摇骰子
效果展示图
登录展示,这是最近版本的写法,以前的方法被弃用了,可能无法使用了。
一、login.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Component({
data: {
motto: '欢迎您',
userInfo: {
avatarUrl: defaultAvatarUrl,
nickName: '',
},
hasUserInfo: false,
canIUseGetUserProfile: wx.canIUse('getUserProfile'),
canIUseNicknameComp: wx.canIUse('input.type.nickname'),
},
methods: {
// 事件处理函数
bindViewTap() {
wx.switchTab({
// 登录后跳转路径
url: '/pages/index/index',
success: (res) => {
console.log('Navigation successful');
},
fail: (err) => {
console.error('Navigation failed', err);
},
})
},
onChooseAvatar(e) {
const { avatarUrl } = e.detail
const { nickName } = this.data.userInfo
this.setData({
"userInfo.avatarUrl": avatarUrl,
hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
})
if (this.data.hasUserInfo) {
this.saveUserInfo();
this.bindViewTap();
}
},
onInputChange(e) {
const nickName = e.detail.value
const { avatarUrl } = this.data.userInfo
this.setData({
"userInfo.nickName": nickName,
hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
})
if (this.data.hasUserInfo) {
this.saveUserInfo();
this.bindViewTap();
}
},
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
this.saveUserInfo();
// 自动跳转到主页
this.bindViewTap();
}
})
},
saveUserInfo() {
const app = getApp();
app.globalData.userInfo = this.data.userInfo;
app.globalData.hasUserInfo = this.data.hasUserInfo;
wx.setStorageSync('userInfo', this.data.userInfo);
}
}
})
二、login.json
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}
三、login.wxml
<!-- login.wxml -->
<navigation-bar title="xxx" back="{{false}}" color="black" background="#CDAA7D"></navigation-bar>
<view class="container">
<cover-view class="background">
<!-- 背景图 -->
<cover-image src="http://xxx/bg/login_bg.png" class="background-image"></cover-image>
</cover-view>
<view class="userinfo">
<block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{userInfo.avatarUrl}}"></image>
</button>
<view class="nickname-wrapper">
<text class="nickname-label">昵称</text>
<input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
</view>
</block>
<block wx:elif="{{!hasUserInfo}}">
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
<view wx:else> 请使用2.10.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 >
<text class="tip">点击头像-输入昵称-点击头像-完成登录</text>
</view>
</view>
四、login.wxss
/* login.wxss */
page {
height: 100vh;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.background-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
z-index: 1; /* 确保内容显示在背景图上方 */
}
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
width: 80%;
margin-top: 50px; /* 上移整体位置 */
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.avatar-wrapper {
padding: 0;
width: 56px !important;
border-radius: 8px;
margin-top: 20px; /* 上移位置 */
margin-bottom: 20px; /* 调整底部间距 */
}
.avatar {
display: block;
width: 56px;
height: 56px;
}
.nickname-wrapper {
margin-bottom: 300px;
display: flex;
align-items: center; /* 文字水平对齐 */
width: 100%;
padding: 16px;
box-sizing: border-box;
border-top: .5px solid rgba(0, 0, 0, 0.1);
border-bottom: .5px solid rgba(0, 0, 0, 0.1);
color: black;
font-weight: bold; /* 加粗字体 */
}
.nickname-label {
width: 105px;
font-size: 20px;
}
.nickname-input {
flex: 1;
font-weight: bold; /* 加粗字体 */
font-size: 20px;
}
.tip{
color: white;
position: relative; /* 设置相对定位 */
top: 50px; /* 向下移动20像素 */
}