曾经,直播小程序是很鸡肋的存在,由于微信生态系统的限制,微信小程序直播系统不如直播APP系统流畅低延时,甚至不能开播,而随着互联网技术的不断发展,如今的直播小程序已经可以实现开播、打赏、带货等一系列功能,今天就来和大家分享下,带货直播小程序如何接入微信登录功能。
一、带货直播小程序接入微信登录功能的作用
微信登录功能是实现带货直播小程序“带货”功能的基础,直播带货之所以转化率高,正因为其缩短了用户“被种草”到“进入店铺了解产品”再到“冲动消费”之间的距离,在用户最冲动的时候提供消费手段,是平台运营者应该做的,实现微信登录后,用户可不下载APP,直接从微信端登录直播平台,在购物时直接调取微信支付,实现快速购物的用户需求。
二、带货直播小程序如何实现微信登录功能
首先,为使带货直播小程序实现微信登录,我们要先获得微信账号的唯一标识openid,而微信为了数据安全,禁止用户直接访问https://api.weixin.qq.com,因此,我们需要先通过wx.login获取临时凭证code,使用该临时凭证通过访问微信指定的接口便可获取用户的登录信息。
Wx.login({
success:function(res){
var code=res.code;
}
});
这样,便可以拿到临时凭证code,然后,我们使用该code值访问指定接口,便可以获取用户的登录信息。
$AppID=”自己小程序的appid”;
$AppSecret=”自己小程序的secret”;
$url="https://api.weixin.qq.com/sns/jscode2session?appid={$AppID}&secret={$AppSecret}&js_code={$code}&grant_type=authorization_code";
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_URL, $url);
$json = curl_exec($ch);
curl_close($ch);
$arr=json_decode($json,1);
此时$arr会返回unionid和openid,此处我们用到的是unionid.
下面,我们就可以使用 wx.getUserInfo方法获取用户的微信信息,并联合unionid通过请求三方登录接口,将用户信息写入带货直播小程序的数据库了。
下面是云豹科技写的一个demo程序,可以作为参考。
wx_login:function(){
var app=getApp();
var _this=this;
//console.log("canIUse:"+this.data.canIUse);
// 登录
wx.login({
success:function(res){
var code=res.code;
//console.log("code:"+code);
var methodName='Login.getUnionid';
var unionid='';
var data={"code":code};
var wx_userinfo='';
var sign='';
var sign_data='';
var system='';
var source='';
util.requestData(methodName,data,function(code,msg,info){
unionid=info[0].unionid;
//console.log("unionid:"+unionid);
//console.log(info);
app.globalData.openid=info[0].openid;
//将openid存入缓存
wx.setStorageSync('openid',info[0].openid);
});
//获取系统消息
wx.getSystemInfo({
success (res) {
system=res.system;
if(system.indexOf("iOS")!=-1){
source='ios';
}else if(system.indexOf("Android")!=-1){
source='android';
}
}
});
//获取授权的微信用户信息
//https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,带货直播小程序可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
// console.log("获取用户信息:");
// console.log(res);
// console.log(res.userInfo);
wx_userinfo=res.userInfo;
//生成sign
sign_data={"openid":unionid};
sign=util.createSign(sign_data);
//console.log(sign);
_this.setData({
"login_hidden":false
});
//调用三方登录接口
methodName="Login.userLoginByThird";
data={
"openid":unionid,
"type":"wx",
"nicename":wx_userinfo.nickName,
"avatar":encodeURI(wx_userinfo.avatarUrl),
"sign":sign,
"source":source
};
util.requestData(methodName,data,function(code,msg,info){
//console.log(typeof(info));
wx.setStorageSync('userinfo',info[0]);
app.globalData.userinfo=info[0];
//console.log(wx.getStorageSync("userinfo"));
//console.log(app.globalData.userinfo);
setTimeout(function(){
_this.setData({
"login_hidden":true
});
wx.switchTab({
url: '/pages/my/index',
})
},100);
//console.log("微信登陆跳转结束");
});
}
})
}
},
fail:res=>{
//console.log("微信授权失败:"+res);
}
})
}
})
}
util.requestData方法是集成的一个公共方法:
const requestData = function(methodName,data,success_callback,error_callback,complete_callback){
let app=getApp();
var site_url=app.globalData.site_url;
/* console.log(site_url+methodName);
console.log(data); */
wx.request({
url: site_url+methodName,
data:data,
dataType:"json",
method:"get",
async:false,
success:function(res){ //接口调用成功回调
console.log("res:"+res);
var ret=res.data['ret'];
console.log(methodName+" ret:"+ret);
if(ret==200){ //http响应正确
var data=res.data;
//console.log(data);
var code=data.data.code;
var msg=data.data.msg;
var info=data.data.info;
//console.log(code);
if(code!=0){
if(code==700){
wx.navigateTo({
url: '/pages/login/login'
});
return;
}else{
wx.showToast({
title: msg,
icon: 'none',
duration: 2000
});
/* setTimeout(function(){
wx.navigateBack(1);
},1500); */
return;
}
return;
}else{ //请求成功,返回信息
success_callback(code,msg,info);
}
}else{ //http响应失败
wx.showToast({
title: '请求错误',
duration: 2000
});
}
},
fail:function(e){ //接口调用失败回调
wx.hideLoading(); //将loading弹窗隐藏
wx.showToast({
title: '请求错误',
duration: 2000
});
if(error_callback){
error_callback;
}
},
complete:function(){ //接口调用结束回调
wx.hideLoading(); //将loading弹窗隐藏
if(complete_callback){
complete_callback;
}
}
})
}
以上就是关于微信小程序通过微信号登录的相关总结,更多云豹带货直播小程序的相关知识会在日后逐步放出,敬请期待,有关直播小程序、直播APP搭建等问题可联系云豹技术人员获得技术支持。
声明:以上内容为云豹科技 原创,未经公司同意,禁止转载,否则将追究相关法律责任