微信小程序踩坑之云数据库实现登录

最新推荐文章于 2024-03-26 21:25:14 发布

punkginger

最新推荐文章于 2024-03-26 21:25:14 发布

阅读量1k

点赞数 2

分类专栏：微信小程序文章标签：小程序 javascript css3 html

本文链接：https://blog.csdn.net/punkginger/article/details/114830122

版权

本文详细介绍了如何在微信小程序中实现云数据库登录功能，包括验证本地用户信息、使用微信API获取用户信息并存储、用户输入学号与手机号绑定数据库、处理云数据库更新以及前端交互细节。在开发过程中遇到的问题和解决方案也进行了分享。

摘要由CSDN通过智能技术生成

原文地址：

http://www.punkginger.top/admin/write-post.php?cid=4

欢迎访问我的个人博客，本文若有问题也欢迎指出

本次开发的项目中的登录逻辑是将微信自带的用户信息和用户输入的学号与手机号绑定在一起储存在数据库中，细节如下

首先验证本地是否有登录时保存的用户信息
js：

      if (wx.getStorageSync('user')) {
          wx.reLaunch({
              url: 'pages/find/find'
          })
      } else {
          wx.reLaunch({
              url: 'pages/login/login'
          })
      }

这样如果有保存的信息则前往首页，没有则留在登录界面

接着通过微信提供的api获取用户性别，昵称，头像url并将其与两个值为0学号与手机号的存入数据库中
之后我们再让用户输入学号与手机号，并用这两个值修改数据库里的值，这样写是因为云数据库没有判断条件的插入
同时，因为云数据库的更新数据需要此条数据的id，我们需要先把id从数据库里取出再更新学号与手机号
接下来是完整代码和细节讲解：
wxml：

      <!--index.wxml-->

  <view class="box">
    <view class="userinfo">
      <van-button wx:if="{
  {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </van-button>
      <block wx:else>
        <image  class="userinfo-avatar" src="{
  {userInfo.avatarUrl}}" mode="cover"></image>
        <text class="userinfo-nickname">{
  {userInfo.nickName}}</text>
        <form>
          <van-field
            model:value="{
  {stdId}}"
            placeholder&