【2020云开发+源码】30分钟创建并上线微信小程序实战项目 | 零成本 | 云数据库 | 云函数

简介: 3、登录功能(云函数的创建和调用)4、点击按钮生成记录数据(云数据库的插入)

三、登录功能


1、在pages/me/me.wxml文件中添加登录按钮


<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">登录</button>


2、在me.js文件中添加onGotUserInfo方法和userInfo变量


Page({
  data: {
    userInfo:{}
  },
  onGotUserInfo: function (e) {
    this.setData({
      userInfo: e.detail.userInfo
    })
    console.log("userInfo", this.data.userInfo)
  },
})



点击登录按钮,在控制台会打印出用户的信息,如下



image.png


但是现在获取到的信息中没有openid这个字段,openid是每个微信号的唯一标识,微信昵称,头像、地址这些都可能会改变,但是openId不会改变,我们要实现登录功能并识别客户,必须要获取到这个openid字段。


openid字段属于比较敏感的信息,我们需要从微信服务器中获取,这个就要用到我们的云函数了,在我们创建的cloud文件夹中创建一个云函数,右键–新建Node.js云函数,命名为login

image.png


可以看到他会默认帮我们创建两个文件,index.js和package.json配置文件,package.json文件一般不做操作,主要操作的就是index.js文件


打开index.js文件,默认帮我们写了一些代码,前面两行代码是每个云函数文件中必有的SDK插件是http请求处理插件,然后再init初始化


我们将不需要的代码删除一下,可以看到下面已经帮我们获取到了openid,我们将其他的删掉,只留下openid。最后login/index.js文件中的代码如下

const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    openid: wxContext.OPENID,
  }
}


重要!!!云函数修改好了之后,一定要右键点击云函数,选择创建并部署(或者上传并部署)出现部署成功的弹窗,修改才会生效
很多人会忘记,只要修改了就有重新上传部署,才能看到修改后的效果


image.png


3、接下来来到pages/me/me.js文件,调用云函数,还是在onGotUserInfo方法中使用wx.cloud.callFunction调用login云函数


Page({
  data: {
    userInfo:{},
    //新加一个openid变量,保存获取到的openid字段
    openid:""
  },
  onGotUserInfo: function(e){
    //将this对象保存到that中
    const that = this
    wx.cloud.callFunction({
      name: 'login',
      success: res => {
        console.log('云函数调用成功')
        that.setData({
          openid: res.result.openid,
          userInfo: e.detail.userInfo
        })
        console.log("userInfo", this.data.userInfo)
        console.log("openid", this.data.openid)
      },
      fail: err => {
        console.error('[云函数] [login] 调用失败', err)
      }
    })
  }
})


这样就获取到了用户信息还有openid,接下来,我们来将获取到的用户信息展示出来,并隐藏登录按钮


<!-- 通过openid来判断用户是否登录
如果openid字段为空,说明没有登录,显示登录按钮 -->
<view wx:if="{{!openid}}">
  <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">登录</button>
</view>
<!-- 如果openid不为空,就说明用户登录了
读取用户昵称和用户头像显示到页面上 -->
<view class="uploader-container" wx:if="{{openid}}">
  <image class="image" src="{{userInfo.avatarUrl}}"></image>
  <view class='name'>{{userInfo.nickName}}</view>
</view>


再来到me.wxss文件中加个样式


.image {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  display: block;
  padding-top:20px;
}
.name {
  text-align: center;
  padding-top:10px;
}
button{
  background: #EA5149;
  width: 60%;
  margin-top: 100px;
  color: #ffffff;
}


登录之后页面的显示如下:


image.png



4、保持用户的登录状态


现在每次刷新,获取到的用户信息就又没有了,我们想要保持用户的登录状态,就需要获取到用户信息后,将用户信息保存到缓存当中,这样刷新页面之后直接检查缓存中是否有用户信息就可以判断是否登录过,而不是一次次的请求后端重新获取用户信息


来到me.js文件中,修改onGotUserInfo方法,在success中添加代码

success: res => {
  console.log('云函数获取成功', res.result.openid)
  that.setData({
    openid: res.result.openid,
    userInfo: e.detail.userInfo
  })
  //需要添加的代码
  //将openid字段加入到userInfo变量中
  this.data.userInfo.openid = this.data.openid
  //打印一下当前userInfo的信息,检查是否有openid字段
  console.log("userInfo", this.data.userInfo)
  //将userinfo信息保存到缓存中
   wx.setStorageSync('ui', this.data.userInfo)


然后再添加onLoad小程序生命周期函数,获取缓存中的用户信息,页面加载时触发。一个页面只会调用一次


onLoad: function (options) {
  const ui = wx.getStorageSync('ui')
  this.setData({
    userInfo: ui,
    openid:ui.openid
  })
}


这样我们再刷新页面,会自动获取用户信息,不需要重复登录了


四、点击按钮生成记录数据(云数据库的插入和查询)


1、完善首页样式


首页主要就是创建两个按钮,并显示当前的加减的数值,将pages/index/index.wxml文件中的代码清空,加上+1和-1两个按钮


<view class="container">
  <view class="right button">+ 1</view>
  <view class="left button">- 1</view>
</view>


再来将pages/index/index.wxss文件的代码清空,粘贴上下面的代码


.button{
  width: 70px;
  height: 70px;
  line-height:70px;
  border-radius: 20%;
  border: none;
  text-align:center;
  font-size: 25px;
  color:#FFFFFF;
  font-weight:bold;
  margin-top:50px;
}
.right{
  background:#EA5149;
  float: right;
}
.left{
  background:#feb600;
}


现在保存文件看一下效果,可以看到上面有一个空白的间隔,

我们来到app.wxss文件中,将padding: 200rpx 0;这个样式去掉,再保存样式就正常了


image.png


2、实现点击首页的加减按钮,在控制台中打印出加减的信息


在pages/index/index.wxml文件中的两个按钮上面添加data-add=“1” bindtap=“addLog” 方法


<view class="right button" data-add="1" bindtap="addLog">+ 1</view>
<view class="left button" data-add="-1" bindtap='addLog'>- 1</view>


在两个按钮,这个要注意addLog传参不能这样写addLog(1),参数需要写在前面data-add中,其中add是我们自己定义的,换成别的单词也可以


再来到pages/index/index.js文件中,清空原先的代码,并创建addLog方法


Page({
  //event就是我们通过data-add传递的参数对象
  addLog(event){
    //传递的参数event.currentTarget.dataset.add这样来获取
    const add = event.currentTarget.dataset.add
    console.log("add", add)
  }
})


现在点击加减按钮,在控制台中已经可以打印出add的数字, 接下来我们将这个数据插入到数据库中

 

3、向数据库中添加加减记录数据


点击微信开发者工具中上面的云开发按钮,来到云开发后台,需要创建数据库集合logs


image.png


集合创建完成之后,点击权限设置,将数据记录的权限更改为【所有用户可读,仅创建者可读写】


image.png


// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  try {
    return await db.collection('logs').add({
      //event是从前端传递过来的参数对象,我们后面会在pages/index/index.js文件中的addLog方法中调用云函数createlog时,传递add、date、openid这些参数
      data: {
        add: event.add,
        date:event.date,
        openid:event.openid
      }
    })
  }catch(e){
    //插入数据错误
    console.log(e)
  }
}


