100字范文 > 微信小程序获取用户信息官网例程详解

微信小程序获取用户信息官网例程详解

时间：2020-06-04 19:58:30

相关推荐

微信小程序获取用户信息官网例程详解

//index.js

//index.js//获取应用实例const app = getApp()Page({data: {motto: 'diligent is the short cut',//**motto 格言的意思这里是你要显示在下面的东西userInfo: {},hasUserInfo: false,//**获取到用户信息标志canIUse: wx.canIUse('button.open-type.getUserInfo')//* boolean wx.canIUse(string schema) 判断小程序的API，回调，参数，组件等是否在当前版本可用。//*string schema 使用 ${API }.${method }.${param }.${options } 方式来调用//*或者 ${component }.${attribute }.${option } 方式来调用（这里用的是这个--> open-type属性为getUserInfo的button组件},//事件处理函数//**在组件中绑定一个事件处理函数。//**如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。bindViewTap: function() {wx.navigateTo({/*wx.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。 */url: '../logs/logs'})},//**页面加载之后立即执行一段 JavaScript：//即一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。onLoad: function () {if (app.globalData.userInfo) {this.setData({/* app.globalData.userInfo 能获取到些啥？ *//* 官方文档上有详情 https://developers./miniprogram/dev/api/open.html#wxgetuserinfoobject*/userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse){// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在没有 open-type=getUserInfo 版本的兼容处理wx.getUserInfo({//****************如果获取用户信息成功success: res => {app.globalData.userInfo = res.userInfo//******结果信息里存入获取到的用户信息this.setData({//******************设置用户信息userInfo: res.userInfo,hasUserInfo: true})}})}},//①function（e）传值//②console.log(e)查看事件传的值有哪些getUserInfo: function(e) {console.log(e)//console.log在console窗口输出信息（用于输出普通信息）就是你编译后下面窗口显示的信息app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})}})

<view class="container"><view class="userinfo">  <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 点击获取头像昵称 </button><block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"> <text class="user-motto">{{motto}}</text></view></view>

/**index.wxss**/

/**index.wxss**/.userinfo {/*用户信息的显示（也就是昵称和头像Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。*/display: flex;/*按列方向适应那么你的头像和昵称就是上下显示*//*flex-direction: column;*/flex-direction: column;/*按列方向适应那么你的头像和昵称就是左右显示*//*flex-direction: row;*//*居中*/align-items: center;/*（个人添加的）让头像和昵称两端对齐，项目之间的间隔都相等*/justify-content: space-between;}/*****userinfo-avatar 是化身的意思就是你的头像margin 就是页边距的意思写css圆形时总是直接设置border-radius为50%border-radius的值是百分比的话，就相当于盒子的宽度和高度的百分比我们知道在一个正方形内做一个面积最大的圆形，这个圆的半径就为正方形边长的一半。所以border-radius为50%时，则会形成圆。100%一样是实心圆，具体百度*/.userinfo-avatar {width: 160rpx;height: 160rpx;/*margin 看下面.usermotto里*/margin: 20rpx;/*border-radius: 50%; 这个就是原来的圆形*//*border-radius: 60px 60px 0 60px; 花瓣形状*/border-radius: 100%;}/*****userinfo-nickname 是昵称的意思昵称的颜色可以百度*/.userinfo-nickname {/*color: #FF88C2; 粉色*/color: #551A8B;}/*****你要显示的格言（helloword）的上边很奇怪这个不应该是获取来的咩距离上方200个像素。外边距并不是当前内容与DIV盒子的边距，而是与外面的（网页边框）的距离。如果是padding-top:57px. 这就是内边距，与当前DIV盒子的距离*/.usermotto {margin-top: 200px;color: #C71585;/*这里其实也可以设置颜色*/}/* 照理说应该还有用户的其他不是很重要的信息一般的话 1.extend extend 里有.gender*/

app.json 不好注释就来个截图吧

"enablePullDownRefresh":true,（你们自己复制添加进去，我就不多截图了）

添加这个字段的话才可以看到

这个字段的设置"backgroundColor": "#eeeeee",

原因是background需要下拉才能显示这片区域

"backgroundTextStyle": "light",（或者dark）

是使得下拉刷新的loading样式发生了改变，可以自行尝试

其余的没什么好解释的，大家可以看看。