一门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,openidpenid,nickname:nickname,headimgurl:headimgurl},
                                                  success:function(data){
                                                        /*这里根据你业务逻辑进行,可以进行跳转等操作*/                                               
                                                  }
                                        });                                                
                                }else{                                       
                                        alert("取消或登录失败");
                                }
                        });
                });               
        });
4:到此,微信登录的前端的工作就到此完成了,下一章节,我们将对后台进行说明。
作者: 毛毛虫    时间: 2019-8-20 10:33
少写了一点 将整体放入到jsBridge.ready(function () {})内。




欢迎光临 一门APP开发教程 (https://bbs.yimenapp.com/) Powered by Discuz! X3.4