微信小程序：使用微信授权登录以及页面模板

1.login.html

  

    

      

        

      

      

        申请获取以下权限:

        获得你的公开信息(昵称、头像、地区及性别等)

      

      

        授权登录

      

    

    请升级微信版本

  

2.login.css

.container{

  display: flex;

  justify-content: center;

}

.header {

  margin: 90rpx 0 50rpx;

  border-bottom: 1px solid #ccc;

  text-align: center;

  width: 650rpx;

  height: 300rpx;

  line-height: 450rpx;

}

.header image {

  width: 200rpx;

  height: 200rpx;

}

.content {

  margin-bottom: 90rpx;

}

.content text {

  display: block;

  color: #9d9d9d;

  margin-top: 40rpx;

}

.bottom {

  border-radius: 80rpx;

  margin: 70rpx 50rpx;

  font-size: 30rpx;

  font-weight: 200;

}

3.login.js

const app = getApp();

Page({

  /**

   * 页面的初始数据

   */

  data: {

    //判断小程序的API，回调，参数，组件等是否在当前版本可用。

    canIUse: wx.canIUse('button.open-type.getUserInfo')

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

  },

  bindGetUserInfo: function(e) {

    if (e.detail.errMsg!='getUserInfo:fail auth deny') {

      app.isLogin();

      wx.reLaunch({

        url: '/pages/index/index'

      })

    } else {

      wx.showModal({

        title: '警告',

        content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',

        showCancel: false,

        confirmText: '返回授权',

        success: function(res) {

          // 用户没有授权成功，点击了返回授权

          if (res.confirm) {}

        }

      });

    }

  },

})

4.app.js

onLaunch: function () {

    // 展示本地存储能力

    var logs = wx.getStorageSync('logs') || [];

    logs.unshift(Date.now());

    wx.setStorageSync('logs', logs);

    this.isLogin();

  },

  globalData: {

    userInfo: null

  },

// 微信登陆

  isLogin: function(){

    var that = this;

    // 查看是否授权

    wx.getSetting({

        success: function(res) {

          if (res.authSetting['scope.userInfo']) {

            wx.getUserInfo({

              success: function(res) {

                that.globalData.userInfo = res.userInfo;

                // 根据自己的需求有其他操作再补充

                // 我这里实现的是在用户授权成功后，调用微信的 wx.login 接口，从而获取code

                wx.login({

                  success: res => {

                    // 获取到用户的 code 之后：res.code

                    // console.log("用户的code:" + res.code);

                    // 可以传给后台，再经过解析获取用户的 openid

                    // 或者可以直接使用微信的提供的接口直接获取 openid ，方法如下：

                    // wx.request({

                    //     // 自行补上自己的 APPID 和 SECRET

                    //     url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code',

                    //     success: res => {

                    //         // 获取到用户的 openid

                    //         console.log("用户的openid:" + res.data.openid);

                    //     }

                    // });

                    }

                  });

                }

              });

          } else {

            // 用户没有授权

            wx.navigateTo({

              url: '/pages/login/login'

            })

          }

        }

    })

  },