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

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

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

<!-- 获取用户头像和昵称 -->
<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})},
})

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

微信小程序——读取显示用户头像昵称
微信小程序--读取显示用户头像昵称代码仓库地址一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步骤 2.1 自动生成小程序完成开发者注 ...
【SpringBoot学习】39、SpringBoot 集成 wxJava 微信小程序：订单支付
文章目录 SpringBoot 集成 wxJava 微信小程序:订单支付 1.整合 wxJava 小程序 2.支付配置类 3.application.yml 配置 4.授权登录流程 5.uniapp ...
微信小程序：自动采集头像大全微信小程序源码
这是一款以头像为主的一款微信小程序源码该小程序内包含了各种分类,各种样式都有可以说是目前最全的一款头像小程序源码五大分类情侣,女生,男生,卡通,风景每大分类下面都有N个小分类,每个小分类下面有 ...
微信小程序：流量主头像组合微信小程序
这是一个头像类型的小程序源码支持多种流量主比如激励视频,Banner,视频,插屏,原生模板等小程序内包含多种头像非类,都是自动采集比如男生头像,男声头像,动漫头像等等另外该小程序还支持姓氏头 ...
微信小程序云开发微信支付、订单查询、申请退款
微信小程序云开发微信支付使用云开发微信支付功能的前提统一下单查询订单申请退款常见问题总结: 使用云开发微信支付功能的前提小程序主体为企业或者工商个体户小程序完成了微信认证小程序接入微信 ...
微信小程序的订单评论页面-仿淘宝
微信小程序的订单评论页面-仿淘宝在网上搜了下,大部分都挺麻烦的,所以自己写了个,感觉还可以先看效果图: 需要用到的图片: 上代码: wxml: <view class='contains'& ...
一款DIY微头像助手的微信小程序，可以给头像加入各种个性挂件（圣诞帽，中国年，小红旗，口罩）的小程序工具
微头像助手 demo请于微信小程序搜索:微头像助手一款DIY微头像助手,可以给头像加上各种挂件的微信小程序! 部署说明: 直接上转即可使用本项目从技术上是支持所有平台(H5,APP,小程序)的,但 ...
[附源码]计算机毕业设计Python+uniapp基于微信小程序社区订单管理系统lum8u(程序+lw+远程部署)
[附源码]计算机毕业设计Python+uniapp基于微信小程序社区订单管理系统lum8u(程序+lw+远程部署) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: ...
uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...

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

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

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

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

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

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

最新文章

热门文章