小程序登陆 php版

本文主要是介绍小程序登陆 php版，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

小程序运用到的ui框架是 vant ui，需要用此ui的同学，请先跟着小冰的步骤一步一步来。
1、在小程序的根目录下执行以下三个命令

npm init //初始化，生成package.json文件 
npm install --production 
npm i vant-weapp -S --production //安装vant

2、在开发者工具中，设置一下下（这儿我就直接上图了）

3、点击菜单栏“工具”下的“构建 npm”，并生成了“node_modules”文件夹。
4、在需要使用的页面中，对应的json文件引入（注意，小程序的json组件不能有注释，而且，最后一行不能有逗号，不然会报错【这儿只是做个例子】）

"usingComponents": {
      "van-button": "/miniprogram_npm/vant-weapp/button/index",   //引入button组件
      "van-rate":"/miniprogram_npm/vant-weapp/rate/index"         //引入rate组件
  }

//测试是否引入成功，在wxml里写入以下代码可以测试
<van-button type="default">默认按钮</van-button> 

//注意：关于vant的引入，我也只参考网上的，可能会跟原作者相同，请原谅

===========================================================

下面，小程序的登陆正式开始

<view wx:if="{{isHide}}">
    <view wx:if="{{canIUse}}" >
        <view class='header'>
            <image src='/images/wx_login.png'></image>
        </view>
        <view class='content'>
            <view>申请获取以下权限</view>
            <text>获得你的公开信息(昵称，头像等)</text>
        </view>
        <van-dialog id="van-dialog" /> <!--这儿需要注意写上vant的弹框，注意id的值（最好跟我的这个id值一样，不然 在js里面调用会出问题）-->
        <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
            授权登录
        </button>
        

    </view>
    <view wx:else>请升级微信版本</view>
</view>
  
<view wx:else>
    <view>我的首页内容</view>
</view>

```css
/* 解决弹框按纽不居中的问题 */
.van-button--large{
    width: 100%!important; 
}

.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;
}

import Dialog from '../../miniprogram_npm/vant-weapp/dialog/dialog';   //因为框架是用js调用的，所以这儿需要引入弹框，注意你的文件路径

//miniprogram_npm/vant-weapp/dialog/index

Page({
	data: {
		//判断小程序的API，回调，参数，组件等是否在当前版本可用。
		canIUse: wx.canIUse('button.open-type.getUserInfo'),
		isHide: true,
		show:false
	},

	onLoad: function () {
		
	},

	//发起登陆就是以下四个函数
	//bindGetUserInfo在页面上点击按纽，它会来到一个对话框框，提示是否援权
	bindGetUserInfo: function (e) {
		this.alert(e);
	},

	alert:function(e){
		Dialog.confirm({
			title:'微信授权',
			message:'小冰申请获得以下权限 \n ● 获昨您的公开信息(昵称,头像,地区及性别)',
			messageAlign:'left',
			confirmButtonText:'允许',
			cancelButtonText:'拒绝',
			theme:'round'
		}).then(()=>{
			this.allow(e);
		}).catch(()=>{
			this.refuse();
		});
	},
	
	refuse:function(){//拒绝授权
		wx.showModal({
			title: '警告',
			content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
			showCancel: false,
			confirmText: '返回授权',
			success: function (res) {
				// 用户没有授权成功，不需要改变 isHide 的值
				if (res.confirm) {
					console.log('用户点击了“返回授权”');
				}
			}
		});
	},

	allow:function(e){//允许授权
		var that = this;
		wx.getUserProfile({
			desc:'获取你的昵称、头像、地区及性别',
			success:function(userInfo){
				//console.log(userInfo);
				if(userInfo){
					wx.login({
						success:function(res){
							var code = res['code'];
							//console.log(code);
							wx.request({
								url:'http://www.wechat.bnc:84/index.php/index/index',
								header:{'content-type': 'application/x-www-form-urlencoded'},
								data:{
									code:code,
									encryptedData: userInfo.encryptedData,
									signature: userInfo.signature,
									rawData: userInfo.rawData,
									iv: userInfo.iv,
								},
								success:function(result){
									let data = result['data'];
									let token = data['token'];
									wx.setStorage({
										'key':'token',
										'data':token,
										success:function(t){
											//console.log(t);
										}
									})
								}
							})
						}
					})
				}
			}
		})
	}
})

//这个json 文件主要是用来引入vant组件的，也必须得写入（当然，在项目中，json文件最好不要有注释，不然会报错【我这儿只是做个说明，复制代码的时候请注意下，删除注释却可】）
{
  "usingComponents": {
    "van-button": "/miniprogram_npm/vant-weapp/button/index", //按纽样式
    "van-dialog": "/miniprogram_npm/vant-weapp/dialog/index" //弹框
    
  }
}

最后，别忘了在全局的app.json 中写入你的页面

{
  "pages":[
    "pages/login/login",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

后端我用的是tp6的框架，直接走代码

<?php  
	namespace app\index\controller;
	use \jwt\Jwt;
	use think\facade\Cache;
	use think\facade\View;
	
	class Index{
		public function index(){
			$appid = '*****';
			$AppSecret = '*******';
			$get = input('get.');
			$code = $get['code'];
			$url = 'https://api.weixin.qq.com/sns/jscode2session?appid='. $appid .'&secret='. $AppSecret . '&js_code='. $code .'&grant_type=authorization_code';
			$data = $this->https_request($url);
			$data = json_decode($data,true);
			$data['token'] = getRandStr(32); //我这儿是在common.php 里设置的随机数
			return json($data);
		}

		public function https_request($url,$data = null){
            $curl = curl_init();
            curl_setopt($curl, CURLOPT_URL, $url);
            curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
            curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
            if (!empty($data)){
                curl_setopt($curl, CURLOPT_POST, 1);
                curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
            }
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
            $output = curl_exec($curl);
            curl_close($curl);
            return $output;
        }
?>

这篇关于小程序登陆 php版的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！