微信小程序【腾讯云开发】30分钟创建并上线小程序项目（涉及-数据库操作）

学习 视频 网址 ：【云开发实战】30分钟创建并上线小程序项目

https://www.bilibili.com/video/BV1Pc411h7RU?t=19

视频-项目-源码 ：

链接 : https://pan.baidu.com/s/1Rm916v_ZT8eOvKTCHYnykQ 提取码 : wx66

目   录

1、项目介绍

2、创建项目、云开发初始化、页面初始化

什么云开发？

创建云开发项目

云开发初始化

微信官方文档 ：【云开发】

3、登录功能（云函数的创建和调用）

微信官方文档 ：【组件】【表单组件】【Button】

微信官方文档 ：【云开发】【云函数】

获取openid（每个微信号的唯一标识） 

设置云函数

调用云函数

用户登录按钮的设置：

登录缓存的设置【wx.setStorageSync()、wx.getStorageSync()】

登陆成功后，保存用户信息：

4、点击按钮生成记录数据（云数据库的插入）

在数据库中创建集合

数据库-集合-权限设置

微信官方文档 ：【云开发】【数据库】

5、将记录数据展示到页面上（云数据库的读取）

更改日期显示格式：

6、项目部署上线

查看小程序版本信息： 

---

1、项目介绍

2、创建项目、云开发初始化、页面初始化

什么是云开发？

• 可以理解为微信官方给我们的一个免费服务器。
• 帮我们部署好了小程序的环境。
• 将服务器的一些功能，比如数据库的增删改查封装成了接口。
• 我们不需要使用自己的服务器和域名就能让别人访问到我们的小程序。

创建云开发项目

云开发初始化

微信官方文档 ：【云开发】

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

3、登录功能（云函数的创建和调用）

微信官方文档 ：【组件】【表单组件】【Button】

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

 

微信官方文档 ：【云开发】【云函数】

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions.html

获取openid（每个微信号的唯一标识） 

 

设置云函数

每次修改代码，都要重新上传！！！ 

调用云函数

用户登录按钮的设置：

登录缓存的设置【wx.setStorageSync()、wx.getStorageSync()】

登陆成功后，保存用户信息：

Page({
   data: {
      userinfo: {}, //储存用户信息-userinfo
      openid: "" //用来保存云函数获取到的openid信息
   },
   onGotUserInfo: function(e) { //参数e
      const that = this; //保存this,调用that.setData
      // this.setData({ //setData()方法：保存获取到的数据
      //    x: e.detail.userInfo //保存用户信息
      // })
      // console.log("x", this.data.x)
      wx.cloud.callFunction({ //调用云函数
         name: "login", //指定-要调用哪个云函数
         success: res => {
            console.log("云函数调用成功.")
            that.setData({ //this.setData():指的是这个方法,而不是页面对象,this无效
               openid: res.result.openid,
               userinfo: e.detail.userInfo //当云函数调用成功后,才给uesrinfo、openid赋值
            })
            //将openid保存到userinfo变量中，保存到缓存中
            //数据越少越好，两条信息合成一条信息，将openid变成userinfo中的字段
            that.data.userinfo.openid = that.data.openid
            console.log("openid", that.data.openid)
            console.log("userinfo", that.data.userinfo)
            wx.setStorageSync("userinfo", that.data.userinfo) //保存缓存的方法wx.setStorageSync(key, data)
         },
         fail: res => {
            console.log("云函数调用失败.")
         }
      })
   },
	onLoad: function (options) {//页面加载调用登录用户信息,需要用到onLoad()生命周期函数
		const ui = wx.getStorageSync('userinfo')//获取缓存信息wx.getStorageSync()---wx.setStorageSync()
      this.setData({//将变量保存到data数据中
         userinfo: ui,
         openid: ui.openid
      })
   }
})

 

4、点击按钮生成记录数据（云数据库的插入）

在数据库中创建集合

数据库-集合-权限设置

微信官方文档 ：【云开发】【数据库】

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html

5、将记录数据展示到页面上（云数据库的读取）

更改日期显示格式：

6、项目部署上线

手机上，不能正确运行： 云函数没有部署（cloud文件）；数据库掺杂了一些错误的信息。

查看小程序版本信息：