小程序运用到的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;
}
?>