如何在微信群 PK 步数?他做的小程序,比微信运动更好用 | 晓组织 #10

这里是「晓组织」的第 10 期。

本期的分享嘉宾是「即刻运动排行榜」的开发者龚乘伟。

大家好,我是龚乘伟。现就职于美的电商,是一名前端开发工程师,也是一名去年的应届毕业生。

我从小就对互联网充满了无限好奇,现在仍保持对互联网新技术的热爱,生活中是个爱玩,爱健身的程序猿。

作为互联网新人,我很荣幸在知晓程序(微信号 zxcx0101)分享自己独立开发这款「即刻运动排行榜」小程序的心得。

在此,特别感谢在版本迭代优化的过程中,Lord 哥和组内同学的建议以及帮助。

「即刻运动排行榜」可以与微信群友进行步数 PK,还可以和群友并肩作战组成联盟,与其他群进行步数 PK。

主要功能:

  • 群内动态:群内步数 PK/点赞数 PK。
  • 群间动态:群间总步数 PK/平均步数 PK。
  • 群设置:群头像、昵称、群健康步数以及群简介。

亮点:

  • 入口便捷化:从分享的小程序卡片进入或分享到任意群,都可以直接参与 PK。
  • 个性化设置:每个群均可设置专属的头像、昵称、健康步数。

灵机一动,一款小程序诞生了

首先,介绍一下开发这款小程序的原因。

1. 兴趣使然

我始终认为,一个优秀的程序猿想要拥有敏捷的头脑,首先得有一副健康的身体。

因此,我每天都会抽 1 个小时时间进行健身,慢跑是个人比较喜爱的运动,而本人很长时间的乐趣,就是霸占微信运动封面,这种感觉爽爽哒~

2. 解决痛点

微信运动的排行榜相信也有不少人玩过,时不时给感兴趣的人点上个赞,表示朕已阅,也是一种社交。

但是!微信运动解决不了以下两个痛点:

  • 无法进行群内 PK,享受不了与群友同群竞技的快感。
  • 无法进行群间 PK,享受不了与群友并肩作战的乐趣。

3. 灵感突现

我一直有在关注微信小程序的最新动态,对小程序持看好状态,但是觉得目前小程序的使用场景一直没有被激活。

小程序推出微信运动接口的第一时间,灵机一动,就想做一款步数有关的小程序,结合想要改进微信运动的部分,于是有了微信群+微信运动结合起来的灵感。

小程序提供的微信群的接口可用于获取对应群的群 ID,主要在以下两个场景获取:

  • 分享小程序到某个群聊时,可拿到 shareTicket,再通过 wx.getShareInfo() 获取群 ID。
  • 用户从分享到群聊的小程序卡片进入时,可拿到 shareTicket,再通过 wx.getShareInfo() 获取群 ID。

这里第二个场景,「王者荣耀群排行」就有应用到。而拿到了群 ID 之后,就可以对已有 API 进行一些结合。

「即刻运动排行榜」就结合了微信运动 API,通过 wx.getWeRunData() 获取其微信运动步数。

因为用户的微信运动数据是个人隐私数据,小程序要求必须在用户进行授权后才能获取,所以最好要考虑到用户拒绝授权的场景。

这里可以利用新接口 wx.authorize() 和 wx.openSetting() 进行兼容处。

wx.authorize() 接口的功能是:部分接口需要获得同意后才能调用。

此类接口调用时,如果用户未授权过,会弹窗询问用户,用户点击同意后方可调用接口。如果用户点了拒绝,则短期内调用不会出现弹窗,而是直接进入 fail 回调。

于是,我们就可以在 fail 回调里,通过调用 wx.openSetting() 来引导用户去授权。这样一来,万事俱备只欠东风,一款专属于群的微信运动排行榜萌芽就这样诞生了。

作为行动派,说干就干,端午节的前三天启动开发,端午节后提交第一版审核,之后的一周内,优化了两个版本,到 6 月 5 号,较为完善的线上版本诞生啦~撒花~~

为什么是小程序?

1. 前期经验积累

从去年 10 月末微信推出小程序后,公司马上成立了小程序项目组,作为项目组成员,从头到尾跟进了「美的官方商城」小程序:从最初的产品设计到开发、到后期的测试,一直到最后的发布。

这过程不仅激发了我对小程序的兴趣,也让我积累了了一些经验,下面 PO 几张成果图~

2. mvvm 框架

在工作过程中,期间接手过一些 vue.js 的项目,对 mvvm 框架比较熟悉,而小程序也采用了 mvvm 思想,因此采用小程序作为开发平台更易出成果。

3. 小程序 API 的支持

前段时间,小程序 API 推出了两大新能力:

