微信小程序+PHP 实现授权登录

微信小程序+PHP 实现授权登录1.写wxml页面<!–前台页面,通过判断决定展示登录还是信息–><viewwx:if="{{isHide}}"><viewwx:if=

大家好,又见面了,我是你们的朋友全栈君。

1.写wxml页面

<!--前台页面,通过判断决定展示登录还是信息-->
<view wx:if="{{isHide}}">
    <view wx:if="{{canIUse}}" >
        <view class='header'>
            <image src='/image/hhh.jpg'></image>
        </view>
 
        <view class='content'>
            <view>申请获取以下权限</view>
            <text>获得你的公开信息(昵称,头像等)</text>
        </view>
 
        <button class='bottom' type='primary' open-type="getUserInfo" bindtap="login">
            授权登录
        </button>
    </view>
    <view wx:else>请升级微信版本</view>
</view>
 
<view wx:else>
    <view>我的首页内容</view>
</view>

2.写wxss页面

.header {
    margin: 90rpx 0 90rpx 50rpx;
    border-bottom: 1px solid #ccc;
    text-align: center;
    width: 650rpx;
    height: 300rpx;
    line-height: 450rpx;
}
 
.header image {
    width: 200rpx;
    height: 200rpx;
}
 
.content {
    margin-left: 50rpx;
    margin-bottom: 90rpx;
}
 
.content text {
    display: block;
    color: #9d9d9d;
    margin-top: 40rpx;
}
 
.bottom {
    border-radius: 80rpx;
    margin: 70rpx 50rpx;
    font-size: 35rpx;
}

3.写js页面

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    // 前台判断用的就是这个
    isHide: true
  },

  //点击事件
  login(){
    var _this=this;
    wx.getUserProfile({
      desc: 'desc',
      success: (res)=>{
        //点击允许后获取微信昵称与微信头像
        var nickName=res.userInfo.nickName;
        var log=res.userInfo.avatarUrl;
        wx.login({
          success:function(e){
            //请求成功后获取你的code值
            var code=e.code;
            wx.request({
              //请求后台
              url: 'http://www.day12.com/home/Login/loginInfo',
              //传code、nickName、log
              data: {code:code,nickName:nickName,log:log},
              header:{
                'content-type':'application/x-www-form-urlencoded'
              },
              success: function(arr){
                //判断后台请求成功后
                if(arr.data.code==200){
                  //将返回的ID值存入缓存中
                  wx.setStorageSync('id', arr.data.id)
                  //弹框提示
                  wx.showToast({
                    title: arr.data.msg,
                    icon: 'success'
                  })
                  //修改isHide值,以便于前台的判断展示
                  _this.setData({
                    isHide:false
                  })
                }
              }
            })
          }
        })
      },
      fail:(res)=>{
        //点击拒绝后弹框提示
        wx.showToast({
          title: '授权登录失败',
          icon: 'error'
        })
      }
    })
  }
})

4.写PHP后台代码

