校园交友小程序开发实践

概述

本文介绍如何用云开发相关能力，快速完成一个校园交友小程序的开发。并围绕抽个对象和我的纸条两个页面进行功能展示和讲解。

说明

本实例教程所涉及到的相关源码材料，均已得到相应授权。

准备工作

注册腾讯云。
开通了云开发的小程序，详情请参见小程序端快速入门。

操作流程

具体操作流程可分为以下 6 步。更多详情可参见示例。

编写登录功能及主页代码
主页逻辑处理
实现抽取纸条功能
我的纸条页面设计
我的纸条页面逻辑处理
细节补充

数据库表的设计

将用户的登录与用户对应放入的纸条数据分离开，就要建个users_school表来存储微信小程序用户，所有用户放入的纸条再建一个body_girl_yun表，为了便于让用户管理抽出的纸条就再建一个body_girl_yun_put表用来存储所有用户抽出的纸条。

打开微信开发者工具，单击云开发进入云开发控制台 > 数据库页面。单击新建按钮创建 users_school、body_girl_yun 和 body_girl_yun_put 三个集合，如下图所示：

步骤 1：编写登录功能及主页代码

本文主要围绕主页的 index.wxml 和 index.wxss 进行讲解，更多 index 前端页面代码细节可参见 index 前端页面和 index 页面样式。

小程序配置及页面创建

app.json 中，配置两个页面的路径：
```
"pages": [
   "pages/index/index",
   "pages/history/history"
 ]
```
配置好后刷新开发者工具，就会在页面 pages 文件夹下生成 index，history 文件夹以及对应的 .js，.wxml， .wxss 和 .json 文件。

在 app.json 中设置 tabbar 的位置，在页面顶部以及设置里面的内容：

"tabBar": {
   "color": "black",
   "selectedColor": "#D00000",
   "position": "top",
   "list": [{
     "pagePath": "pages/index/index",
     "text": "抽个对象"
   },
   {
     "pagePath": "pages/history/history",
     "text": "我的纸条"
   }
 ]
},

3. 在 app.js 里新增全局的数据，用来存放当前用户的 openId：
 ```js
this.globalData = {
  openId: ''
}

实现用户登录功能及 openId 的记录

右击当前环境文件夹，单击新建 Node.js 云函数，并将文件命名为 login_yun。

进入 login_yun 目录下的 index.js 文件，在 cloud.init() 函数内配置环境。

cloud.init({
  // env 参数说明：
  // env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
  // 此处请填入环境 ID, 环境 ID 可打开云控制台查看
  // 如不填则使用默认环境（第一个创建的环境）
  // env: 'my-env-id',
  env: "cloud1234567890XXXXXXX",
});

在云函数入口函数里进行 openId 的操作

exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();

  const openId = md5(wxContext.OPENID);

  // 查询这个openid下有无数据
  let user_data = await db
    .collection("users_school")
    .where({
      openId: openId,
    })
    .get();

  // 没有此用户则将openId添加到数据库
  if (user_data.data.length === 0) {
    try {
      let data_add = await db.collection("users_school").add({
        data: {
          openId: openId,
        },
      });
      return {
        data_add,
        openId,
        status: 202, // 新添加的数据
      };
    } catch (e) {
      console.error(e);
    }
    // 有了则直接返回
  } else {
    return {
      user_data,
      status: 200, // 已经有了用户
    };
  }
};

然后右击 login_yun 文件夹，单击上传并部署：云端安装依赖，即完成了云函数的编写。
登录功能的云函数的调用，是在 index 页面加载 index.js 时进行调用，且在 onload 的生命周期中。

const that = this;
if (wx.getUserProfile) {
  that.setData({
    canIUseGetUserProfile: false,
  });
}
wx.cloud
  .callFunction({
    name: "login_yun", //  调用云函数
  })
  .then((res) => {
    console.log(res);
    if (res.result.status === 200) {
      // 存到全局的globalData里，便于后续使用
      app.globalData.openId = res.result.user_data.data[0].openId;
    } else {
      app.globalData.openId = res.result.openId;
    }
  });

编写 index 前端页面

顶部的轮播图，直接可以用小程序提供的 swiper 加上 swiper-item 标签来实现。

<view class="swiper_view">
  <swiper
    autoplay="true"
    interval="3000"
    duration="500"
    circular="true"
    class="swiper"
  >
    <swiper-item>
      <image mode="widthFix" src="../../images/_2.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image mode="widthFix" src="../../images/_1.png"></image>
    </swiper-item>
  </swiper>
  <!-- scaleToFill -->
</view>

2. 中间的盒子部分用基本的标签、图片和 CSS 样式来编写。单击放入与抽取都会跳出一个收集信息的框，使用 bindtap 来绑定点击的事件，并在 index.js 里处理对应的事件。
 ```html
 <view class="body_bottom">
  <view class="body_bottom_put" bindtap="putBody">放入一张男生纸条</view>
  <view class="body_bottom_out" bindtap="outBody">抽取一张男生纸条</view>
 </view>

