123资源网

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

广告也精彩

1.login.html

<view class=”container”>

  <view>

    <view wx:if=”{{canIUse}}” >

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

      <view class=’header’>

        <image src=’../../images/timg.jpg’></image>

      </view>

      <view class=’content’>

        <view>申请获取以下权限:</view>

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

      </view>

      <button class=’bottom’ type=’primary’ open-type=”getUserInfo” lang=”zh_CN” bindgetuserinfo=”bindGetUserInfo”>

        授权登录

      </button>

    </view>

    <view wx:else>请升级微信版本</view>

  </view>

</view>

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’

            })

          }

        }

    })

  },

广告也精彩

本文链接:https://www.123wz.cn/post/58476.html

版权声明:
温馨提示:
本站提供的一切软件、教程和内容信息都来自网络收集整理,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,版权争议与本站无关。用户必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

发表评论

您需要 登录账户 后才能发表评论

还没有评论,快来说点什么吧~

联系客服
网站客服业务合作Q交流群
635140321
公众号
公众号
公众号
返回顶部