//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.weixin.qq.com/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.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
<!--index.wxml-->
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<!--在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：-->
<!--当条件成立小程序页面才会渲染这个button，否则就会在页面上渲染下面的wx:else中的WXML代码-->
<!--因为需要用户主动触发才能打开 APP，所以该功能不由 API 来调用，需要用 open-type 的值设置为 getUserInfo 的 <button> 组件的点击来触发。-->
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 点击获取头像暱称 </button>
<block wx:else>
<!--wx:else前面有个block标签，也很好理解，
因为 wx:if/wx:else 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来
由于wx:else里有2个标签（image和text），
所以需要用block包起来做为一个整体进行渲染，所以把block理解成块级元素即可
-->
<!--在组件中绑定一个事件处理函数-->
<!--如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数-->
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
<!--</block>不是组件 仅仅是一个包装元素-->
</view>
<!--usermotto 这个类就是wxss的 但是好像没有获取到用户个性签名啊
这个不知道什么情况。。。
知道了，是会有弹窗的，因为需要用户授权你大爷的-->
<view class="usermotto">
<!--测试区-->
<!--<button open-type="usermotto" bindgetuserinfo="usermotto"> 点击更改签名 </button>-->
<!--测试区-->
<!--测试区原始数据-->
<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样式发生了改变，可以自行尝试
其余的没什么好解释的，大家可以看看。
wx.canIUse(String)
判断小程序的API，回调，参数，组件等是否在当前版本可用。
String参数说明： 使用${API}.${method}.${param}.${options}或者${component}.${attribute}.${option}方式来调用，例如：
- *${API}代表 API 名字
- *${method}代表调用方式，有效值为return, success, object, callback
- *${param}代表参数或者返回值
- *${options}代表参数的可选值
- *${component}代表组件名字
- *${attribute}代表组件属性
- *${option}代表组件属性的可选值
这里还有一个大佬写的博客，很详细，可以多看看