黑遮罩层用一个 view 标签，结合 CSS 的样式来完成。点击遮罩层对应 cancelHide 来隐藏遮罩层。

<view
  class="hide"
  wx:if="{{putBodyMask || outBodyMask || putGirlMask || outGirlMask || xuzhiMask || xieyiMask}}"
  bindtap="cancelHide"
></view>

CSS 占满整个屏幕，加上颜色与透明度即可。

/_ 遮罩层 _/ .hide {
  width: 100vw;
  height: 100vh;
  background-color: black;
  opacity: 0.5;
  position: fixed;
  top: 0vw;
  left: 0vh;
}

4. 男女生放入与抽取的弹出框，picker 用来选择分类的不同的学校。
 ```html
<picker bindchange="bindSchoolChangePut" value="{{indexBody4}}" range="{{arrayBody4}}" class="out_body_content_2_picker">
  <view> - {{arrayBody4[indexBody4]}} -
  </view>
</picker>

将 index 前端页面和样式细化后，最后效果如下图所示：

步骤 2：主页逻辑处理

本文主要围绕主页的 index.js 进行讲解，更多详情请参见主页逻辑代码。

进入 index.js 页面，在 onload 的生命周期里，调用 login_yun 云函数实现登录的操作。

wx.cloud
  .callFunction({
    name: "login_yun",
  })
  .then((res) => {
    console.log(res);
    if (res.result.status === 200) {
      app.globalData.openId = res.result.user_data.data[0].openId;
    } else {
      app.globalData.openId = res.result.openId;
    }
  });

在 index.js 页面，添加 data 存放所需要的数据。

  data: {
    // 遮罩层标志
    putBodyMask: false,
    putGirlMask: false,
    xuzhiMask: true,
    // 抽出的遮罩层
    outBodyMask: false,
    outGirlMask: false,
    // 交友宣言
    textareaBody: '',
    textareaGirl: '',
    // qq微信号
    numberBody: '',
    numberGirl: '',
    // 上传图片预览的src
    srcListBody: [],
    srcListGirl: [],

    // 放入的学校
    arrayBody4: ["河南理工大学", "焦作大学", "焦作师范"],
    indexBody4: 0,
    // 纸条的生命
    arrayBody2: ["被抽中一次销毁", "被抽中两次销毁", "被抽中三次销毁"],
    indexBody2: 0,
    arrayBody3: ["河南理工大学", "焦作大学", "焦作师范"],
    indexBody3: 0,

    // 放入的学校
    arrayGirl4: ["河南理工大学", "焦作大学", "焦作师范"],
    indexGirl4: 0
    // 纸条的生命
    arrayGirl2: ["被抽中一次销毁", "被抽中两次销毁", "被抽中三次销毁"],
    indexGirl2: 0,
    arrayGirl3: ["河南理工大学", "焦作大学", "焦作师范"],
    indexGirl3: 0,
    // 添加图片的加号
    addMask: true
  },

学校选择的逻辑。
1. picker 中 bindchange="bindSchoolChangePut"，通过 bindSchoolChangePut 来触发学校改变的事件，选择对应的学校。
2. e.detail.value 来获取在 data 中绑定的学校的列表索引。

// 放入时，学校的选择
bindSchoolChangePut: function(e){
  this.setData({
    indexBody4: parseInt(e.detail.value)
  })
}

在点击确认放入，触发对应的 surePutBodyBtns 事件，再进行判断，进而实现限制交友宣言长度。

if (that.data.textareaBody.length < 20) {
  return wx.showToast({
    title: "交友宣言太短",
    icon: "error",
    duration: 2000,
  });
}

上传微信号的正则匹配。

if (
  !/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/.test(
    that.data.numberBody
  ) &&
  !/^[a-zA-Z]([-_a-zA-Z0-9]{6,20})$/.test(that.data.numberBody)
) {
  return wx.showToast({
    title: "微信号格式错误",
    icon: "error",
    duration: 2000,
  });
}

提示

微信官方定义的微信号规则：

可使用 6-20 个字母、数字、下划线和减号。
必须以字母开头（字母不区分大小写）。
不支持设置中文。 :::

实现本地图片的选择，一次上传限制一张，并且进行图片大小的限制，cloudPath 随机配置存储在云存储里的路径。

// 选择本地图片
chooseImgGirl: function(){
  const that = this
  wx.chooseImage({
    count: 5,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success (res) {
      // tempFilePath可以作为img标签的src属性显示图片
      if(res.tempFiles[0].size > 1200000){
        return wx.showToast({
          title: '图片过大',
          icon: 'error',
          duration: 2000
        })
      }

      const filePath = res.tempFilePaths[0]
      let timeStamp = Date.parse(new Date());
      const cloudPath = "image/" + timeStamp + filePath.match(/\.[^.]+?$/)[0]
      that.pageData.filePath = filePath
      that.pageData.cloudPath = cloudPath
      that.setData({
        srcListGirl: res.tempFilePaths
      })
    }
  })
}

单击纸条的生命，相应值的选择对应数据库 life 字段。

点击确认放入之后，相应逻辑是先上传图片，再上传 location，weChatId 等信息到 body_girl_yun 表，上传成功要跳转到 history 页面。

// 上传图片的api，先上传图片到云存储
wx.cloud.uploadFile({
  cloudPath,
  filePath,
  success: function(res){
    wx.hideLoading()
    wx.showLoading({
      title: '信息上传中',
      mask: true
    })
    // 上传图片完成后上传数据
    db.collection("body_girl_yun").add({
      data: {
        location: that.data.indexGirl4,
        weChatId: that.data.numberGirl,
        picture: res.fileID,
        life: parseInt(that.data.indexGirl2) + 1,
        des: that.data.textareaGirl,
        sex: 2,
        openId: app.globalData.openId,
        time: new Date().getTime()
      }
    }).then(result => {
      wx.hideLoading()

      that.pageData = {
        filePath: '',
        cloudPath: ''
      }
      that.setData({
        putGirlMask: false,
        srcListGirl: [],
        textareaGirl: '',
        numberGirl: ''
      })
        // 上传完成后跳转到history页
      wx.switchTab({
        url: '/pages/history/history',
        success: res=>{
          wx.showToast({
            title: '放入纸条成功',
            icon: 'success'
          })
        },
        fail: err => {
          wx.showToast({
            title: err,
            icon: 'error'
          })
        }
      })
  }
})

页面底部两个点击事件：联系客服与 uu 须知。联系客服主要是在 index.wxml 里通过小程序的 open-type=“concat” 来实现。

index.wxml
index.js

<!-- 底部的通知 -->
<view class="bottom_view">
  <button bindtap="xuzhi">UU须知</button>
  <!-- <text class="heng">|</text> -->
  <button bindcontact="contact" open-type="contact">遇到问题？联系客服</button>
</view>

// 点击UU须知
xuzhi: function(){
  this.setData({
    xuzhiMask: true
  })
},
// 联系客服
contact: function(){
  console.log()
}

步骤 3：实现抽取纸条功能

本文主要继续围绕主页的 index.js 进行抽取纸条功能的讲解，更多详情请参见主页逻辑代码。

随机抽取可以用微信开放文档提供的开发者资源来查找，进行随机的查询抽取，抽取的条件是“性别，学校和生命值必须大于 0”。

// 随机抽取
db.collection("body_girl_yun")
  .aggregate()
  .match({
    sex: 1,
    location: parseInt(that.data.indexBody3),
    life: _.gt(0), // 生命值要大于0
  })
  .sample({ size: 1 })
  .end();

抽到则处理，抽不到则提示处理时要把生命值减 1。

// 数据库没有这个学校的男生的纸条就
if (res.list.length == 0) {
  return wx.showToast({
    title: "此学校暂无纸条",
    icon: "error",
    mask: true,
  });
}
// 抽取到了纸条，则进行操作
// 生命值减一， 生命值为0的不会抽出来
db.collection("body_girl_yun")
  .where({
    _id: res.list[0]._id,
  })
  .update({
    data: {
      life: parseInt(res.list[0].life) - 1,
    },
  })
  .then((resultUpdate) => {
    wx.showToast({
      title: "抽取成功",
      icon: "success",
      mask: true,
    });
  })
  .catch((err) => {
    wx.showToast({
      title: err,
      icon: "error",
    });
  });

把数据写到 body_girl_yun_put 表中。

// 并将数据添加到 body_girl_yun_put
db.collection("body_girl_yun_put")
  .add({
    data: {
      picture: res.list[0].picture,
      des: res.list[0].des,
      location: res.list[0].location,
      sex: res.list[0].sex,
      weChatId: res.list[0].weChatId,
      openId: app.globalData.openId,
      time: new Date().getTime(),
    },
  })
  .then((resultAdd) => {})
  .catch((err) => {
    wx.showToast({
      title: err,
      icon: "error",
    });
  });

数据存入成功则跳转页面 history。

wx.switchTab({
  url: "/pages/history/history",
  success: (res) => {
    wx.showToast({
      title: "抽出纸条成功",
      icon: "success",
    });
  },
  fail: (err) => {},
});
that.setData({
  outBodyMask: false,
});

加上提示框与 loading 效果，wx.showLoading， wx.hideLoading()，并添加了一些基本的错误处理。

// 确认抽取一张男生纸条
sureOutBodyBtn: function(){
  const that = this

  wx.showLoading({
    title: '随机抽取中',
    mask: true
  })
  // 随机抽取
  db.collection('body_girl_yun').aggregate().match({
      sex: 1,
      location: parseInt(that.data.indexBody3),
      life: _.gt(0)  // 生命值要大于0
    }).sample({ size: 1}).end()
  .then(res => {
    wx.hideLoading()
    // 数据库没有这个学校的男生的纸条就
    if(res.list.length == 0){
      return wx.showToast({
        title: '此学校暂无纸条',
        icon: 'error',
        mask: true
      })
    }

    console.log(res)
    // 生命值减一， 生命值为0的不会抽出来
    db.collection('body_girl_yun').where({
      _id: res.list[0]._id
    }).update({
      data: {
        life: parseInt(res.list[0].life) - 1
      }
    }).then( resultUpdate => {
      wx.showToast({
        title: '抽取成功',
        icon: 'success',
        mask: true
      })
    }).catch(err=>{
      wx.showToast({
        title: err,
        icon: 'error'
      })
    })


    // 并将数据添加到 body_girl_yun_put
    db.collection('body_girl_yun_put').add({
      data: {
        picture: res.list[0].picture,
        des: res.list[0].des,
        location: res.list[0].location,
        sex: res.list[0].sex,
        weChatId: res.list[0].weChatId,
        openId: app.globalData.openId,
        time: new Date().getTime()
      }
    }).then( resultAdd => {

      wx.switchTab({
        url: '/pages/history/history',
        success: res=>{
          wx.showToast({
            title: '抽出纸条成功',
            icon: 'success'
          })
        },
        fail: err => {
          wx.showToast({
            title: err,
            icon: 'error'
          })
        }
      })

      // console.log("数据add"resultAdd)
      that.setData({
        outBodyMask: false
      })
    }).catch(err=>{
      wx.showToast({
        title: err,
        icon: 'error'
      })
    })
  })
}

步骤 4：我的纸条页面设计

本文主要围绕我的纸条前端页面 history.wxml 进行讲解，更多详情请参见我的纸条前端代码。

我放入的纸条页面设计

顶部的“我放入的纸条”与“我抽到的纸条”通过改变 active 的值来切换 class。

<view class="top_title">
  <text class="{{active === true ? 'on': ''}}" bindtap="inBtn"
    >我放入的纸条</text
  >
  <text class="{{active === true ? '': 'on'}}" bindtap="outBtn"
    >我抽到的纸条</text
  >
</view>

前端 for 循环出每个数据进行展示。dataList 为在数据库查出来的数据，指明 wx:key。

<view class="put" wx:for="{{dataListPut}}" wx:key="_id">
  <view class="putTop">
    <view class="putTopImg">
      <image src="{{item.picture}}"></image>
    </view>
    <view class="putTopDes"> <text>交友宣言:</text>{{item.des}} </view>
  </view>
</view>

在删除时需要数据的 _id，所以需要配合 JS 进行传递参数：data-id="{{item._id}}"。

<view class="putBottom">
  <text>{{schoolList[item.location]}}</text>
  <text>{{item.sex == 1? '男': '女'}}</text>
  <text class="putBottomDelete" bindtap="deletePut" data-id="{{item._id}}"
    >删除 !</text
  >
</view>

通过 e.target.dataset.id 获取到传递过来的参数。

deletePut: function (e) {
  const that = this
  const _id = e.target.dataset.id
}

实现交友宣言的 3 行，超出则用省略号展示。

.outTopDes_1 {
  height: 15vh;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

前端判断是否有数据，没有数据则显示“空空如也”。

<view
  class="kong"
  wx:if="{{active === true? true: false}}"
  hidden="{{dataListPut.length == 0 ? false: true}}"
  >空空如也</view
>
<view class="kong" wx:else hidden="{{dataListOut.length == 0 ? false: true}}"
  >空空如也</view
>

我抽到的纸条页面设计

基本跟“我放入的纸条”页面相同。多出了微信号的展示位置，交友宣言的行数减少一行。微信号的居中显示：

.outTopDes_2 {
  color: rgb(62, 88, 238);
  text-align: center;
  font-size: 35rpx;
}

用户上传的图片可在云开发控制台 > 存储 > 存储管理页面中获取。

步骤 5：我的纸条页面逻辑处理

本文主要围绕我的纸条 history.js 进行讲解，更多详情请参见我的纸条逻辑代码。

data 数据的设计。

{
  "active": true, // 用来改变当前选中的样式
  "dataListPut": [], // 用来存put页面的数据
  "dataListOut": [],
  "schoolList": ["河南理工", "河南师范", "焦作师范"]
}

onload 生命周期的设计。

因为这个页面没有获取用户 openId 的功能，所以需要先判断下是否已经获取到了用户的 openId。如果没有，则直接跳到 index 页面获取 openId，并提示相应错误。

if (app.globalData.openId == "") {
  wx.switchTab({
    url: "/pages/index/index",
    success: (res) => {},
    fail: (err) => {
      wx.showToast({
        title: err,
        icon: "error",
      });
    },
  });
}

调用请求“我放入的纸条”的数据函数

that.getPutData();

通过小程序开放文档提供查询方式，用用户的 openId 来获取到数据，并且把获取到的数据，通过 that.setData 给到 dataListPut 供页面渲染。
查询方法作用
limit 来限制获取数据的条数
orderBy 数据排序

查询方法	作用
limit	来限制获取数据的条数
orderBy	数据排序

// 获取数据put
getPutData: function(e){
  const that = this
  db.collection('body_girl_yun').where({
    openId: app.globalData.openId
  }).limit(10).orderBy('time', 'desc').get().then(res => {
    console.log(res)
    if(res.data.length == 0){
      that.setData({
        dataListPut: res.data
      })
      return wx.showToast({
        title: '没有数据',
        icon: 'none'
      })
    }
    that.setData({
      dataListPut: res.data
    })
  }).catch(err=>{
    wx.showToast({
      title: '加载数据失败',
      icon: 'error'
    })
  })
},

删除纸条的逻辑实现。

实现删除提示。

wx.showModal({
         title: '提示',
         // content: '确认删除纸条?',
         content: '删除后友友大厅将不可见，确认?',
         success (res) {

     })

如果用户确认删除，用 remove 通过前端传过来的 _id，对应唯一一个数据，进行删除，包括基本的错误处理。否则提示取消删除。

 if (res.confirm) {
     db.collection("body_girl_yun").where({
         _id: _id
     }).remove().then(res => {
         wx.hideLoading()
         if(res.errMsg == 'collection.remove:ok'){
             that.getPutData()
         }else{
             wx.showToast({
                 title: '删除失败',
                 icon: 'error',
                 mask: true
             })
         }
     }).catch(
         console.error
     )
 } else if (res.cancel) {
     wx.showToast({
         title: '删除取消',
         icon: 'error',
         mask: true
     })
 }
}

进行分页查询结合上划触底加载数据。

通过 onReachBottom 触发事件。

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if(this.data.active==true){
      this.getPutDataBottom()
    }else{
      this.getOutDataBottom()
    }
  },

通过 skip(pagePut * 10).limit(10) 中的 pagePut 参数来记录页数。
通过 concat 进行新旧数据的拼接，并更新到页面。

// 上划触底的事件
getPutDataBottom: function(){
    const that = this
    let pagePut = that.data.pagePut + 1

    db.collection('body_girl_yun').where({
        openId: app.globalData.openId
    }).skip(pagePut * 10).limit(10).orderBy('time', 'desc').get().then(res => {
        console.log(res)
        wx.hideLoading()
        // 如果还有数据
        if(res.data.length > 0){
                // 通过concat进行数据的拼接
            let all_data = that.data.dataListPut.concat(res.data)
            that.setData({
                dataListPut: all_data,
                pagePut: pagePut
            })
        }else{
            wx.hideLoading()
            wx.showToast({
                title: '没有更多数据',
                icon: 'none'
            })
        }

    })
},

实现下拉刷新数据。

需要先在 app.json 文件里配置开启下拉刷新功能 enablePullDownRefresh。

"window": {
  "backgroundColor": "#FFCCFF",
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#FFCCFF",
  "navigationBarTitleText": "校园交U",
  "navigationBarTextStyle": "black",
  "enablePullDownRefresh": true
},

用户 onPullDownRefresh 下拉触发请求数据的函数，重新获取数据。

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh: function () {
  if(this.data.active == true){
    this.getPutData("pull")
  }else{
    this.getOutData("pull")
  }
},

步骤 6：细节补充

加上删除纸条的 showLoading 效果。

wx.showLoading({
  title: "删除中",
  mask: true,
});

还有获取 put 数据的 showLoading 等。

加上 showModal 提示。

wx.showModal({
  title: '提示',
  content: '确认删除纸条?',
  success (res) {
  })
})

至此，该小程序的全部功能已实现完成。更多详情请参见示例代码。

本文项目成果展示视频

校园交友小程序开发实践视频

校园交友小程序开发实践

概述​

准备工作​

操作流程​

数据库表的设计​

步骤 1：编写登录功能及主页代码​

小程序配置及页面创建​

实现用户登录功能及 openId 的记录​

编写 index 前端页面​

步骤 2：主页逻辑处理​

步骤 3：实现抽取纸条功能​

步骤 4：我的纸条页面设计​

我放入的纸条页面设计​

我抽到的纸条页面设计​

步骤 5：我的纸条页面逻辑处理​

步骤 6：细节补充​

本文项目成果展示视频​

概述