微信登录实战教程(前端操作说明)
为方便大家能快速方便接入微信登录,近期我们陆续上传一些在实际项目中进行微信二次开发的实战代码。首先,要进行微信登录开放前,请先确保两项准备工作;
1:一门开发平台上,微信相关配置正确;
2:微信开放平台配置的正确,主要是对应移动应用配置的包名及签名信息;
具体配置可以查看我们对应教程,在我们官方论坛上微信登录栏目内有较为详细说明。
其次,我们找到我们项目的登录模板页,要找到模板页,这个需要你对项目程序路由有一定了解,每个项目不一样,模板页位置也无法确定,但这个对各位应该是小事。
1:找到模板页以后,我们可以添加或者根据时间情况判断呈现微信登录入口(一般添加一个微信图标的登录按钮,由此来触发调用一门平台的登录接口)。为了方便,我们给此元素加上一个id标识,便于我们找到该元素,比如
<div class="item green btn-sns"id="threewxlogin"><i class="icon icon-wechat1"></i></div> 我里面id="threewxlogin";
2:此时我们需要引用一门平台的二次开发接口包(jsbridge),改JS库,你可以应用我们官方路径的文件,已可以自行下载放到你服务器后进行引用。下载或者引用参考https://www.yimenapp.com/doc/js.cshtml#jsbridge。到此 我们准备工作完成,进行编码部分。
3:我们开始调用登录接口方法,我们官方说明文档里,明确说明了,调用我们接口方法,优先将接口部分放入jsBridge.ready内执行,确保JS初始化完成。
$(function(){
if(/LT-APP/.test(navigator.userAgent)) {
/*这里可以加入多端控制显示效果,比如你在APP内呈现效果和微信端 pc端可能不一样*/
}
$("#threewxlogin").click(function(){/*借助我们前面定义的id来找到元素,给元素加上点击事件*/
jsBridge.wxLogin(function(succ, obj) {
if (succ) {
var jsonObj = obj.userinfo;
var openid = jsonObj.openid;
var unionid = jsonObj.unionid;
var nickname = jsonObj.nickname;
var headimgurl = jsonObj.headimgurl;
/*除以上信息外,你可以根据实际情况,加入省、市等地区信息,性别等微信返回的信息*/
$.ajax({
url:xxxx,/*这里是提交的后台路径*/
type:"post",
data:{lgtype:'wxlogin',unionid:unionid,openid:openid,nickname:nickname,headimgurl:headimgurl},
success:function(data){
/*这里根据你业务逻辑进行,可以进行跳转等操作*/
}
});
}else{
alert("取消或登录失败");
}
});
});
});
4:到此,微信登录的前端的工作就到此完成了,下一章节,我们将对后台进行说明。 少写了一点 将整体放入到jsBridge.ready(function () {})内。
页:
[1]