当前位置: 代码迷 >> 综合 >> Dcloud H5+微信登录功能
  详细解决方案

Dcloud H5+微信登录功能

热度:965   发布时间:2023-11-04 22:22:08.0

首先,需要到微信开放平台创建移动应用,获取appid、appsecret;

其次appid、appsecret值填写在manifest.json中的'SDK配置'中; '模块权限配置'中选择OAuth(登录鉴权); 在登录页,添加如下代码,获取微信用户信息openid和access_token:

html:

         	<div id="wx_login" style="display: none"><div class="other"><div class="xian"></div><div class="say">或用微信登录</div><div class="xian"></div></div><div class="icon"><img src="./images/log_wei.png" id="wx_loginimg" onclick="wx()"></div><p id="info" style="padding: 0 1em;text-align:left;display: none">登录认证通道信息:</p><br/><div id="oauth" style="display: none"></div><br/><div id="output" style="display: none;"></div></div>

js:

if(mui.os.plus){var access_token = '';var openid = '';document.addEventListener('plusready', function() {plus.runtime.getProperty(plus.runtime.appid,function(inf){if(inf.version > 1.0){ //检测版本号if (plus.runtime.isApplicationExist({pname: 'com.tencent.mm', action: 'weixin://'})) { //检测是否有微信客户端document.getElementById('wx_login').style.display = 'block';}}});});var auths={};function wx() {// 获取登录认证通道plus.oauth.getServices(function(services){//                var txt="图标登录认证通道信息:";for(var i in services){var service=services[i];if(service.description == '微信'){auths[service.id]=service;var de = document.getElementById('wx_loginimg');de.setAttribute('onclick','login(this.id)');de.id=service.id;}}//                info.innerText=txt;},function(e){outLine("获取登录认证失败:"+e.message);});}// 登录认证function login(id){outSet("----- 登录认证 -----");var auth=auths[id];if(auth){var w=null;if(plus.os.name=="Android"){w=plus.nativeUI.showWaiting();}document.addEventListener("pause",function(){setTimeout(function(){w&&w.close();w=null;},2000);}, false );auth.login(function(){w&&w.close();w=null;outLine("登录认证成功:");outLine(JSON.stringify(auth.authResult));access_token = auth.authResult.access_token;userinfo(auth);},function(e){w&&w.close();w=null;outLine("登录认证失败:");outLine("["+e.code+"]:"+e.message);mui.toast('登录失败');// plus.nativeUI.alert("详情错误信息请参考授权登录(OAuth)规范文档:http://www.html5plus.org/#specification#/specification/OAuth.html",null,"登录失败["+e.code+"]:"+e.message);});}else{outLine("无效的登录认证通道!");mui.toast('无效的登录认证通道');}}// 获取用户信息function userinfo(a){outLine("----- 获取用户信息 -----");a.getUserInfo(function(){outLine("获取用户信息成功:");outLine(JSON.stringify(a.userInfo));var nickname=a.userInfo.nickname||a.userInfo.name||a.userInfo.miliaoNick;openid = a.userInfo.openid;wx_login(access_token,openid);},function(e){outLine("获取用户信息失败:");outLine("["+e.code+"]:"+e.message);mui.toast('获取用户信息失败!');});}function wx_login(access_token,openid) {//接口名根据具体方法名定mui.ajax(apiname + '/app/app_wx_login', {data:{access_token:access_token,openid:openid},dataType: 'json', //服务器返回json格式数据type: 'post', //HTTP请求类型timeout: 10000, //超时时间设置为10秒;success: function(data) {if(data['token']){localStorage.removeItem('token');localStorage.clear();  //清除localstorage//获取键的值localStorage.setItem("token", data['token']);if(go){window.location.href = go;}else{mui.openWindow({url: 'user.html',id:'user.html'});}}},error: function(xhr, type, errorThrown) {//异常处理;var s = JSON.parse(xhr['response']);mui.toast(s['message']);}});}}