微信原生小程序设置头像昵称示例代码

admin

1、wxml

1. <!--index.wxml-->
   
2. <scroll-view class="scrollarea" scroll-y type="list">
   
3.   <view class="container">
   
4.     <view class="userinfo">
   
5.       <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
   
6.         <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
   
7.           <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
   
8.         </button>
   
9.         <view class="nickname-wrapper">
   
10.           <text class="nickname-label">昵称</text>
    
11.           <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
    
12.         </view>
    
13.       </block>
    
14.       <block wx:elif="{{!hasUserInfo}}">
    
15.         <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
    
16.         <view wx:else> 请使用2.10.4及以上版本基础库 </view>
    
17.       </block>
    
18.       <block wx:else>
    
19.         <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
    
20.         <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    
21.       </block>
    
22.     </view>
    
23.     <view class="usermotto">
    
24.       <text class="user-motto">{{motto}}</text>
    
25.     </view>
    
26.   </view>
    
27. </scroll-view>
    

复制代码

2、wxss

1. /**index.wxss**/
   
2. page {
   
3.   height: 100vh;
   
4.   display: flex;
   
5.   flex-direction: column;
   
6. }
   
7. .scrollarea {
   
8.   flex: 1;
   
9.   overflow-y: hidden;
   
10. }
    
11. 
    
12. .userinfo {
    
13.   display: flex;
    
14.   flex-direction: column;
    
15.   align-items: center;
    
16.   color: #aaa;
    
17.   width: 80%;
    
18. }
    
19. 
    
20. .userinfo-avatar {
    
21.   overflow: hidden;
    
22.   width: 128rpx;
    
23.   height: 128rpx;
    
24.   margin: 20rpx;
    
25.   border-radius: 50%;
    
26. }
    
27. 
    
28. .usermotto {
    
29.   margin-top: 200px;
    
30. }
    
31. 
    
32. .avatar-wrapper {
    
33.   padding: 0;
    
34.   width: 56px !important;
    
35.   border-radius: 8px;
    
36.   margin-top: 40px;
    
37.   margin-bottom: 40px;
    
38. }
    
39. 
    
40. .avatar {
    
41.   display: block;
    
42.   width: 56px;
    
43.   height: 56px;
    
44. }
    
45. 
    
46. .nickname-wrapper {
    
47.   display: flex;
    
48.   width: 100%;
    
49.   padding: 16px;
    
50.   box-sizing: border-box;
    
51.   border-top: .5px solid rgba(0, 0, 0, 0.1);
    
52.   border-bottom: .5px solid rgba(0, 0, 0, 0.1);
    
53.   color: black;
    
54. }
    
55. 
    
56. .nickname-label {
    
57.   width: 105px;
    
58. }
    
59. 
    
60. .nickname-input {
    
61.   flex: 1;
    
62. }
    

复制代码

3、js

1. // index.js
   
2. const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
   
3. 
   
4. Page({
   
5.   data: {
   
6.     motto: 'Hello World',
   
7.     userInfo: {
   
8.       avatarUrl: defaultAvatarUrl,
   
9.       nickName: '',
   
10.     },
    
11.     hasUserInfo: false,
    
12.     canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    
13.     canIUseNicknameComp: wx.canIUse('input.type.nickname'),
    
14.   },
    
15.   bindViewTap() {
    
16.     wx.navigateTo({
    
17.       url: '../logs/logs'
    
18.     })
    
19.   },
    
20.   onChooseAvatar(e) {
    
21.     const { avatarUrl } = e.detail
    
22.     const { nickName } = this.data.userInfo
    
23.     this.setData({
    
24.       "userInfo.avatarUrl": avatarUrl,
    
25.       hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
    
26.     })
    
27.   },
    
28.   onInputChange(e) {
    
29.     const nickName = e.detail.value
    
30.     const { avatarUrl } = this.data.userInfo
    
31.     this.setData({
    
32.       "userInfo.nickName": nickName,
    
33.       hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
    
34.     })
    
35.   },
    
36.   getUserProfile(e) {
    
37.     // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    
38.     wx.getUserProfile({
    
39.       desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    
40.       success: (res) => {
    
41.         console.log(res)
    
42.         this.setData({
    
43.           userInfo: res.userInfo,
    
44.           hasUserInfo: true
    
45.         })
    
46.       }
    
47.     })
    
48.   },
    
49. })
    

复制代码