微信小程序个人订单，微信头像用户名信息获取页面-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序个人订单，微信头像用户名信息获取页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

这里先做一个简单的展示，这个页面是我参加比赛做的小程序，分享给大家，不是很好看哈哈哈哈

微信小程序个人订单，微信头像用户名信息获取页面

话不多说，先上代码。首先是前端页面 .wxml

文章来源地址https://www.toymoban.com/news/detail-513557.html

<!-- 获取用户头像和昵称 -->
<view class='MY_Touxiang'>
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile" class="ke"> 获取头像昵称 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      <view class='MY_Touxiang'>
      <image  class="avatar" 
      src="https://www.baozhinin.com/html/style/img/main/user.png" mode="cover"></image>
    </view>
      <text class='My_name'>用户名</text>
    </block>
<!-- 点击button之后 -->
    <block wx:else>
      <text decode="{{true}}">&ensp;&ensp;&ensp;&ensp;</text>
      <image  class="avatar" 
      src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text decode="{{true}}">&ensp;&ensp;&ensp;&ensp;</text>
      <text class='My_name'>{{userInfo.nickName}}</text>
    </block>
  </view>
</view>
<!--下面两张图片的页面，我设置了相应的跳转，可以换成自己的目录或者直接取消跳转-->
<view class="school-list">
    <view class="school-list-info">
          
          <image class="school-list-photo" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.WfsveKTAuuhBzfme1Shx3wHaE6?w=249&h=180&c=7&r=0&o=5&dpr=1.38&pid=1.7" bindtap="get"></image>
        
          <image class="school-list-photo" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.6bu7qKtfjPsRPYBMs0rC5gHaEJ?pid=ImgDet&rs=1" bindtap="Qus"></image>
    </view>
  </view>

<!--一些简单的相关信息-->
<view class="personalList">
<!--
        <view class="iconfont"  bindtap="listFirst">我的预定</view>

         <view class="iconfont"  bindtap="myDong">我的动态</view>
-->
       
        <view class="iconfont"  bindtap="AboutUs">关于我们</view>
        <view class="iconfont" style="border:none;">意见反馈</view>
        <view class="iconfont"  bindtap="myDing">我的订单</view>
        <button  class="ke" open-type="contact" bindcontact="handleContact">联系客服</button>
</view>

接下来是美化一下页面.wxss

/* pages/page5/page5.wxss */
/*
.header{width: 750rpx; 
height: 90rpx;
}
.hdCon{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.hdCon navigator,.hdCon.kefu{height: 50rpx;}
.hdCon view,.hdCon.kefu{height: 50rpx;}
.hdCon image{height:50rpx;}
.kefu{
  position: relative;定位
}
.kefu .btn{ 客服按钮
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.5;透明度
}
*/
page{
      /*background-color:#fff;*/
      background-image:url(https://picb.zhimg.com/v2-9011d0eefd5054e2db925b0a8f24bd82_r.jpg?source=1940ef5c);
      padding-bottom: 120rpx;
      font-size:30rpx;
  }
  
  .MY_Touxiang{
    display:flex;                 
    justify-content: center;         
   }
   .avatar{
    height: 100px;
    width: 100px;
    border-radius: 50px;
    border-radius: 50%;
    overflow:hidden;
    display:flex;
    justify-content: center; 
    align-items: center;
  }
.My_name{

  font-size: 45rpx;
  height: 50px;
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
  color: rgb(129, 129, 129);
}

/*两张图片*/
.school-list-info{
  display: flex;
  margin-left:20rpx ;
  margin-right: 20rpx;
  margin-top: 20rpx;
  align-items: center;
  justify-content: space-between;

}
.school-list-photo{
  width: 330rpx;
  height: 250rpx;
  /*opacity: 0.7;*/
}


.personalList{

      padding:120rpx 60rpx;
  }


  .personalList view{
    
        display: block;
    
        line-height:100rpx;
    
        height:100rpx;
    
    
    }
    

    
    .personalList view{
    
        position:relative;
    
    }
    
    .iconfont{
    
        font-size:20px;
        align-items: center;
    }
    
    .personalList view:before{
    
        color:#000000;
    
        font-size:20px !important;
    
        font-weight:bold;
    
        padding-right: 10rpx;
    
        text-align:center;
    
        vertical-align:top;
    }
    
    
    .personalList view:after{
    
        content:'';
    
        height:10px;
   
        width:10px;
    
        display:block;
    
        border:1px solid rgb(5, 0, 0);
    
        border-left-width:0;
    
        border-bottom-width:0;
    
        position:absolute;
    
        top:10px;
    
        right:6px;
    
        -webkit-transform:rotate(45deg);
  
           -moz-transform:rotate(45deg);

                transform:rotate(45deg);
    }
    .ke{
      opacity: 0.7;
    }

最后就是js页面啦，这里涉及到微信头像昵称的获取，还有一些button的实现，我这里其他页面没有附着，这个项目涉及到很多页面，就不给大家放了

// pages/page5/page5.js
Page({


//联系客服
 handleContact (e) {
        console.log(e.detail.path)
        console.log(e.detail.query)
    },

  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
//button跳转页面
get:function(params) {
    wx.navigateTo({
      url: '/pages/comin/comin',
    })
  },
  Qus:function(params) {
    wx.navigateTo({
      url: '/pages/Qus/Qus',
    })
  },
  listFirst:function(params) {
    wx.navigateTo({
      url: '/pages/listFirst/listFirst',
    })
  },
  AboutUs:function(params) {
    wx.navigateTo({
      url: '/pages/About-Us/About-Us',
    })
  },
  myDing:function(params) {
    wx.navigateTo({
      url: '/pages/myDing/myDing',
    })
  },
  myDong:function(params) {
    wx.navigateTo({
      url: '/pages/my-Dong/my-Dong',
    })
  },
  onLoad: function() {
    // 查看是否授权
    /*
    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
    */
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
// 获取用户信息
  getUserProfile:function(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
// 获取用户信息
  getUserInfo:function(e){
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})

到了这里，关于微信小程序个人订单，微信头像用户名信息获取页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！