去年的TGC小程序，我们采用了小成本的智能印章来连接线上线下(点此查看知晓程序的报道)，今年，我们利用了成本更低的ibeacon设备，来做室内定位。先放码： [图片] 介绍下今年的TGC小程序 今年的2019腾讯数字文创节（以下简称TGC）的举办地点是在世界最大的单体建筑----成都环球中心里面，整个场馆区域非常大，同时场馆内有很多商区，为了能更加突出打卡TGC的整体性，我们将整个TGC所有的场馆地点设计在一个全场地图上，玩家可以很清楚的看到所有打卡点的分布和场馆的具体位置： [图片] 每年的TGC小程序我们在尝试一些新的技术形式的加入。今年TGC整体升级为腾讯数字文创节，整个活动以展会形式为主，整个TGC共设为值四大展区-----IP主题（该主题展区内有每个游戏ip单独布置的展区）、传统文化、竞技文化和未来探索，相较于去年的形式，今年更加侧重在和传统文化进行集合，所以我们在玩法上还是和去年一样，采用打卡的方式，但是在形式上，则采用了更加适合玩家感受游戏文化和传播内容的拍照打卡。通过打卡得积分、分享打卡照邀请好友点赞得积分和积分抽奖的方式，来带动活动线下的参与以及线上的传播。整体的效果图如下： [图片] 既然是玩家参观TGC场馆打卡得积分，那么如何验证玩家是否在该打卡点内呢？ 小程序ibeacon ibeacon简介 ibeacon是2013年苹果提出来的一套可用于室内定位系统的协议，它可以以指定频率广播自身信号，信号本身带有设备的数据帧，只要手机设备支持解析这个数据帧，处于ibeacon信号广播范围的手机设备可以接收到这些数据信息，详细介绍请点击这里。 小程序ibeacon API提供的数据信息包含以下部分： UUID 设备的唯一通用标识符，一般不同的厂商不同的批次，这个编号也不一样，具体是设备厂商自己设置 Major 设备的主ID，这个一般代表设备的型号，同一批次的ibeacon设备，这个编号一般也一样 Minor 设备的次ID，每隔设备的这个编号都不同，一般用来指代唯一性 Accuracy 设备的距离，单位为米 Rssi  接收到的设备信号强度 设备就是联系供应商提供的，价格是45到60左右，成本非常低，就是这个小白盒子： [图片] 首先，因为活动的举办地点是在商场，可以预见的是，商场本身会有些商家会部署ibeacon设备来做活动营销(微信摇一摇)，所以如何保证小程序接收到的ibeacon设备信息就一定是我们部署的ibeacon设备发射出来的呢？答案就是通过上面提到的Major。 收到设备后，我们首先设置这一批ibeacon设备的Major为我们特定的数字，在接收到的ibeacon信息后过滤掉不是我们制定Major号的设备信息即可。通过在数据库绑定打卡地点和设备Minor的关系，玩家手机接收到ibeacon设备的信号的时候，就可以通过接收到设备的Minor号判断玩家当前是在哪个体验点。坑爹的是，设备的厂家在出厂这些设备的时候，每个设备的Major和Minor号都是随机，幸好网上有很多ibeacon设备信息查看更改软件，推荐使用  “摇一摇助手”，app store和安卓应用商店都可以下载。 [图片] ibeacon踩坑 1、通常市面上的ibeacon设备是可以设置ibeacon设备的广播频率的，默认一般是500ms。为了提升感应玩家当前所在的地点的精度，我们会去调高ibeacon设备的广播频率。设备的广播频率是可以通过专门的ibeacon设置软件调整(PS：会导致设备更加费电，但是现在的ibeacon设备基本都可以用个好几年，如果不是长期使用的话，可以不care这个)，但是小程序ibeacon API读取设备广播信息的频率是系统控制，也就是说，其实我们调整设备的广播频率是起不到作用的，因为最终读取ibeacon的广播信息频率是由系统所决定的，请教过微信的同学，安卓的是500ms，iOS 这边跟着系统走，目前观测是 1秒1次。 [图片] 2、接收ibeacon信息的API需要在wx.startBeaconDiscovery成功的回调中调用才能拿到ibeacon的设备信息。 [代码]wx.startBeaconDiscovery({ uuids: ['B9407F30-F5F8-466E-AFF9-25556B57FE6D'] // ibeacon uuid }).then((res) => { wx.onBeaconUpdate(() => { console.log('onBeaconUpdate') wx.getBeacons().then((res) => { let beacons = res.beacons, len = beacons.length, i = 0, nearbyBeacons = [], if (len === 0) { return } for (; i < len; i++) { if (beacons[i]['major'] !== 700) { continue } else { if (beacons[i]['accuracy'] > 0 && beacons[i]['accuracy'] < 8) { // 读取周围ibeacon设备的精度，可根据现场情况动态调整 nearbyBeacons.push(beacons[i]['minor']) } } } let _nearbyBeaconsResult = that.data.nearbyBeaconsResult if (_nearbyBeaconsResult.length >= 4) { _nearbyBeaconsResult.shift() } _nearbyBeaconsResult.push(nearbyBeacons) that.setData({ nearbyBeaconsResult: _nearbyBeaconsResult }) }) }) }) [代码] 在实际的开发过程中，我们发现，少数ibeacon设备的信息读取到的距离信息(accuracy)会出现负数，这个是因为之前提到的设备的广播频率的原因，如果在小程序内接收到设备的广播信息恰好出现在设备的广播周期之外，那么这个设备的的信息其实算作没读取到。为了规避这个问题，我们设置一个数组，这个数组存储最近4次接收到的ibeacon数据，按照一般ibeacon的广播频率的话，也就是2s的时间内，接收到的ibeacon设备信息。同时，我们在线下会针对体验点的区域的大小的不同，部署不同数量的ibeacon设备，这样可以大大的降低玩家接收不到ibeacon信息的概率。 现场方案执行 最基础的技术方案也想对容易实现一些，但是往年的线下活动的经验告诉我们，问题往往不是出现在实现的技术方面，我们需要考虑的往往是一些非技术侧的问题： 1、现场地形复杂，在什么地方部署ibeacon设备才算合适呢，不同的展区部署多少个点才算合适？ 2、ibeacon的信息接收需要依赖蓝牙，玩家的手机因不明原因无法开启蓝牙或蓝牙功能失效了，如何处理？ 第一个问题，我们在活动开始的前一个多礼拜，就带着我们做好的小程序测试版本去到了活动举办地成都环球中心进行了测试。 [图片] 实地的测试主要是对每个体验点的区域进行确定，再根据体验点的大小来决定需要放置多少ibeacon设备。 第二点在有了去年的经验，其实处理起来也有成熟的方案可以去执行。TGC的每个线下体验店会有我们Part Time(场馆负责人)，还会有全场的巡视人员，我们只需要做一套后备方案，在少数玩家因设备问题无法打卡时，让现场我们的工作人员赋予玩家特殊的权限，可以让玩家不需要因设备的限制进行打卡即可。所以，我们做了一套玩家扫码打卡的后备方案，在活动开始之前，我们给予管理员特殊权限，它们可以在小程序的管理端选择打卡点二维码，玩家扫一扫即可完成定位打卡，当然每个小程序二维码只能够用一次，剩下的工作就是和现场的Part time进行培训。 [图片] 小程序云 这次活动的开发排期十分紧张，后台的开发人力又无法及时跟进项目，所以这次的整个活动的开发我们十分大胆的尝试了小程序云。其实在小程序云内部测试的时候，我们就已经有预研过小程序云。 小程序云提供了云存储、云函数和数据库，提供了较为完整的云端支持，还搭配了一套基础运维体系，开发者无需关心服务器搭建和代码部署。关于一些基础的类似云函数提供了鉴权的内容啥的，这里受限篇幅也就不再阐述，可自行查看开发者文档，这里讲下我在开发过程中的小总结吧。 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、小程序云的局限性 小程序云暂时还不支持数据外部调用，所以，如果运营人员需要有很强的数据配置和数据管理的功能的话，小程序云想对做起来会很吃力(预计是年后会支持，大赞小程序云的团队)。而且，我们暂时还只能使用其提供的几项能力，如果我们想继续扩展我们的应用且需要在服务器上部署一些其他的服务的话，在小程序云上暂时还是做不到的。小程序云的数据库查询支持还是较为基础的，一些例如在关系型数据库常见的连表查询啥的还不支持，所以在做一些复杂的查询的时候，为了效率通常需要再一个数据库集合中增加一些冗余字段。 感觉小程序云还有很大的发展潜力，后续这些功能应该都会逐步的开放出来，相信小程云也会变得越来越强大。 线上结合线下ibeacon的优势 1、统计当前玩家所在的区域，绘制全场的玩家分布热力图，及时做好访问量较低的现场场馆引导。 [图片] 2、成本极低。成都环球中心在周末高峰时段是可以达到5~6w的人流量，在那么大的人流量下，我们也只需要在现场近20个体验点布置将近100个设备，就能覆盖我们全部的打卡体验点，按照每个设备本身价格近45元算，整个总成本可想而知。而且设备本身可以回收继续再利用，技术方案也是可以继续复用。 总结 今年是参与TGC小程序开发的第二年了，这种线下的项目最大的挑战在于需要对接的需求方非常之多，涉及到线上、线下、供应商等等多个角色。在开发周期如此紧张的情况下又需要同时兼顾前后端开发情况，对于个人来说是个非常大的挑战，但也是一个非常好的锻炼机会。有了去年TGC小程序的参与经验，今年在线下的部分也较为顺利的执行下去，但是也还是出现了一些线下培训细节没有勾兑清楚地额沟通问题。接下来，我也会写一篇开发线下项目的经验分享，也非常欢迎和期待各位小伙伴与我们在小程序上有更多的交流合作和技术探讨。

为了便于用户便捷使用App、网站、移动端网页、小程序的服务，微信提供不同的技术方案，便于开发者在不同终端平台的服务中接入微信登录。 通过这个教程，开发者可以了解平台提供的针对各终端平台的微信登录能力，并可以根据实际使用场景合理选择接入方式。 以下为几类型微信登录的功能说明： 类型授权域/接口 用户侧使用流程 接入流程 App 接入微信SDK，并调用snsapi_userinfo （1）在App内选择使用微信登录 （2）拉起微信客户端，打开用户授权页，完成登录授权（1）注册微信开放平台（open.weixin.qq.com）帐号，并完成开发者资质认证 （2）申请【App移动应用】并审核通过后可以使用，查看开发文档网站应用 snsapi_login （1）用户使用微信“扫一扫”，在PC端扫码 （2）客户端打开授权页，完成登录授权 （1）注册微信开放平台（open.weixin.qq.com）帐号，并完成开发者资质认证 （2）申请【网站应用】并审核通过后可以使用，查看开发文档 微信客户端内H5使用公众号的登录能力： snsapi_base snsapi_userinfosnsapi_base：静默授权 snsapi_userinfo： （1）用户在H5内点击登录，唤起授权弹窗 （2）用户侧完成登录授权（1）注册微信公众号，选择“服务号”类型，并完成微信认证 （2）在公众号管理后台设置回调域名 （3）接入微信登录能力，查看开发文档 小程序wx.login wx.getUserInfowx.login：静默授权，开发者可获取openid wx.getUserInfo： （1）用户在小程序内点击组件，唤起登录窗口（2）用户侧完成登录授权 （1）注册小程序 （2）接入微信登录功能，查看开发文档，查看登录流程设计指引 开发者在不同使用场景下接入微信登录，应该注册符合要求的帐号并使用对应的登录能力。 【常见问题】 Q1： 在调用微信登录时，出现了“此帐号并没有这些scope的权限，错误码：10005”，是什么原因？ A：对于场景与帐号属性、能力项不对应时（如在移动端网页中使用网站应用的AppID调用登录能力），将会出现以下的错误提示：此帐号并没有这些scope的权限，错误码：10005 [图片] Q2：我的服务同时有App、官网、公众号、小程序，那我怎么打通用户数据？ A：对于多平台的服务，若开发者希望能识别用户身份，例如：希望用户在小程序内也能查看到在App内购买的商品订单，则可以通过平台提供的UnionID机制来实现用户身份识别。

为帮助开发者优化小程序内用户登录体验，平台将逐步回收线上版本使用 wx.getUserInfo 接口直接弹出授权框的能力，调整详见《小程序与小游戏获取用户信息接口调整》。 以下为设计小程序内微信登录流程的几点建议： 01 在必须用到登录信息的环节引导用户登录 在用户必须登录时才引导用户登录（如：购买前需要获取会员信息，用于同步积分数据），而不是用户一进入小程序就弹窗要求用户授权。 在用户对当前小程序服务还未了解时，弹框获取用户信息，会使得一部分用户点击“拒绝”按钮，影响登录转化率。 [图片] 02 清晰、准确地引导用户登录 在登录页面中，清晰、准确地告知用户当前操作是登录，说明获取登录信息的目的（如：用于同步会员积分数据等） [图片] 03 不强制用户必须使用微信登录 除微信登录外，建议开发者提供游客登录模式，保证用户在拒绝授权头像和昵称信息后仍可使用小程序。 如要求必须授权头像昵称等信息才能继续使用小程序，会导致某些用户放弃使用该小程序。 [图片] 04 设计上兼容登录弹窗 如需获取用户头像、昵称等信息，会弹出登录弹窗引导用户授权，请开发者在交互设计上兼容弹窗，避免出现多个弹窗叠加、重复提示等不好的体验。