diff --git a/scr/food/pages/usercenter/usercenter.js b/scr/food/pages/usercenter/usercenter.js index 4643aa5..f3b4f87 100644 --- a/scr/food/pages/usercenter/usercenter.js +++ b/scr/food/pages/usercenter/usercenter.js @@ -1,66 +1,145 @@ // pages/usercenter/usercenter.js +// pages/mine/mine.js +const app = getApp() Page({ /** * 页面的初始数据 */ data: { - + userInfo: {}, + //判断小程序的API,回调,参数,组件等是否在当前版本可用。 + canIUse: wx.canIUse('button.open-type.getUserInfo'), + isHide: false, + }, + //事件处理函数 + bindViewTap: function() { + wx.navigateTo({ + url: '../logs/logs' + }) }, /** * 生命周期函数--监听页面加载 */ - onLoad(options) { + onLoad: function() { + var that = this; + // 查看是否授权 + wx.getSetting({ + success: function(res) { + if (res.authSetting['scope.userInfo']) { + wx.getUserInfo({ + success: function(res) { + app.globalData.userInfo = res.userInfo + that.setData({ + userInfo: res.userInfo, + }) + // 用户已经授权过,不需要显示授权页面,所以不需要改变 isHide 的值 + // 根据自己的需求有其他操作再补充 + // 我这里实现的是在用户授权成功后,调用微信的 wx.login 接口,从而获取code + wx.login({ + success: res => { + // 获取到用户的 code 之后:res.code + // console.log("用户的code:" + res.code); + // 可以传给后台,再经过解析获取用户的 openid + // 或者可以直接使用微信的提供的接口直接获取 openid ,方法如下: + // wx.request({ + // // 自行补上自己的 APPID 和 SECRET + // url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code', + // success: res => { + // // 获取到用户的 openid + // console.log("用户的openid:" + res.data.openid); + // } + // }); + } + }); + } + }); + } else { + // 用户没有授权 + // 改变 isHide 的值,显示授权页面 + that.setData({ + isHide: true + }); + } + } + }); + }, + bindGetUserInfo: function(e) { + if (e.detail.userInfo) { + //用户按了允许授权按钮 + var that = this; + // 获取到用户的信息了,打印到控制台上看下 + console.log("用户的信息如下:"); + console.log(e.detail.userInfo); + //授权成功后,通过改变 isHide 的值,让实现页面显示出来,把授权页面隐藏起来 + that.setData({ + isHide: false, + userInfo: e.detail.userInfo + }); + } else { + //用户按了拒绝按钮 + wx.showModal({ + title: '警告', + content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!!!', + showCancel: false, + confirmText: '返回授权', + success: function(res) { + // 用户没有授权成功,不需要改变 isHide 的值 + if (res.confirm) { + console.log('用户点击了“返回授权”'); + } + } + }); + } }, /** * 生命周期函数--监听页面初次渲染完成 */ - onReady() { + onReady: function() { }, /** * 生命周期函数--监听页面显示 */ - onShow() { + onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ - onHide() { + onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ - onUnload() { + onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ - onPullDownRefresh() { + onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ - onReachBottom() { + onReachBottom: function() { }, /** * 用户点击右上角分享 */ - onShareAppMessage() { - + onShareAppMessage: function() { } -}) \ No newline at end of file +}) diff --git a/scr/food/pages/usercenter/usercenter.wxml b/scr/food/pages/usercenter/usercenter.wxml index d1caa31..c83934f 100644 --- a/scr/food/pages/usercenter/usercenter.wxml +++ b/scr/food/pages/usercenter/usercenter.wxml @@ -1,2 +1,70 @@ -pages/usercenter/usercenter.wxml + + + + + + + + 申请获取以下权限 + 获得你的公开信息(昵称,头像等) + + + + + 请升级微信版本 + + + + + + {{userInfo.nickName}} + + + + + 手机绑定 + + > + + + + + + 写博客 + + > + + + + + 我的博客 + + > + + + + + 我的收藏 + + > + + + + + 意见反馈 + + > + + + + + 设置 + + > + + + + diff --git a/scr/food/pages/usercenter/usercenter.wxss b/scr/food/pages/usercenter/usercenter.wxss index 5ee4c11..2626c88 100644 --- a/scr/food/pages/usercenter/usercenter.wxss +++ b/scr/food/pages/usercenter/usercenter.wxss @@ -1 +1,83 @@ -/* pages/usercenter/usercenter.wxss */ \ No newline at end of file +/* pages/mine/mine.wxss */ +.userinfo { + display: flex; + flex-direction: column; + align-items: center; + background: #eb6161; + width: 100%; + height: 300rpx; +} + +.userinfo-avatar { + width: 128rpx; + height: 128rpx; + margin: 20rpx; + border-radius: 50%; +} + +.userinfo-nickname { + color: black; +} + +.header { + margin: 90rpx 0 90rpx 50rpx; + border-bottom: 1px solid #ccc; + text-align: center; + width: 650rpx; + height: 300rpx; + line-height: 450rpx; +} + +.header image { + width: 200rpx; + height: 200rpx; +} + +.content { + margin-left: 50rpx; + margin-bottom: 90rpx; +} + +.content text { + display: block; + color: #9d9d9d; + margin-top: 40rpx; +} + +.bottom { + border-radius: 80rpx; + margin: 70rpx 50rpx; + font-size: 35rpx; +} + +/* 用户中心 */ + +.hr { + width: 100%; + height: 15px; + background-color: #f4f5f6; +} +.item { + display: flex; + flex-direction: row; +} +.title { + padding-top: 15px; + padding-bottom: 15px; + padding-left: 15px; + font-size: 15px; +} + +.detail2 { + font-size: 15px; + position: absolute; + right: 10px; + height: 50px; + line-height: 50px; + color: #888; +} + +.line { + border: 1px solid #ccc; + opacity: 0.2; +}