结合这两大新能力,能够打造出现有 app 无法满足的用户痛点。

关注「知晓程序」微信公众号,在后台回复「新能力」,获取小程序新能力全解读。

现在留的泪,都是开发时踩的坑

1. 图片显示兼容 Bug

在群设置里选择图片后, 标签的 background-image 在部分 iOS 真机上无法显示 wxfile 临时路径的图片,但 image 可以显示这种临时路径,却不能正常显示 http 链接的图片。

为了解决这个问题,我采取了一种兼容的方式,设定了一个标记变量,用 wx:if 来切换,如果是临时路径则用 image 来显示,否则用 view 来显示,如果有更优的方案请告诉我~

2. 滑动卡顿 Bug

iOS 在滑动列表的过程中,部分机型会卡顿,加上 -webkit-overflow-scrolling: touch; 属性得以解决。

3. 群 ID 接口坑

在这里有个坑就是从分享到单聊的小程序卡片进来获取到的 scene 值也是 1044 与群聊卡片相等,没法做场景的区分。

最后,只好在 wx.getShareInfo() 的 fail 分支里做出相应处理。

突然想到一句很土的话,有人就有江湖。这里我想说,有用户就有场景。

其实群 ID 接口还有很多场景可以去发掘。

关注「知晓程序」微信公众号,在后台回复「点评」,获取大众点评点餐小程序开发全教程。

产品迭代计划

历史总步数成就解锁、个人/群运动曲线记录、PK 成就解锁、竞技擂台战等玩法所需要的技术支持,正在不断探索中。

最后的最后,要谢谢支持「即刻运动排行榜」这款小程序的用户们,作为个人兴趣使然开发的小程序,从最初的 v1.0.1 版到现在的 v1.0.4 版,开发历经 15 天。

截止到 6.28,整整上线一个月,现在已经累计访问次数近 6 万,累计用户数近 1 万,分享次数日均近 200 次/天。

也同样因为是个人项目,也存在着许多不足和不完善,现在的最新版已接入客服功能,希望大家有空多进来看看,诚心欢迎一切吐槽和建议!

也可以联系我的私人微信号:gcwfreedom,我在这等你哟~~

在产品迭代上,我也在研究,如何将小程序现有能力最大化地与场景有机结合,敬请期待。

关于小程序的未来:我想说,短期被高估,长期被低估,场景无处不在,只待你的发掘!

「即刻运动排行榜」小程序使用链接

https://minapp.com/miniapp/3199/

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-07-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DevOps时代的专栏

业务安全与 DevSecOps 的最佳实践

2542
来自专栏一名叫大蕉的程序员

赵淦森博士的讲座分享整理No.32

我是小蕉。 先稍微介绍一下赵老师哈。 赵淦(gan)森,计算机安全博士,毕业于英国肯特大学。在英国期间曾任英国Nexor公司的兼职高级安全技术顾问、甲骨文英国(...

2226
来自专栏大数据文摘

谷歌新产品:Music Timeline

3566
来自专栏小狼的世界

[每天五分钟,备战架构师-11]数据库系统

数据挖掘就是从大量的、不完全的、有噪声的、模糊的、随机的实际应用数据中,提取隐含在其中的、人们事先不知道的,但又是潜在有用的信息和知识的过程。

1342
来自专栏镁客网

为AR滤镜效果而战!Facebook收购计算机视觉公司Fayteq

1160
来自专栏FreeBuf

基于开源程序漏洞的攻击在2017年将增长20%

现在,无论是商业软件还是程序员自行开发的小程序,开源代码已经变得越来越普遍了,而开源似乎也已经成为了一种趋势。但需要注意的是,Black Duck软件公司的研究...

2098
来自专栏web前端教室

【完工】仿制 豆瓣电影 app beta(二)

今天小年,长话短说,先祝大家小年快乐。 然后用vueJs做的这个仿制豆瓣电影的web app,就算是搞定了,看下面的视频演示, 虽然界面依然是很简陋,但基本逻辑...

3407
来自专栏较真的前端

未来的前端工程师

2646
来自专栏互联网数据官iCDO

手把手教你用Excel分析网站流量(实例讲解)

前言:随着运营精细化发展,如何通过品牌沉淀的数据挖掘出更多优化可能,是每个运营、产品甚至技术的必修课。这篇文章将主要阐述我是如何通过发现问题、提出猜测、验证猜想...

40115
来自专栏Crossin的编程教室

【读者投稿】数据说话,Python 的就业状况如何

不少读者在学习编程之后,做了一些自己的练手项目,或者积累了一些学习经验和心得,希望可以与更多的学习者交流分享。 因此,我们决定新增一个小栏目,提供给大家一个展...

3126

扫码关注云+社区