微信小程序学习笔记1 ——关于微信小程序云开发登录注册功能

news/2024/7/20 2:05:33 标签: 小程序

本科课程作业写了个基础的小程序在这里记录分享一下,如有错误欢迎指出。

注册功能的实现

注册功能,本质上是向数据库里添加一条用户的信息,我的思路是首先判断该用户有没有注册过账号,若有则跳转登录,若无则直接注册。

根据云开发自带的login云函数获取到用户的openid,然后根据此openid在用户集合中查询,为空跳转注册,不为空则跳转提示“已经注册请直接登录”

js代码

  1. 现在登录的js文件开头申明:
 const app = getApp()
const db = wx.cloud.database({   //引用云数据库
  env: '云开发环境名'			//云开发环境ID
});
const 自己起的名userListDB = db.collection('集合名');
  1. 在登录的js文件中onload方法调用云函数login获取用户openid:
var that = this
    //  调用login云函数获取openid
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[云函数] [login] user openid: ', res.result.openid)
        that.setData({
          openid: res.result.openid
        })
        app.globalData.openid = res.result.openid
      }
  1. 之后在集合中利用openid查询:
  register() { 
let that = this; //查询用户是否已经注册
   	 userListDB.where({
      		_openid: app.globalData.openid // 填入当前用户 openid
    	}).get({
      	success: function (res) {
        		console.log('all',res.data)  //输出查询到的所有
      	}
    })
  },
  1. 在其中加入判断用户是否注册过,如果查出来的结果长度>0则出现提示,否则运行saveuserinfo()函数:`
 //注册
  register() {
    let that = this;
    //查询用户是否已经注册
    userListDB.where({
      _openid: app.globalData.openid // 填入当前用户 openid
    }).get({
      success: function (res) {
        let userInfos = res.data;
        console.log('all',res.data)
        if (userInfos && userInfos.length > 0) {
          let user = userInfos[0];
          if (user && user.name) {
            wx.showModal({
              title: '提示',
              content: '您已注册,请直接登录',
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定')
                  wx.navigateTo({//跳转登录界面
                    url: '/pages/login/login',//这里的URL是你登录完成后跳转的界面
                  })
                }
              }
            })
          }
        } else {
          that.saveuserinfo();
        }
      }
    })
  },`
  1. 向数据库里添加,获取wxml页面中用户填入的数据存入云数据库,成功后跳转登录:
saveuserinfo() {
    let that = this;
    userListDB.add({
      data: {
        name: name,
        password: password,
        phone: phone,
        userimg: '/images/logo.png' //默认头像
      }
    }).then(res => {
      wx.showModal({
        title: '成功',
        content: '您已注册成功',
        showCancel: false
      })
      wx.navigateTo({//跳转登录界面
        url: '/pages/login/login',//这里的URL是你登录完成后跳转的界面
      })
    })
  },
  1. 获取wxml页面用户填入数据:
    这是获取用户名的,获取其他的根据wxml页面改一下函数名即可
bindKeyInputName: function (e) {
this.setData({
name: e.detail.value
})
},

wxml代码

  1. 让用户输入用户名、手机号、密码
<view class="con">
  <view class="kong"></view>
  <form>
    <view class="cu-form-group">
      <view class="title">昵称</view>
      <input placeholder="请输入您的昵称"  bindinput="inputName"></input>
    </view>
    <view class="kong1"></view>
    <view class="cu-form-group">
      <view class="title">手机号码</view>
      <input placeholder="请输入手机号"  bindinput="inputPhone"></input>
      <view class="cu-capsule radius">
        <view class="cu-tag bg-blue">
          +86
        </view>
        <view class="cu-tag line-blue">
          中国大陆
        </view>
      </view>
    </view>
    <view class="kong1"></view>
    <view class="cu-form-group">
      <view class="title">密码</view>
      <input class= 'info-input' placeholder="请输入密码" bindinput="inputPassword"></input>
    </view>
  </form>
  <button class='button' bindtap='register'>注册</button>
</view>

wxss用的colorUI

登录功能的实现

登录则是从用户集合中验证有无该用户,并且比对手机号和密码。我写的思路是,根据用户填入的手机号进行查询,查到该用户的数据,然后输入的密码跟数据库中的比对,成功则登录,失败则提示。

js代码

  1. 在js文件申明环境及调用数据库,如上述。
  2. 再调用云函数login获得用户openid。
  3. 获取wxml页面的数据。
  4. 查询数据库并进行比对。
