顺晟科技
2021-06-16 10:51:10
407
做一款小程序,如果需要判断用户,当然要获取一些基本信息,例如头像,昵称openid。所以本次案例就直接上代码了。
小程序前端
index.wxml
!- index.wxml -
view class='container '
view class='userinfo '
按钮wx:if='{{!hasUserInfo可以使用}} '打开-类型=' GetUserInfo ' BindGetUserInfo=' GetUserInfo '获取头像昵称/按钮
阻止wx:else
图像绑定tap=' BindViewtap ' class=' user info-avatar ' src=' { { UserInfo } .AvatarURL } } '模式='封面'/图片
text class='用户信息-昵称{{userInfo.nickName}}/text
/block
/view
视图类='用户座右铭'
text class=' user-座右铭' {座右铭}}/text
/view
/view
index.js
//index.js
//获取应用实例
const app=getApp()
页面({
数据: {
motto: 'Hello World ',
userInfo: {},
hasUserInfo: false,
canuses : wx。可以使用('按钮。开放式。GetUserInfo ')
},
在线加载:函数(){
if (app.globalData.userInfo) {
this.setData({
userinfo :应用程序。全球数据。userinfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
//由于户信息是网络请求,可能会在Page.onLoad之后才返回
//所以此处加入回收以防止这种情况
app。UserInforeadyCallback=RES={
this.setData({
用户信息: res。用户信息,
hasUserInfo: true
})
}
} else {
//在没有open-type=getUserInfo版本的兼容处理
wx.getUserInfo({
成功: res={
app。GlobalData。用户信息=RES .用户信息
this.setData({
用户信息: res。用户信息,
hasUserInfo: true
})
}
})
}
},
getUserInfo:函数(e) {
console.log(e)
app。GlobalData。UserInfo=e . detail。用户信息
//获取信息
wx.login({
成功:功能(res) {
console.log(res.code)
//发送请求获取信息
wx.request({
url: '你的域名/openid.php?code=code ',//接口地址
data: { code: res.code },
header: {
内容类型' : '应用程序/json' //默认值
},
成功:功能(res) {
//返回信息
console.log(res.data.openid)
//向数据库注册用户,验证用户
那=这个
wx.request({
url: '你的域名/server.php?昵称=' e.detail.userInfo。昵称AvatarURL=' e . detail。UserInfo。AvatarURL ' open id=' RES . data。打开id,
数据: {
},
header: {
内容类型' : '应用程序/json '
},
成功:功能(res) {
//打印用户信息
console.log(res.data)
}
})
}
})
}
})
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true,
})
}
})
index.wxss
/**index.wxss**/。userinfo {
显示: flex
弯曲方向:柱;
对齐-项目:居中;
}。userinfo-avatar {
宽度: 128rpx
高度: 128rpx
margin: 20rpx
边界半径: 50%;
}。用户信息-昵称{
颜色: # aaa
}。用户座右铭{
页边距-顶部: 200像素;
}
后端
openid.php
这是通过密码获取信息的后端
?服务器端编程语言(专业超文本预处理器的缩写)
//声明代码,获取小程序传过来的密码
$ code=$ _ GET[' code '];
//配置应用编号
$appid='你的小程序APPID ';
//配置appscret
$secret='你的小程序APPSRCRET ';
//api接口
$ API='https://api.weixin.qq.com/sns/jscode2session?appid={ $ appid } secret={ $ secret } js _ code={ $ code } grant _ type=authorization _ code ';
//获取得到请求
函数httpGet($url){
$ curl=curl _ init();
curl_setopt($curl,CURLOPT_RETURNTRANSFER,true);
curl_setopt($curl,CURLOPT_TIMEOUT,500);
curl_setopt($curl,CURLOPT_SSL_VERIFYPEER,true);
curl_setopt($curl,CURLOPT_SSL_VERIFYHOST,true);
curl_setopt($curl,CURLOPT_URL,$ URL);
$ RES=curl _ exec($ curl);
curl _ close($ curl);
返回$ res
}
//发送
$ str=HttpGet($ API);
echo $ str
?
server.php
这是把用户名、头像、openid存到数据库的后端
?服务器端编程语言(专业超文本预处理器的缩写)
标题('内容类型:文本/html;charset=utf8 ');
$ nickname=$ _ GET[' nickname '];
$ AvatarURL=$ _ GET[' AvatarURL '];
$ open id=$ _ GET[' open id '];
$con=mysql_connect('数据库地址','数据库账号','数据库密码');
mysql_select_db('数据库名,$ con);
mysql_query('INSERT INTO表名(昵称,avatarUrl,open id)VALUES($昵称,' $avatarUrl ',' $ open id ')');
"回声"注册成功!
MySQL _ close($ con);
?
数据库
11
2022-12
17
2022-03
18
2021-11
16
2021-06
19
2021-06
16
2021-06