登录页面展示
登录成功页面
未登录页面
通过点击登录按钮进行微信登陆
前端页面
我用了微信小程序的UI组件 iviewweapp 和ColourUI 的css库,需要提前去官网下载并按照指引下载到项目中,不会来call我,我一一指导~~
- wxml
<view id="container">
<view wx:if="{{condition}}" class="containertext">
<text class="text">还未登录哦</text>
<text class="textlight">登陆后可享受更多信息~</text>
<view id="button">
<button type="small" class="bg-gradual-blue" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGetUserInfo">一键登录</button>
</view>
</view>
<view wx:if="{{!condition}}" class="containertext">
<text class="text" style="">确实是我本人了</text>
<view class="nameavatar">
<text class="textmy basis-lg">{{userInfo.nickName}}</text>
<view class="cu-avatar xl round basis-xs" style="background-image:url({{userInfo.avatarUrl}});margin-right:50rpx;margin-left:50rpx;"></view>
</view>
<view id="jiaonang">
<view class="cu-capsule round jiaonangmar" >
<view class="cu-tag bg-gradual-blue ">
用户编号
</view>
<view class="cu-tag line-blue">
{{userId}}
</view>
</view>
<view class="cu-capsule round jiaonangmar">
<view class="cu-tag bg-gradual-pink ">
点歌数量
</view>
<view class="cu-tag line-cyan">
{{number}}
</view>
</view>
</view>
<i-cell title="表单列表" label="点的歌全在这里哦" is-link="true" url="/pages/songslist/songslist" link-type="navigateTo" value="详细信息" i-class="maringtop60">
<i-icon type="createtask_fill" size="30" slot="icon" />
</i-cell>
<i-cell title="个人信息" label="您的信息" is-link value="详细信息" i-class="maringtop30" >
<i-icon type="mine_fill" size="30" slot="icon" />
</i-cell>
<i-cell title="个人设置" label="设置" is-link value="详细信息" i-class="maringtop30" >
<i-icon type="setup_fill" size="30" slot="icon" />
</i-cell>
</view>
</view>
- wxjs
// pages/test/test.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
condition:true,//true为未登录,false为已登录
userInfo: [],
list: [],
number:0,
userId:null
},
userAuthorized() {
const that=this
wx.getSetting({
success: data => {
if (data.authSetting['scope.userInfo']) {
that.getNmubers()
wx.getUserInfo({
success: data => {
this.setData({
condition: false,
userInfo: data.userInfo
})
}
})
} else {
this.setData({
condition: true
})
}
}
})
},
onGetUserInfo(event) {
const that=this;
console.log(event)
const userInfo = event.detail.userInfo
if (userInfo) {
wx.login({
success: function (login_res) {
wx.getUserInfo({
success: function (res) {
wx.request({
url: 'http://127.0.0.1:8092//api/v1.0/songlists/user/wxLogin',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
code: login_res.code,
userHead: userInfo.avatarUrl,
userName: userInfo.nickName,
},
success: function (res) {
console.log(res.data)
var userdata=res.data;
// // 将返回的数据保存到全局的缓冲中，方便其他页面使用
wx.setStorage({ key: 'userInfo', data: userdata })
wx.setStorage({
key: 'openid',
data: res.data.data.openid
}),
wx.setStorage({
key: 'userId',
data: res.data.data.userId
})
app.globalData.openid = res.data.data.openid
app.globalData.userId = res.data.data.userId
that.setData({
userId:res.data.data.userId,
number:res.data.data.numberOfSongs
})
}
})
}
})
}
})
this.setData({
condition: false,
userInfo: userInfo,
})
}else{
wx.showModal({
title: '警告',
content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
confirmText: '返回授权',
success: function (res) {
// 用户没有授权成功，不需要改变 isHide 的值
if (res.confirm) {
console.log('用户点击了“返回授权”');
}
}
});
}
},
getNmubers: function(){
const that=this
const userId=null;
var userid=this.data.userId
console.log("我进来了getNmubers")
wx.request({
url: 'http://127.0.0.1:8092//api/v1.0/songlists/user/number',
method: 'GET',
data:{
userId:userid
},
success:function(res){
console.log(res)
that.setData({
number:res.data.data
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that=this
this.userAuthorized()
// var userid=wx.getStorage({
// key: 'userId',
// success: function(res) {
// console.log(res)
// that.setData({
// userId:res.data
// })
// },
// fail: function(res) {},
// complete: function(res) {},
// })
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that=this
var userid = wx.getStorage({
key: 'userId',
success: function (res) {
console.log(res)
that.setData({
userId: res.data
})
that.getNmubers();
},
fail: function (res) { },
complete: function (res) { },
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
- .json
{
"usingComponents": {
"i-button": "../../dist/button/index",
"i-cell-group": "../../dist/cell-group/index",
"i-cell": "../../dist/cell/index",
"i-icon": "../../dist/icon/index"
}
}
- .wxss
/* pages/test/test.wxss */
#container{
margin: 0rpx,10rpx,0rpx,10rpx;
}
.text{
font-weight:700;
font-size:1.5rem;
margin-top: 100rpx;
margin-left: 50rpx;
}
.containertext{
display: flex;
flex-direction:column;
}
.textlight{
font-size:1rem;
margin-left: 50rpx;
margin-top: 20rpx;
}
#button{
margin-top: 80%;
margin-left: 65%;
margin-right: 5%;
}
.textmy{
font-weight:300;
font-size:1.25rem;
}
.nameavatar{
margin-left: 50rpx;
margin-top: 15rpx;
display: flex;
flex-direction: row;
}
.maringtop60{
margin-top: 60rpx;
}
.maringtop30{
margin-top: 30rpx;
}
#jiaonang{
display: flex;
flex-direction: column;
padding-left: 50rpx;
}
.jiaonangmar{
margin-left: 10rpx;
margin-top: 30rpx;
margin-bottom: 20rpx;
}
