前言
感谢! 承蒙关照~
微信小程序我的界面
界面效果:
界面结构:
小程序代码:
我们先看me.json代码
{
"navigationBarTitleText": "个人中心"
}
me.wxml代码
{{userInfo.nickName}}
手机绑定
>
阅读文章
>
电影推荐
>
我的收藏
>
意见反馈
>
设置
>
me.wxss代码
.bg {
height: 150px;
background-color: #d53e37;
}
.head {
display: flex;
flex-direction: column;
}
.headIcon {
display: flex;
justify-content: center;
}
.login {
display: flex;
color: #fff;
font-size: 15px;
margin-top: 15rpx;
justify-content: center;
}
.button {
margin: 10px;
font-size: 14px;
}
.head image {
border-radius: 50%;
}
.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;
}
me.js代码
//index.js
//获取应用实例
const app = getApp()
var openid = wx.getStorageSync("openid");
Page({
data: {
hasUserInfo: openid == ""
},
doAuthorization: function(e) {
var that = this;
console.log("调用了 doAuthorization 授权");
// console.log(e);
if (e.detail.userInfo == null) { //为null 用户拒绝了授权
//coding。。。。
console.log("用户拒绝授权");
} else {
//授权
wx.login({
success: function(res) {
console.log('login:code', res.code)
//发送请求
wx.request({
url: app.globalData.userInterfaceUrl + 'record/' + res.code, //接口地址
method: 'GET',
header: {
'content-type': 'application/json' //默认值
},
success: function(res) {
console.log("record 成功", res.data)
var res = res.data;
if (res.error) { //发生错误
console.log("错误：", res.msg);
} else { //返回成功
try {
wx.setStorageSync('openid', res.data.openid)
openid = wx.getStorageSync("openid");
} catch (e) {
console.log("wx.login 错误", e);
}
//加载用户信息
that.loadUserInfo();
that.setData({ //设置变量
hasUserInfo: false
});
}
},
fail: function(err) {
console.log("record 失败", err);
}
})
}
})
}
},
loadUserInfo: function() {
var that = this;
if (openid != "") {
wx.getUserInfo({
success: res => {
console.log("wx获得用户信息:", res);
var data = {
"openid": openid,
"user": res.userInfo
}
//发送信息给服务器获得用户信息
wx.request({
url: app.globalData.userInterfaceUrl + 'login',
dataType: "json",
method: "POST",
data: data,
success: function(res) {
console.log("loadUserInfo（服務器返回） success", res.data);
if (!res.data.error) {
app.globalData.userInfo = res.data.data;
that.setData({
userInfo: app.globalData.userInfo
})
} else {
console.log("服务器获取用戶信息失敗");
//TODO：用户信息获取错误
}
},
fail: function(e) {
console.log("loadUserInfo（服务器返回）error", e);
//TODO:错误
},
complete: function(e) {
//完成
}
})
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
},
// 事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onShow: function() {
var that = this;
console.log("openid:", openid);
that.loadUserInfo();
}
})
达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