点击观看视频课程 ↓↓↓

---

课程文字版 ↓↓↓

大家好，我是宁一，前段时间录制了微信小程序全栈开发的一个课程，教大家开发了一个叫做【真自律】的小程序。很多同学已经跟着课程将小程序做出来了

但是大部分同学都没有服务器和域名，做出来的项目只能在自己电脑上面运行。有的同学加我好友说感觉好可惜，好不容易做出来的项目，竟然不能和别人一起分享。

今天就来满足大家的要求，教大家使用云开发免费将项目部署上线，不需要服务器和域名就能让用户通过微信访问到你的小程序。

这次我们直接使用小程序自己的语言来开发，因为这次要做的项目逻辑比较简单。后面我会再单独出一期课程教大家使用mpvue框架来进行云开发

课程分为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目录，将准备好的图片粘贴进来，选中之后的图片以及未选中的图片

（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文件中添加登录按钮

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

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

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

<!-- 通过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;
}

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

 

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;这个样式去掉，再保存样式就正常了

 

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
集合创建完成之后，点击权限设置，将数据记录的权限更改为【所有用户可读，仅创建者可读写】

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

// 云函数入口文件
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)
  }
}

修改完成云函数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)
        }
      })
    }
  },

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

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

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

主要编辑pages/logs文件夹
先来创建一个云函数getlogs，并在cloud/getlogs/index.js文件中添加代码

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    //需要从前端传过openid数据，通过openid字段来获取日志信息
    return await db.collection('logs').where({
     openid: event.openid
    }).get()
  } catch (e) {
    //插入数据错误
    console.log(e)
  }
}

再来到pages/logs/logs.js文件中创建getlogs方法调用getlogs云函数，并向云函数传递openid这个参数

//加载util.js文件，用来格式化日期
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  getlogs:function(){
    //从缓存中获取用户信息
    const ui = wx.getStorageSync('ui')
    //如果缓存中没有用户信息，就跳转到我的页面
    if (!ui.openid) {
      wx.switchTab({
        url: '/pages/me/me',
      })
    }else{
      const that = this
      wx.cloud.callFunction({
        name: "getlogs",
        data: {
          openid: ui.openid
        },
        success: function (res) {
          console.log("ni", res)
          that.setData({
            logs: res.result.data.map(log => {
              var date = util.formatTime(new Date(log.date))
              log.date = date
              return log
            })
          })
          console.log("logs", that.data.logs)
        },
        fail: function (res) {
          console.log(res)
        }
      })
    }
  },
  //通过onShow生命周期函数，调用getlogs方法
  //这样每次切换到日志页面，都会调用getlogs方法
  //在首页点击加减按钮后，切换到日志页面，新增的日志记录就会自动更新，提高用户体验
  onShow:function(){
    this.getlogs()
  }
})

最后来到pages/logs/logs.wxml文件中添加代码遍历显示日志数据

<block wx:for="{{logs}}" wx:key="key">
  <view class="log-item">
    日期：{{item.date}} 分数：{{item.add}}
  </view>
</block>

在pages/logslogs.wxss文件中添加样式

.log-item {
  text-align: left;
  padding: 10px 10px 0 0;
}

最后看一下记录页面的效果

 

六、部署上线

我们最后通过真机调试在手机上面测试一遍

如果手机上面测试有问题，但是在电脑微信开发者工具中测试没有问题，一般是两种情况：

• 云函数没有正确的部署，再重新右键选择云函数上传一下，再重新测试
• 数据库里面有错误数据，根据真机调试返回的错误信息修改

手机测试没有问题了，我们就要开始部署了在微信开发者工具中，点击右上角的上传按钮

填写好版本和备注，点击上传之后，就可以在小程序后台账号–管理–版本管理中看到了，我们点击体验版做最后的测试，没有问题的话，点击提交审核就可以了

提交审核之后，就是漫长的等待了，一般审核时间在1-2天，长一点的要一周，多关注一下自己微信的消息，审核通过之后会收到这样的消息

再来到小程序后台，点击提交发布就可以将小程序发布到线上，1-2小时左右，所有用户都可以微信搜索到你的小程序了

当然更多的还是审核未通过的消息

如果审核未通过，登录小程序后台，在通知中心中可以查看具体原因，根据提示修改后再重新提交。个人小程序审核比较严格，大家做好长期作战的准备~~

 
 

源码获取：

在【猫宁一】公众号中回复【课件】获取项目源码以及课程ppt