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'

})

}

}

})

},

免费微信登陆界面html模板,微信小程序:使用微信授权登录以及页面模板相关推荐

  1. 微信小程序云开发用户身份登录_微信小程序开发用户授权登录(下)

    如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用.网站应用和公众帐号(包括小程序),用户的 Un ...

  2. 微信网页开发:微信内h5使用wx-open-launch-weapp打开小程序,微信内h5使用wx-open-launch-app打开App的方案

    需求场景: 当我们需要使用在微信客户端打开的h5页面,在页面上打开微信小程序或者唤起App时,我们需要使用微信js-sdk提供的开放标签能力.这其中:使用wx-open-launch-weapp标签打 ...

  3. 微信公众账号后台怎么解除小程序_微信小程序怎么注销账号_微信小程序注销方法_快吧小程序...

    微信小程序一直存在一个问题:开发者不能注销自己的小程序.之前当开发者需要彻底清除小程序信息时,只能够通过暂停服务或关闭"允许被搜索"的方式曲线救国.现在,这个问题终于解决了. 在微 ...

  4. 微信公众账号后台怎么解除小程序_微信小程序解除绑定 微信小程序怎么授权...

    该如何注销小程序? 微信小程序目前无法取消,也是微信小程序最脆弱.最无助的地方.如果你确定你不想要这个小程序,你可以转移和改变主题和其中的所有信息,这样你的小程序就会变成别人的小程序,与你无关.相当于 ...

  5. 微信小程序获取手机号授权登录

    小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无 ...

  6. 2023年微信小程序获取手机号授权登录注册详细教程,包含服务端教程

    前言 小程序中有很多地方都会用到用户的手机号,比如登陆注册,填写收货地址等等.有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 网上大多数教程还是往年的,而微信官方的api已做了修改.本篇文章 ...

  7. 微信公众账号后台怎么解除小程序_微信小程序 后台登录(非微信账号)实例详解...

    微信小程序 后台登录 实现效果图: 最近写了一个工具类的小程序,按需求要求不要微信提供的微信账号登录,需要调取后台登录接口来登录.由于小程序大部分都是调取微信信息登录,很少有调用自己后台来登录的,所以 ...

  8. 微信小程序:用户授权登录

    点击"微信一键登录"按钮,触发login_weixi事件 先查看是否勾选了底部按钮,勾选了就获取用户信息,每次请求成功都会弹出授权窗口,把用户信息缓存到storage里面,方便下次 ...

  9. 微信小程序入门之授权登录

    微信小程序 一.实现微信小程序授权登录 微信小程序每次获得用户的信息时需要授权登录,下面的代码可以实现以下功能 Page({data: {nickName:''},dianji(){console.l ...

  10. 微信小程序判断是否授权登录(未登录出现弹窗跳转登录页面)

    目录 API 代码实现 API 获取用户当前设置 wx.getSetting:微信官方文档 获取用户信息 wx.getUserInfo:微信官方文档 微信小程序弹窗 wx.showToast:微信官方 ...

最新文章

  1. js 时间戳与日期处理集合
  2. 设计师必备网址 百度MUX
  3. 【机器视觉】 dev_set_preferences算子
  4. 深度学习:又一次推动AI梦想(Marr理论、语义鸿沟、视觉神经网络、神经形态学)
  5. 字体--Ubuntu手记之系统配置
  6. 大数据学习笔记52:Flume Interceptors(Flume拦截器)
  7. Python re模块将字符串分割为列表
  8. ARM汇编学习-工具篇
  9. 计算一棵树的深度和宽度[Treeview的深度和宽度](多题头的表格问题解决的基础)...
  10. [BZOJ1602BZOJ1787BZOJ2144]树上LCA的算法巩固练习
  11. photon 服务器操作系统,photon 云服务器
  12. 检测和语义分割_分割和对象检测-第4部分
  13. C语言练习——百钱百鸡
  14. java 斑马 打印 图片_Zebra打印机不会打印ZPL格式
  15. 树莓派做BT下载器:transmission
  16. 机器视觉应该先看什么书?
  17. web前端emoji表情
  18. 中文计算机期刊影响因子排名,最新计算机类中文核心期刊影响因子排名
  19. Oracle中Blob转换成Clob
  20. 传奇开区发布广告和选择广告投放网站的那些事

热门文章

  1. 基于 MATLAB 的图像中汉字识别
  2. excel求回归直线方程的公式_如何用excel做线性回归分析-用excel做线性回归分析求回归方程...
  3. 无人机倾斜摄影测量土方计算
  4. 程序员转岗产品经理有哪些优势和劣势?
  5. struct template 函数 特化
  6. linux mtd手动烧写固件,路由器固件的几种烧写方式
  7. 电脑出现GRUB4DOS 0.4.5c、、、怎么办
  8. Python安装shapely包出现WindowsError: [Error 126]解决方案
  9. Zabbix3.4监控Linux主机CPU温度
  10. html回调函数,JS 回调函数