介绍

中华白海豚是国家一级保护动物、香港回归吉祥物，仅剩2千余头，与现存大熊猫数量相当；珠江口海域是世界最大的白海豚栖息地，但受人类活动影响生存状况不容乐观；保护区承担着科普教育、管理执法、保护救助、科研监测等诸多职能。

小程序“白海豚保护区”是我个人以志愿者身份，无偿帮助保护区开发的，该项目在2019高校小程序大赛中获全国总决赛一等奖。

选择云开发

这个项目是以小程序云开发（TCB）为核心的。在笔者看来，每个云开发的运行环境是独立而隔离的，因此能够有效避免在一些突发情况时，不同项目之间产生的负面影响，这对于一个对稳定性要求较高的项目来说是十分合适的选择。同时，也不用考虑服务器的运维这些杂七杂八的问题。因此，可以说云开发是让开发者十分省心了！

不同场景下的应用

小程序聚焦保护区工作中的三个场景，包括两个高频场景：科普基地参观、志愿综合服务；以及一个低频场景，但却是十分重要的应用场景，那就是在遇到鲸豚搁浅等情况时，小程序能告诉我们该如何正确处理。详细的功能大家可进入小程序体验。

保护区拥有首个白海豚主题科普基地，迎接着来自珠三角乃至全国的参观者。以下，笔者将以这个场景下的参观预约功能的实现流程为例，向大家介绍一下云开发在本项目中应用！

一、用户界面

关键词：数据库 云存储

选择图片时将图片压缩，并使用 wx.cloud.uploadFile 方法上传到云存储中。

chooseImage: function (e) {
  wx.chooseImage({
    count: 1,
    sizeType: ['compressed'],   //压缩图片
    sourceType: [e],
    success: chooseResult => {

      wx.cloud.uploadFile({
        cloudPath: 'orderPic/' + new Date().getTime() + '.jpg', //定义上传至云端的路径、名称
        filePath: chooseResult.tempFilePaths[0]
      })

    },
  })
}

通过<form>组件获取到用户填写的信息后，调用 add 方法往数据库的集合中插入记录。

  formSubmit(form) {
    db.collection('order_list').add({
    data: form,
    success: res => {
      console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)
    }
  })
}

二、审核界面

关键词：数据库 云函数

利用企业微信支持微信小程序运行的天然优势，本项目与保护区单位的企业微信相结合，工作人员在企业微信中接收通知、处理申请。

利用 get 方法查询数据库该条预约的信息，并渲染到页面中。

  onLoad: function (e) {
  var that = this
  db.collection('order_list').where({
    _id: e.id
  })
    .get({
      success(res) {
        that.setData({
          content: res.data[0]
        })
      }
    })
}

审核后更新该条预约的状态（通过或不通过），这个时候因为权限问题，就需要在云函数中调用 update 的方法。

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()

exports.main = async (event, context) => {
var docid = event.docid
var state = event.state
var reply = event.reply
try {
  return await db.collection('order_list').doc(docid).update({
    data: {
      state: state,
      reply: reply
    }
  })
} catch (e) {
  console.log(e)
}
}

三、统计界面

关键词：聚合

聚合是云开发一种对数据批处理的操作。聚合操作可以将数据分组，然后对每组数据执行多种批处理操作，最后返回结果，以实现统计的功能。

GetData: function () { 
  var that = this
  db.collection('order_all')
    .aggregate()
    .match({
      _id: _.gte(that.data.time1)  //统计开始时间
    })
    .match({
      _id: _.lte(that.data.time2)  //统计截止时间
    })
    .group({
      _id: null,
      people: $.sum('$people'),
      group: $.sum('$group')
    })
    .end()
    .then(function (res) {
        that.setData({
          people: res.list[0].people,
          group: res.list[0].group
        })
    })
}

四、订阅消息

关键词：云函数

预约成功或失败后，结果会通过模板消息通知到用户。10月12日，微信团队发布了《小程序模板消息能力调整通知》，订阅消息正式上线。笔者也第一时间更新了用户的通知形式。

引导用户开启订阅消息，这里也注意到了基础库的要求，对低版本的用户会作相应提醒。

  <view bindtap="RequestSubscribeMessage">
    <view >审核进度通知</view>
    <switch disabled checked="{{subscribeMessageCheck}}"></switch>
  </view>

//index.js
  RequestSubscribeMessage: function () {
    var that = this
    wx.requestSubscribeMessage({
      tmplIds: [template_ID],  //订阅消息
      success(res) {
        if (res[app.globalData.template_ID] == 'accept') {
          that.setData({ subscribeMessageCheck: true })
        } 
      }, fail: function (err) {
        console.log(err)
      }
    })
  }

管理员审核后触发云函数，调用 subscribeMessage.send 发送订阅消息。

const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
  var openId = event.openId
  var value1 = event.value1
  var value2 = event.value2
  var templateId = event.templateId
  try {
    const result = await cloud.openapi.subscribeMessage.send({
      touser: openId,
      page: 'pages/order/user/history',
      data: {
        name1: {
          value: value1
        },
        date3: {
          value: value2
        }
      },
      templateId: templateId
    })
    console.log(result)
    return result
  } catch (err) {
    console.log(err)
    return err
  }
}

总结

作为云开发的第一批用户，也是业余的编程爱好者（本专业汉语言文学），云开发帮助我解决了很多小程序开发上的问题，有效提高了编程的效率，也让我有机会将许许多多头脑中有趣的想法、通过小程序编译成现实！