18910140161

微信小程序获取用户头像+昵称+openid

顺晟科技

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);

数据库

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航