//  单击“登录”按钮执行该函数
  queryData: function () {
    var _this = this
    console.log('输入的手机号', _this.data.phone)
        //  根据记录ID搜索数据集  
    userListDB.where({
      _openid: app.globalData.openid
    }).get({
      success: function (res) {
        console.log('数据库的密码', res.data[0].password)
        console.log('输入的密码', _this.data.password)
        console.log('用户名', res.data[0].name)
        if (_this.data.password != res.data[0].password) {  //判断密码是否正确
          wx.showToast({
            title: '密码错误!!',
            icon: 'success',
            duration: 2500
          })
        } else {
          console.log('登陆成功!')
          wx.showToast({
            title: '登陆成功!!',
            icon: 'success',
            duration: 2500
          })

          wx.reLaunch({//跳转个人中心
            url: '/pages/wd/wd' //?useropenid=' + res.data[0]._openid,//利用reLaunch跳转到带tabbar的页面          })
                  }   
      },
      //  未查到数据时调用
      fail: function (res) {
        wx.showModal({
          title: '错误',
          content: '请先注册',
          showCancel: false
        })
      }
    })
  },

wxml代码

  1. 登录wxml页面。
<view class="con">
  <view class="kong"></view>
  <form>
    <view class="cu-form-group">
      <view class="title">手机号码</view>
      <input placeholder="请输入手机号" value="{{phone}}" bindinput="bindKeyInputPhone"></input>
      <view class="cu-capsule radius">
        <view class="cu-tag bg-blue">
          +86
        </view>
        <view class="cu-tag line-blue">
          中国大陆
        </view>
      </view>
    </view>
    <view class="kong1"></view>
    <view class="cu-form-group">
      <view class="title">密码</view>
      <input placeholder="请输入密码" value="{{password}}" bindinput="bindKeyInputPassword"></input>
    </view>
  </form>
  <button class="button" bindtap='queryData'>登录</button>
</view>

wxss用的colorUI

最后就可以实现了,没有用用户授权登录的那种,一开始想着跟web开发的注册登录一样。
附上效果图:
在这里插入图片描述

在这里插入图片描述


http://www.niftyadmin.cn/n/827264.html

相关文章

ISNULL(expression,replace_value)【原创】

ISNULL(expression,replace_value)函数表达的意思就是&#xff0c;如果expression为NULL&#xff0c;则用replace_value来替换NULL&#xff0c;返回类型为任意类型。 例如&#xff1a;select id,isnull(name,name字段值为空) as name from table1转载于:https://www.cnblogs.co…

重排链表

给定一个单链表 L 的头节点 head &#xff0c;单链表 L 表示为&#xff1a; L0 → L1 → … → Ln-1 → Ln 。请将其重新排列后变为&#xff1a;L0 → Ln → L1 → Ln-1 → L2 → Ln-2 → …不能只是单纯的改变节点内部的值&#xff0c;而是需要实际的进行节点交换。 思路&…

Wordpress 的 SEO 优化之 自定义Title

SEO中&#xff0c;非常重要的一条&#xff0c;就是 title 了&#xff1b;因为 title 是目前搜索引擎最关注的一项&#xff0c;高于 keywords 和 description 优化的原则是&#xff1a; title 尽量体现关键词&#xff0c;且语法尽量规范、置前 Wordpress 中&#xff0c;文章的ti…

微信小程序学习笔记2——关于个人中心实现登录后隐藏登录注册按钮显示头像及用户名

本科课程作业写了个基础的小程序在这里记录分享一下&#xff0c;如有错误欢迎指出。 判断是否登录隐藏按钮 一开始写好登录注册发现&#xff0c;当我登录成功后个人中心页面还保留着登录注册按钮&#xff0c;于是翻阅了微信小程序开发文档查找如何隐藏按钮的方法。 在微信官方…

不同的二叉搜索树

给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的二叉搜索树的种数。 思路&#xff1a;动态规划 F(i,n)表示以i为根节点&#xff0c;n为长度的构成的总数。 G(n)表示长度为n构成的总数。 G(n)F(i,n…

AjaxPro.AjaxNamespace

首先下载ajaxpro.dll&#xff0c;你可以从http://www.ajaxpro.info/获得。最新版本是7.7.31.1&#xff0c;下载解压后的文件夹中有个AjaxPro.dll&#xff0c;就是它了。使用VS2008新建web项目,并添加对AjaxPro.dll的引用&#xff0c;然后在Web配置文件中添加&#xff1a; Code&…

PAT乙级 1003 我要通过! (20分)

PAT乙级练习总结 PAT乙级 1003 我要通过&#xff01; (20分) 第二版有注释&#xff0c;希望我的思路可以帮助你。 文章目录PAT乙级练习总结一、1003题目二、第一版只过了三个点三、第二版1003 我要通过&#xff01;总结一、1003题目 输入样例&#xff1a; 8 PAT PAAT AAPATAA A…

HttpHandler简单应用

IHttpHandler 概述可能和我一样&#xff0c;很多Asp.Net开发人员都有过Asp的背景&#xff0c;以至于我们在开发程序的时候&#xff0c;通常都是在“页面级”上思考&#xff0c;也就是说我们现在正在做的这个页面应该有什么样的功能&#xff0c;是进行一个问卷调查还是一个数据库…