//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})}})
<!--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}代表组件属性的可选值
这里还有一个大佬写的博客,很详细,可以多看看
/wlwlwlwl015/article/details/78868624