一门APP开发教程

标题: 微信登录实战教程（前端操作说明） [打印本页]

作者: 毛毛虫 时间: 2019-8-20 10:25
标题: 微信登录实战教程（前端操作说明）
为方便大家能快速方便接入微信登录，近期我们陆续上传一些在实际项目中进行微信二次开发的实战代码。
首先，要进行微信登录开放前，请先确保两项准备工作；
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

penid,nickname:nickname,headimgurl:headimgurl},
success:function(data){
/*这里根据你业务逻辑进行，可以进行跳转等操作*/
}
});
}else{
alert("取消或登录失败");
}
});
});
});
4：到此，微信登录的前端的工作就到此完成了，下一章节，我们将对后台进行说明。

作者: 毛毛虫 时间: 2019-8-20 10:33
少写了一点将整体放入到jsBridge.ready(function () {})内。

欢迎光临一门APP开发教程 (https://bbs.yimenapp.com/)