public function loginInfo(){
//        接收前台传来的值
        $code=input('code');
        $nickName=input('nickName');
        $log=input('log');
//        判断是否为空
        if (empty($code)||empty($nickName)||empty($log)){
            return json(['code'=>1,'data'=>'','mag'=>'参数不正确']);
        }

//        在config中封装的,封装样式如下(这个码用你自己的微信扫描后会出现) 网址:https://mp.weixin.qq.com/
//        return [
//            'appID'=>'',
//            'AppSecret'=>''
//        ];
        $appID=config('appID');
        $appSecret=config('AppSecret');

//        请求地址
        $url="https://api.weixin.qq.com/sns/jscode2session?appid=".$appID."&secret=".$appSecret."&js_code=".$code."&grant_type=authorization_code";
//        getUrl是在common中封装的,封装样式如下
//        function getUrl($url){
//            $ch = curl_init();
//            curl_setopt($ch, CURLOPT_URL, $url);
//            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
//            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
//            curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
//            $output = curl_exec($ch);
//            curl_close($ch);
//            $output = json_decode($output,true);
//            return $output;
//        }
        $res=getUrl($url);

//        调用成功后定义一个新的数组,最主要的session_key和openid两个值
        $arr=[
          'nickName'=>$nickName,
          'log'=>$log,
          'session_key'=>$res['session_key'],
          'openid'=>$res['openid'],
          'code'=>$code
        ];

//        new一个模型
        $model=new User();
//        根据openid查询一条数据
        $item=$model->where('openid',$res['openid'])->find();
//        如果有就修改session_key这个字段,如果没有就新添加一条数据
        if ($item){
            $data=$model->where('openid',$res['openid'])->update(['session_key'=>$res['session_key']]);
        }else{
            $data=$model->insert($arr);
        }
//        返回主键ID
        return json(['code'=>200,'id'=>$item['id'],'msg'=>'登录成功']);
    }

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/155584.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • hashmap的数据结构以及put和get

    hashmap的数据结构以及put和get一,hashmap数据结构。数据结构中有数组和链表来实现对数据的存储,但是这两种方式的优点和缺点都很明显:1,数组存储,它的存储区间是连续的,比较占内存,故空间复杂度高。但是利用二分法进行查找的话,效率高,时间复杂度为O(1)。其特点就是:存储区间连续,查找速度快,但是占内存严重,插入和删除就慢。2,链表查询,它的存储区间离散,占内存比较宽松,故空间复杂度低,但时间复杂度高,为O(n)。其特

    2022年5月19日
    39
  • logcat — 基本用法

    logcat — 基本用法1.Log类是一个日志类,我们可以在代码中使用logcat打印出消息常见的日志记录方法有:v(String,String)–verbose显示全部信息d(String,String)–

    2022年7月4日
    27
  • leetcode, LC5: insertion-sort-list[通俗易懂]

    leetcode, LC5: insertion-sort-list[通俗易懂]题目描述使用插入排序对链表进行排序。Sortalinkedlistusinginsertionsort.示例1输入{3,2,4}输出{2,3,4}解题思路new一个新的ListNode作为选择排序好的链表的表头对于原始链表中的每一个结点2.1.寻找新链表中该结点的插入位置2.2插入该结点返回新链表代码实现/***structListNode{* intval;* structListNode*next;

    2022年7月24日
    7
  • Android入门基础教程(小白速成1)

    Android入门基础教程(小白速成1)Android入门基础教程(小白速成1)编译工具:AndroidStudio各种工具其实大同小异开发环境的搭建还有项目新建这里就不过多说明了,网上有很多教程。项目新建按照需求来就好,我这里选用空的界面(EmptyActivity)和Android4.0.3,大家一定要注意安卓版本匹配问题鸭,之前每次新建项目都报错,最后才发现是版本匹配问题。话不多说,进入正题吧!HelloWorld!新建好项目以后,我们首先认识几个主要用到的界面。MainActivity.java页面,这个页面相当

    2022年5月4日
    80
  • c语言scanf函数用法详解_c语言输入scanf格式

    c语言scanf函数用法详解_c语言输入scanf格式本节介绍输入函数scanf的用法。scanf和printf一样,非常重要,而且用得非常多,所以一定要掌握。概述scanf的功能用一句话来概括就是“通过键盘给程序中的变量赋值”。该函数的原型为:#include<stdio.h>intscanf(constchar*format,…);它有两种用法,或者说有两种格式。1)scanf(“输…

    2025年7月27日
    10
  • Scala 中 fastjson Object转JsonObject

    Scala 中 fastjson Object转JsonObjectScala中,fastjson的Object转JsonObject相比于Java有些差别,不支持像Java一样强转。//java中Object转JsonObjectJSONObjectjsonObject=(JSONObject)JSON.toJSON(eventBean);导包<!–阿里巴巴开源json解析框架–><dep…

    2022年5月3日
    427

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号