再来到cloud云开发文件中创建一个云函数createlog,在cloud/createlog/index.js文件中,实现往logs数据表中插入一条记录的功能


修改完成云函数createlog之后,不要忘记部署函数,右键点击这个云函数,选择【创建并部署:云端安装依赖】选项


接下来编辑pages/index/index.js文件的addlog方法,调用云函数createlog,并传递add、date、openid这三个参数


  addLog(event){
    const add = event.currentTarget.dataset.add
    console.log("add", add)
    //需要添加的部分
    const that = this
    const ui = wx.getStorageSync('ui')
    //如果缓存中没有用户信息,就跳转到我的页面
    if (!ui.openid){
      wx.switchTab({
        url: '/pages/me/me',
      })
    }else{
      //调用云函数createlog
      wx.cloud.callFunction({
        name: "createlog",
        data: {
          add: add,
          date: Date.now(),
          openid: ui.openid
        },
        success: function (res) {
          console.log(res)
        },
        fail: function (res) {
          console.log(res)
        }
      })
    }
  },


来测试一下,在首页点击加减按钮,就会在数据库中插入数


image.png


这样首页功能就完成了,接下来我们来将插入的这些数据读取出来,展示在logs日志页面中

目录
相关文章
|
11天前
|
Rust 前端开发 关系型数据库
Tauri 开发实践 — Tauri 集成本地数据库
本文介绍了在 Tauri 框架中集成本地数据库的几种方案,包括直接绑定 SQLite、使用第三方数据库库和使用 tauri-plugin-sql-api 插件。最终选择了 tauri-plugin-sql-api,因为它集成简单、支持多种数据库类型,并且与 Tauri 框架深度整合,提升了开发效率和安全性。文章详细介绍了如何安装和使用该插件,以及如何编写核心代码实现数据库操作。
53 2
|
5天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
22 0
|
2月前
|
SQL 数据管理 关系型数据库
SQL与云计算:利用云数据库服务实现高效数据管理——探索云端SQL应用、性能优化、安全性与成本效益,为企业数字化转型提供全方位支持
【8月更文挑战第31天】在数字化转型中,企业对高效数据管理的需求日益增长。传统本地数据库存在局限,而云数据库服务凭借自动扩展、高可用性和按需付费等优势,成为现代数据管理的新选择。本文探讨如何利用SQL和云数据库服务(如Amazon RDS、Google Cloud SQL和Azure SQL Database)实现高效的数据管理。通过示例和最佳实践,展示SQL在云端的应用、性能优化、安全性及成本效益,助力企业提升竞争力。
56 0
|
2月前
|
运维 前端开发 Serverless
中后台前端开发问题之降低数据库使用门槛和运维成本如何解决
中后台前端开发问题之降低数据库使用门槛和运维成本如何解决
27 0
|
3月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——个人中心页面的制作
本文介绍了如何设计和实现一个网上花店的微信小程序,包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件,用于构建个人中心界面,包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情,包括商品图片、名称、销量、价格和订单状态,用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息,包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码,以及简洁的样式设计。
175 0
【微信小程序开发实战项目】——个人中心页面的制作
|
3月前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
361 1
|
3月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
399 0
|
3月前
|
SQL 关系型数据库 MySQL
支付系统----微信支付18-----创建并连接数据库
支付系统----微信支付18-----创建并连接数据库
|
3月前
|
XML 关系型数据库 MySQL
支付系统----微信支付19---集成MyBatis-plus,数据库驱动对应的依赖版本设置问题,5没版本没有cj这个依赖,mysql驱动默认的是版本8,这里是一个父类,数据库都有,写个父类,继承就行
支付系统----微信支付19---集成MyBatis-plus,数据库驱动对应的依赖版本设置问题,5没版本没有cj这个依赖,mysql驱动默认的是版本8,这里是一个父类,数据库都有,写个父类,继承就行
|
3月前
|
JavaScript 小程序 应用服务中间件
vue 本地/PC端访问微信云数据库
vue 本地/PC端访问微信云数据库
46 0