Dcloud H5+微信登录功能

首先,需要到微信开放平台创建移动应用,获取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']);

                      }
                  });
              }
          }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值