-
微信小程序可以通过微信官方提供的登录能力,获取用户信息,建立用户体系。
-
本人做的登录测试需要用到以下3个东西:
1.小程序
小程序是用户使用的客户端,由于小程序运行在微信之上,所以小程序可以通过微信官方提供的API获取微信用户的身份信息。
2.开发者服务器
小程序的后端服务器,用于为小程序用户提供服务。
3.微信接口服务
作用是为开发者服务器提供的接口。
下面是我的演示:
打开微信开发者工具,在miniprogram下新建index.js文件,里面的信息如下:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
//处理post请求
app.post('/', (req, res) => {
console.log(req.body);
res.json(req.body);
});
//监听3000端口
app.listen(3000, () => {
console.log(填写自己服务器的地址);
});
里面有关的监听端口和请求本小白还有些不太明白,有待提供,仅供参考。
如果不知道服务器地址console.log(req.body);可以在服务器命令提示符里面输出的。本人用的是node.js
首先cd自己的微信小程序工程,然后要执行nodemon index.js命令。出现如上图所示说明你的服务器启动成功。
然后在主文件里面写wxml,wxss,js,json:
index.wxml:
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="btn">获取头像昵称</button>
<!--使用wx:else来判断应该渲染什么到页面上去-->
<block wx:else>
<!--头像-->
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<!--昵称,userInfo.nickName和userInfo.city都是微信官方提供的API,并不是我们自己写的接口-->
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
<!--所在城市-->
<text class="userinfo-nickname">{{userInfo.city}}</text>
<!--性别-->
<open-data type="userGender" lang="zh_CN"></open-data>
<button class="unlogin" bindtap="exit">退出登录</button>
</block>
</view>
</view>
index.wxss设置样式:
.btn{
border: 2rpx solid#32cd32;
}
.container{
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
.userinfo{
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar{
width: 128rpx;
height: 128rpx;
border-radius: 8%;
}
.userinfo-nickname{
color: #aaa;
}
.unlogin{
background-color: #32cd32;
}
index.js:
Page({
/**
* 页面的初始数据
*/
//首先设置参数userInfo为空,hasUserInfo为false,表示没有登录
data: {
userInfo:{},
hasUserInfo:false
},
onLoad: function () {
},
//getUserInfo函数绑定了按钮
getUserInfo: function (e) {
console.log(e.detail.userInfo)
if(e.detail.userInfo){
this.setData({
userInfo:e.detail.userInfo,
hasUserInfo:true
})
}
},
/**
* 生命周期函数--监听页面显示
*/
//绑定了退出登录按钮,通过清空userInfo并且设置hasUserInfo为false来退出登录
exit: function () {
console.log('exit ok')
this.setData({
userInfo: {},
hasUserInfo: false
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
然后查看效果:
登录前:
登录后:
查看控制台输出信息:
appData登录前:
登录后:
至此就完成了登录流程,有问题相互讨论,本小白水平有限啊啊。