又是一年TGC,去年是我们第一次尝试使用小程序去结合线下活动,并且采用了智能印章的方式来打通线上小程序部分和线下的全场运营互动,极大的增强了玩家在线下展会的体验,刺激了活动的参与度。2019年,TGC升级为腾讯数字文创节,同时在后端的开发中,采用云开发,继续给线下的玩家们带来全新的不同体验。

今年的2019腾讯数字文创节(以下简称TGC)的举办地点是在世界最大的单体建筑----成都环球中心里面,整个场馆区域非常大,同时场馆内有很多商区,为了能更加突出打卡TGC的整体性,我们将整个TGC所有的场馆地点设计在一个全场地图上,玩家可以很清楚的看到所有打卡点的分布和场馆的具体位置:

每年的TGC小程序我们在尝试一些新的技术形式的加入。今年TGC整体升级为腾讯数字文创节,整个活动以展会形式为主,整个TGC共设为值四大展区——IP主题(该主题展区内有每个游戏ip单独布置的展区)、传统文化、竞技文化和未来探索,相较于去年的形式,今年更加侧重在和传统文化进行集合,所以我们在玩法上还是和去年一样,采用打卡的方式,但是在形式上,则采用了更加适合玩家感受游戏文化和传播内容的拍照打卡。通过打卡得积分、分享打卡照邀请好友点赞得积分和积分抽奖的方式,来带动活动线下的参与以及线上的传播。整体的效果图如下:

# 云开发

这次活动的开发排期十分紧张,后台的开发人力又无法及时跟进项目,所以这次的整个活动的开发我们十分大胆的尝试了云开发。其实在云开发内部测试的时候,我们就已经有预研过云开发。

云开发提供了云存储、云函数和数据库,提供了较为完整的云端支持,还搭配了一套基础运维体系,开发者无需关心服务器搭建和代码部署。关于一些基础的类似云函数提供了鉴权的内容啥的,这里受限篇幅也就不再阐述,可自行查看开发者文档,这里讲下开发过程中的小总结吧。

# 1、云开发环境

每个小程序账号开通了小程序云能力后会默认得到一套云开发环境,每个小程序账号最多可以创建两个云开发环境,一个云环境用于开发环境,一个云环境用于线上环境。 小程序端只需要在小程序云初始化函数配置当前运行的环境ID即可:

// app.js
App({
    ......
    globalData: {
        wxCloudEnv: 'tgc-production-xxxx'  // 当前运行环境ID   
  }
})
// index.js
wx.cloud.init({
       env: app.globalData.wxCloudEnv
})

但是小程序云上,即使云函数当前运行的云环境不一样,也需要在每个云函数上显式的配置当前运行的云环境ID,要不然可能会在线上环境的云函数也会调用到测试环境的数据库和云存储。

现在每个云环境默认是基础的资源配额,可以自行发邮件申请.

# 2、云开发的权限控制

小程序云提供的API分为小程序端API和服务端API,顾名思义,一套是在小程序的代码里调用的,一套是在服务端云函数调用的,两套API都可以进行数据库操作、云函数调用和云文件的操作。

小程序端的数据库API在添加一条数据库记录的时候,该条数据库记录会默认加上_openid字段,值为该条记录创建者(也就是用户)的openid,而如果是服务端数据库API进行同样的操作就不会带上该字段。小程序云数据库的集合默认的权限都是设置为"仅创建者和管理员可读写",在小程序端如果通过数据库API访问数据库某个集合的数据时,只能访问到用户自己在小程序上调用数据库API创建的数据,写的逻辑也是一样,另外几个权限也是很好理解。小程序云管理后台可以设置数据库的操作权限,不同的用户对数据的读写权限不同,通过这个操作,可以灵活的调整数据库中的数据使用场景。

# 3、使用云开发生成小程序二维码

通常在做朋友圈分享图的逻辑时,前端会请求后端接口直接拿到生成好带有特定参数的小程序码地址,然后直接绘制到canvas上。后端会从内存缓存读accesstoken,判断是否过期,然后请求微信的生成二维码接口得到生成好的二维码,再保存到服务器上的文件存储目录,再将访问地址返回给前端。但是在小程序云上,因为没有内存缓存的支持,我们需要将请求到的accesstoken和过期时间等信息直接存储在小程序云数据库集合上。

因为小程序云的云函数的调用方式类似Ajax的方式,无法直接将生成的图片返回给前端放到Image组件中使用,所以在小程序云上,生成好小程序二维码后,还需要再存储到小程序云的云文件存储中,得到云文件ID,再将云文件ID返回给前端使用。

let wxACodeResult = await axios({  // 请求微信接口得到小程序二维码
      method: 'POST',
      url:'https://api.weixin.qq.com/wxa/getwxacode',
      params: {
         access_token: accessToken,
         is_hyaline: true,
         width: 200
     },
     data: {
         path: path
    },
     responseType: 'stream',
  })
let uploadFileResult = await cloud.uploadFile({
        cloudPath: `wxacode_${Date.now()}.png`,
        fileContent: wxACodeResult.data
 
})

# 4、云开发的全能性

云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

云开发提供了几大基础能力支持: