微信小程序 如何实现登录

这篇具有很好参考价值的文章主要介绍了微信小程序 如何实现登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

业务流程:

1:首先需要一个按钮触发事件

2:调用微信小程序的登录接口wx.login,拿到code

3:调用微信小程序的获取用户信息的接口wx.getUserProfile,拿到用户的个人信息

4:拿到的个人信息调用后台的接口,把个人信息传给后台,登录成功并把相关信息存储在本地的缓存中,方便之后的开发使用

下面开始用代码介绍

wxml:

<view>
    <button bindtap="login">登录</button>
</view>

js:

1:data初始数据

//后台接口需要的一下参数(具体要和后台的同事商量)    
loginInfo: {
      code: '',
      spread_spid: 0,
      spread_code: 0
}

2:按钮触发的login点击事件, 

        调用微信小程序的登录接口:wx.login(Object object) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

        调用微信获取用户个人信息的接口:wx.getUserProfile(Object object) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html 

//登录按钮触发的事件
login(){
  let that = this
    //调用微信小程序的登录接口
   wx.login({
      success(e) {
        that.data.loginInfo.code = e.code //拿到的code存储在data中
        wx.showModal({
          title: '温馨提示',
          content: '微信授权登录后才能正常使用小程序功能',
          cancelText: '拒绝',
          confirmText: '同意',
          success( sucessInfo ) {
            //调用微信小程序的获取用户信息的接口
            wx.getUserProfile({
              desc: '用于完善会员资料', // 声明获取用户个人信息后的用途
              lang: 'zh_CN',
              success(info) {
                //把获取到的信息复制到data中的loginInfo中
                that.data.loginInfo = Object.assign( that.data.loginInfo, info )
                //调用后台的接口,把所有整合的个人信息传过去
                that.handlerLogin( that.data.loginInfo )
              },
              fail(e) {
                console.log('获取用户信息失败', e)
                
              }
            })
          },
          fail() {
            console.log("拒绝")
          },
          complete() {}
        })

      },
      fail(e) {
        console.log('fail', e)
        wx.showToast({
          title: '网络异常',
          duration: 2000
        })
        return
      }
    })

}

3:调用后台的登录接口,

        wx.setStorageSync() :将数据存储在本地缓存中,wx.setStorageSync(string key, any data) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

        wx.getStorageSync('token') :获取本地缓存的数据

any wx.getStorageSync(string key) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.getStorageSync.html

//调用后台的登录接口
  handlerLogin( loginInfo ) {
    let that = this
    //login是后台接口封装的方法
    login( loginInfo ).then(( res ) => {
      console.log('登录成功', res)
      let { cache_key, expires_time, token, userInfo } = res.data
       //把用户信息存储到storage中,方便其它地方使用
      wx.setStorageSync('cache_key', cache_key)
      wx.setStorageSync('expires_time', expires_time)
      wx.setStorageSync('token', token)
      wx.setStorageSync('isLog', true)
      wx.setStorageSync('userInfo', JSON.stringify( userInfo ))
      wx.setStorageSync('loginRecord', new Date().getTime())
    })
    .catch(( res ) => {
      console.log('catch', res)
    })
    .finally(() => {
      console.log('finally')
    })
  }

以上就是微信小程序开发时,实现的登录。一共4步走,希望能帮助得到大家。 文章来源地址https://www.toymoban.com/news/detail-488450.html

到了这里,关于微信小程序 如何实现登录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Dynamics 365应用程序开发 - 6. 使用Microsoft Flow自动化业务流程

    在上一章中,我们了解了如何使用Microsoft PowerApps轻松创建自定义商业应用程序。在本章中,我们将了解Microsoft Flow,它可以定义为一种基于云的服务,使用户能够构建跨多个应用程序和服务自动化不同任务和流程的工作流。 在本章中,我们将介绍以下几点: 什么是Microsoft

    2024年02月09日
    浏览(38)
  • 秒杀系统的业务流程以及优化方案(实现异步秒杀)

    先看基本的业务流程  那么我们可以看到整个流程都是一个线程来完成的,这样的话耗时还是很长的,那么可不可以采用多线程去实现呢? 首先我们要思考怎么对业务进行拆分,可以想象一个我们去饭店点餐,会有前台接待,询问订单,之后将小票传给后厨去做饭,这样就会

    2024年02月11日
    浏览(42)
  • 尚上优选社区团购业务流程及微服务技术实现

    尚上优选是一家社区电商项目,采用“当日下单+次日送达+门店自提”的模式,围绕社区居民日常生活所需,满足不同用户的差异化需求,通过完善的 仓储配送体系,以便捷的方式和舒心的服务提升了每一个普通家庭的消费体验。 掌握社区团购业务流程及实现方式 掌握Spri

    2024年02月10日
    浏览(50)
  • 生成式AI对业务流程有哪些影响?企业如何应用生成式AI?一文看懂

    集成与融合类ChatGPT工具与技术,以生成式AI变革业务流程 ChatGPT背后的生成式AI,聊聊生成式AI如何改变业务流程 ChatGPT月活用户过亿,生成式AI对组织的业务流程有哪些影响? 生成式AI对业务流程有哪些影响?企业如何应用生成式AI?一文看懂 业务流程将因生成式AI变革,ChatGPT引领

    2024年02月09日
    浏览(48)
  • 【vue2】使用vue常见的业务流程与实现思路

     🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘 本文核心 :vue的业务处理思路。前台数据渲染与后台的增删改查操作 【前言】 当大家会点开这一篇文章,大家可能会对vue全家桶与vue基础知识有了一个整体的认识。比如我要实

    2024年02月03日
    浏览(46)
  • 【微信小程序】实现微信小程序登录(附源码)

    通过 点击登录按钮 , 调用微信接口 wx.getUserProfile拿到微信的个人信息,先 检查是否之前已经登录 ,若没登录则将拿到的个人信息调用后台的接口,把个人信息传给后台, 登录成功之后 把相关信息存储在app.globalData中共享给全局使用 (这里使用微信云开发作为后台,提前建

    2024年02月11日
    浏览(49)
  • node微信小程序登录实现登录

    node微信小程序登录实现登录 好久不见兄弟们这段时间比较忙 需要使用到的模块 废话少说直接上可cv(bai piao)代码 下面展示我的完整代码

    2024年02月09日
    浏览(46)
  • 微信小程序实现简单登录界面和登录功能

    客户端开发和学习过程中,登录功能是一个很常见的场景。本文将介绍,微信小程序开发过程中是如何实现登录界面和登录功能的。 话不多说,直接上代码。 (1)index.js文件,代码如下: (2)index.wxml文件,代码如下: (3)index.wxss文件,代码如下: 运行结果如下: 本文介绍了微信

    2024年02月12日
    浏览(90)
  • 【微信小程序】如何获取用户手机号授权登录

    目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体),也就是说只针对企业认证小程序开放。若用户举报较多或被发现在不必要场景下使用,微信有权永久回收该小程序的该接口权限。 在使用该接口时,用户可使用微信绑定手机号进行授权,也添加

    2024年02月16日
    浏览(70)
  • 【微信小程序】实现微信小程序登录(附源码)后端,微信小程序获取手机号

    登录简介 第一步:获取token 第二步:通过token拿用户信息 第三步:调用接口获取手机号 HttpClientUtil: WeChatUtil: controller层: service层: serviceImpl层: 登录简介        新版本微信小程序登录 是前端获取用户信息,不再是后端获取信息进行保存。所以后端要做的主要流程就是

    2024年04月23日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包