美文网首页
小程序(五)小程序登录、注册

小程序(五)小程序登录、注册

作者: camellias__ | 来源:发表于2020-08-08 09:11 被阅读0次

小程序理论上和VUE是差不多的,我在做VUE的登录注册的时候,用户信息使用服务器端的session存了一份,还使用前端的缓存存了一份。小程序这边我可能不需要这么麻烦,只用小程序的缓存将用户信息存一份大概就可以了。

我这里大概是这样实现。

首先,在你创建小程序的时候,示例就会告诉你小程序的登录是在app.js的onlaunch中实现的,在小程序的生命周期中,我们了解onlaunch全局只调用一次。

因此,小程序的登录也是在小程序生成结束之后,只调用一次,而且这个玩意,他是在后台进行的,不会弹窗。这就很完美了。

我这里大概是这么实现的

首先放一张官方的图:

1.jpg

其实大概流程就是:

1:小程序前端通过调用wx.login方法获取code

2:将code传回服务器

3:服务器端通过小程序appid,appsecert,以及刚刚获取的code,请求微信服务接口,获取当前用户唯一信息(openid,sessionkey):

4:如果数据库中有匹配当前openid的信息,执行登录操作(将数据库中的信息返回小程序前端)如果数据库中没有匹配当前openid的信息,执行注册操作(将刚才返回的信息写入数据库)

5:将后端返回的信息存储至小程序缓存storage中。

登录的基本流程应该就是这样。当然,这其中可能还有你自己特定的业务流程。这里不做体现。

下边我这里大概放一下我的代码:

App.js中的代码:

/**
   * @name 小程序初始化时触发,全局只触发一次
   */
  onLaunch: function () {
    // 登录
    wx.login({
      success (res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            // 请求连接
            url: 'https://guanchao.site/ ',
            // 请求所需要的的参数
            data: {
              code: res.code
            },
            // 请求成功之后,将信息存储至storage 中
            success(data){
              // 将返回信息存储至storage中
              wx.setStorage({
                key:"userinfo",
                data:data
              });
              // 从storage中获取用户信息
              /*wx.getStorage({
                key: 'userinfo',
                success (res) {
                  console.log(res.data)
                }
              })//*/
            }
          });
        } else {
          console.log('登录失败!' + res.errMsg)
        }//*/
      }
    });
  
  },

服务器端PHP代码:

/**
   * @name 小程序初始化时触发,全局只触发一次
   */
  onLaunch: function () {
    // 登录
    wx.login({
      success (res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            // 请求连接
            url: 'https://guanchao.site/ ',
            // 请求所需要的的参数
            data: {
              code: res.code
            },
            // 请求成功之后,将信息存储至storage 中
            success(data){
              // 将返回信息存储至storage中
              wx.setStorage({
                key:"userinfo",
                data:data
              });
              // 从storage中获取用户信息
              /*wx.getStorage({
                key: 'userinfo',
                success (res) {
                  console.log(res.data)
                }
              })//*/
            }
          });
        } else {
          console.log('登录失败!' + res.errMsg)
        }//*/
      }
    });
  
  },

注意,以上的代码只是完成了登录,而并没有获取用户信息(我这里的用户信息包括头像,昵称等)也没有获取当前用户注册微信所用的电话号。这个以后会有说明

我这里的登录和注册只是将获取到的用户的唯一标识openid以及session_key写入到了数据库中。

大概就是这样

有好的建议,请在下方输入你的评论。

原文链接:https://guanchao.site/index/article/articledetail.html?artid=NoNDVRL1X

相关文章

  • 小程序(五)小程序登录、注册

    小程序理论上和VUE是差不多的,我在做VUE的登录注册的时候,用户信息使用服务器端的session存了一份,还使用...

  • 【设计规划】如何从0到1设计你的爆款小程序?

    方法一,在微信公众平台申请。 方法二,登录公众号在后台快速注册并认证小程序。注册完之后,登录小程序并设置小程序密钥...

  • 智汇驾考小程序部署文档说明

    小程序配置 注册小程序账号 首先在微信公众平台注册一个账号,选择小程序,注册完之后就可以登录公众平台管理小程序了,...

  • 智汇答题小程序部署文档说明

    小程序配置 注册小程序账号 首先在微信公众平台注册一个账号,选择小程序,注册完之后就可以登录公众平台管理小程序了,...

  • 微信小程序讲解

    一、本期要点: 要点1:学会注册小程序帐号 注册完登录小程序后台:开发-开发者设置--AppID(小程序ID) w...

  • 微信小程序项目创建

    登录微信公众平台,点击小程序,可以注册个人,点击前往注册完成注册。注册成功后可以到达微信小程序管理界面, 目录结构...

  • 2、微信小程序开发流程

    1、在公众号内新建小程序,先登录微信公众平台 2、快速注册并认证小程序 3、创建完成后重新登陆刚注册完成的小程序(...

  • TODO:小程序开发环境搭建

    TODO:小程序开发环境搭建 1.第一步当然是要先注册小程序了 2.登录到小程序 a)完善小程序信息,如名称,图标...

  • 从零开始写一个简单的小程序

    小程序注册 小程序注册小程序相关注册信息可以在这里找到,我注册的也是个人小程序。 每日任务小程序 index页面是...

  • 小程序帐号注册与申请

    注册小程序帐号 小程序帐号和微信帐号并不是同一个帐号体系,但小程序可以指定微信号作为我们的管理员,小程序的登录授权...

网友评论

      本文标题:小程序(五)小程序登录、注册

      本文链接:https://www.haomeiwen.com/subject/ecbfdktx.html