【小程序云开发完整流程+源码】建立并上线小程序实战项目 | 数据库 | 云函数 | 登陆

时间  2020-04-15
标签 小程序云开发完整流程+源码 建立 上线 程序 实战 项目 数据库 函数 登陆 栏目 SQL 繁體版
原文   原文链接

你们好，我是宁一，前段时间录制了微信小程序全栈开发的一个课程，教你们开发了一个叫作【真自律】的小程序。不少同窗已经跟着课程将小程序作出来了css

可是大部分同窗都没有服务器和域名，作出来的项目只能在本身电脑上面运行。有的同窗加我好友说感受好惋惜，好不容易作出来的项目，居然不能和别人一块儿分享。html

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

此次咱们直接使用小程序本身的语言来开发，由于此次要作的项目逻辑比较简单。后面我会再单独出一期课程教你们使用mpvue框架来进行云开发vue

**课程分为6个部分
一、项目介绍
二、建立项目、云开发初始化、页面初始化
三、登陆功能（云函数的建立和调用）
四、点击按钮生成记录数据（云数据库的插入）
五、将记录数据展现到页面上（云数据库的读取）
六、项目部署上线**数据库

如今咱们就开始吧~json

1、项目介绍

先来看一下最后的效果，有三个页面：首页、记录、个人，小程序

先在个人页面，点击登陆按钮，登陆进来，会展现用户的微信头像和微信昵称后端

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

 

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

一、建立项目

接下来咱们来建立项目，先来看看什么是云开发缓存

能够理解为微信官方给咱们的一个免费服务器，而且很是贴心的帮咱们部署好了小程序的环境，将服务器的一些功能，好比数据库的增删改查都封装成了接口，咱们操做数据库只须要调用他们封装好的接口就能够，很是的简单

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

咱们登录到小程序帐号中，拿到小程序的惟一标识AppId，建立云开发项目必需要有AppID

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

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

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


 

二、云开发初始化

（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云开发环境，文件夹上面会有一个云的标志。

若是你保存文件以后，仍是显示的未指定环境，那么能够关闭微信开发者工具，从新打开这个项目，应该就正常了
 

三、小程序页面初始化

（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": "个人"
      }
    ]
  },

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

3、登陆功能

一、在pages/me/me.wxml文件中添加登陆按钮
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">登陆</button>
二、在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,
  }
}

**重要！！！云函数修改好了以后，必定要右键点击云函数，选择建立并部署（或者上传并部署）出现部署成功的弹窗，修改才会生效
不少人会忘记，只要修改了就有从新上传部署，才能看到修改后的效果**

 

三、接下来来到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;
}

登陆以后页面的显示以下：

 

四、保持用户的登陆状态

如今每次刷新，获取到的用户信息就又没有了，咱们想要保持用户的登陆状态，就须要获取到用户信息后，将用户信息保存到缓存当中，这样刷新页面以后直接检查缓存中是否有用户信息就能够判断是否登陆过，而不是一次次的请求后端从新获取用户信息

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

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

 

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

一、完善首页样式

首页主要就是建立两个按钮，并显示当前的加减的数值，将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;这个样式去掉，再保存样式就正常了

 

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

在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的数字， 接下来咱们将这个数据插入到数据库中
 

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

点击微信开发者工具中上面的云开发按钮，来到云开发后台，须要建立数据库集合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日志页面中
 

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

主要编辑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;
}

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

 

6、部署上线

咱们最后经过真机调试在手机上面测试一遍

若是手机上面测试有问题，可是在电脑微信开发者工具中测试没有问题，通常是两种状况：

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

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

填写好版本和备注，点击上传以后，就能够在小程序后台帐号--管理--版本管理中看到了，咱们点击体验版作最后的测试，没有问题的话，点击提交审核就能够了

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

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

固然更多的仍是审核未经过的消息

若是审核未经过，登陆小程序后台，在通知中心中能够查看具体缘由，根据提示修改后再从新提交。我的小程序审核比较严格，你们作好长期做战的准备~~
  

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程