小程序云函数request请求_【云开发|实战】30分钟创建并上线小程序项目（上） | 云函数 | 登录...

点击观看视频课程 ↓↓↓

文字版

课程分为6个部分
1、项目介绍
2、创建项目、云开发初始化、页面初始化
3、登录功能(云函数的创建和调用)
4、点击按钮生成记录数据(云数据库的插入)
5、将记录数据展示到页面上(云数据库的读取)
6、项目部署上线

一

项目介绍

先来看一下最后的效果，有三个页面：首页、记录、我的。

先在我的页面，点击登录按钮，登录进来，会展示用户的微信头像和微信昵称

接下来来到首页，点击加减按钮，记录页面会同步产生点击的日志。我们课程结束后，在手机上面运行的结果就是这样的

二

创建项目、云开发初始化

、页面初始化

1、创建项目

接下来我们来创建项目，先来看看什么是云开发

可以理解为微信官方给我们的一个免费服务器，并且非常贴心的帮我们部署好了小程序的环境，将服务器的一些功能，比如数据库的增删改查都封装成了接口，我们操作数据库只需要调用他们封装好的接口就可以，非常的简单

创建云开发项目的话，需要先注册一个小程序账号
点击查看注册账号演示

我们登陆到小程序账号中，拿到小程序的唯一标识AppId，创建云开发项目必须要有AppID

接下来我们来到微信开发者工具中，创建一个新的小程序项目，不要选择云开发选项，会给我们创建许多我们用不到的模板。选择这个不使用云开发，然后我们自己去配置云开发环境

项目创建好了之后，点击云开发按钮，开通一下云开发功能

开通完成之后，我们会拿到云开发环境的id，这个id是唯一的，用来标识你的这个开发环境，后面我们会用到id

2、云开发初始化

(1)新建一个云开发的文件夹cloud

(2)在project.config.json文件中添加代码，指定云开发的文件为我们刚刚创建的cloud文件夹

"cloudfunctionRoot": "cloud/",

(3)再来到app.js文件中用下面的代码代替原先的代码

App({

onLaunch: function () {if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {//env环境应该替换成自己的环境id//traceUser将用户访问记录到用户管理中，在控制台中可以看到访问用户的信息，我们一般将他设置为true
wx.cloud.init({
env: 'test-59478a',
traceUser: true})}}})

保存了之后，这里cloud云开发文件后面的就会指定我们现在创建的test云开发环境，文件夹上面会有一个云的标志。

如果你保存文件之后，还是显示的未指定环境，那么可以关闭微信开发者工具，重新打开这个项目，应该就正常了

3、小程序页面初始化

(1)先处理pages文件，pages文件夹里面放这我们小程序的所有页面，我们需要三个页面，index首页、logs记录页面，还有me我的页面，我们创建一个me文件夹
在pages文件夹上面右键，选择新建目录，再在创建好的me文件夹上面右键，新建page

(2)再创建一个images目录，将准备好的图片粘贴进来，选中之后的图片以及未选中的图片

[图片上传失败...(image-bd6419-1583853800204)]
(3)接下来我们来到app.json文件中，先修改window对象中的导航栏颜色和导航栏标题

"navigationBarBackgroundColor": "#EA5149",

"navigationBarTitleText": "猫宁一",

再来加上tab栏

"tabBar": {

"list": [{"pagePath": "pages/index/index","iconPath": "image/binggan.png","selectedIconPath": "image/binggan-active.png","text": "首页"},{"pagePath": "pages/logs/logs","iconPath": "image/danhuang.png","selectedIconPath": "image/danhuang-active.png","text": "日志"},{"pagePath": "pages/me/me","iconPath": "image/huasheng.png","selectedIconPath": "image/huasheng-active.png","text": "我的"}]},

现在页面基本上搭建完成了，来看一下效果

三

登录功能

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

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

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

Page({

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

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

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

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

可以看到他会默认帮我们创建两个文件，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,}}

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

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，接下来，我们来将获取到的用户信息展示出来，并隐藏登录按钮

wx:if="{{!openid}}"> open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">登录>>class="uploader-container" wx:if="{{openid}}">class="image" src="{{userInfo.avatarUrl}}">>class='name'>{{userInfo.nickName}}>>

再来到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;}

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

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})}

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

可以的话帮宁一点个在看 

我们一起成长~

长

按

关

注

猫宁一公众号

微信号 : maoningyi1