开发 | 一个 Android 开发者的小程序开发之旅

文 | Southbox

我是一名 Android 开发程序员,以前没有接触过前端开发,直到接手了公司的小程序项目,才开始逐渐接触前端领域。

小程序学起来还是很快的。对于有编程经验的人,看着示例代码,对照着官方文档,几天就能上手了。

而且,自从接触了小程序,我也一直想做一个自己的东西。在机缘巧合之下,「碰词 er」的小程序就这样诞生了。

下面,我将在知晓程序(微信号 zxcx0101),与大家分享我的小程序开发的点滴。

关注「知晓程序」公众号,在微信后台回复「开发」,获取小程序开发技巧精选文章。

「碰词 er」的起源

有一天,和我家宝宝玩成语接龙,突然觉得这个东西挺有意思,也许可以做一个小程序。

有了这个想法,我就琢磨了两天,大概想做成这样:

  • 接龙可以有「所有人可参与」、「指定群成员参与」等类型。
  • 不校验所填的词是不是成语,否则就无法使用「印贼做父」了。
  • 字词前后的读音,还是要校验一下的。
  • 不校验成语,难免会有人乱填,所以每条成语可以赞,也可以踩。
  • 在有一定数据量后,可以增加排行榜。

除此之外,还有两件比较棘手的事:给小程序起个名字,以及小程序的界面设计。

有关小程序的名字,我想过很多,像什么「成语接龙吧」、「接下去」、「接吧」、「接一个」……

这时候,我家宝宝说:「low 爆了,叫『碰词』,碰也有接的意思,成语也是个词嘛。」

当时一听,我立刻就去注册这个名字,然而,这种名字居然有人先想到了!最后,我决定用「碰词 er」这个名字。

有关于界面设计,随便放两张设计图。美如画啥的,就不说了:

获取用户信息

现在大部分的小程序都是一打开,就弹出用户信息授权框,有的甚至强制需要授权才可使用。

我之前做的一个也是需要拿到 unionId 去登录才能使用的,为此我还写过一篇文章说明如何实现。

但显然,微信认为这是一个很不好的体验。在用户没有接触你的小程序之前,凭什么要信任你,将自己的用户信息暴露给你。

为了规范用户信息的获取,官方发布了一篇《获取用户信息方案介绍》的文章(FAQ 里面有两个问题还是我提的),里面详细地描述了获取用户信息的正确实践。

刚好,我也可以拿这个小程序来实践一下。

首先,我们需要明确什么情况下需要用到用户信息。

在这个小程序里,用户信息需要显示在发布的成语旁,所以在创建接龙或者发送成语之前,需要先获取到用户信息。

如果你只是进来看看,是不需要你任何授权的。只有点击了创建接龙的按钮,或者发送成语的按钮,才会要求授权,弹出授权提示框。

我是这样做的:没有用户信息时,设置 button 组件的 open-type 属性为 getUserInfo,点击会触发用户信息的获取。

如果小程序里已经有用户信息了,则是一个普通的跳转按钮。

判断逻辑并不复杂,使用 WXML 提供的 wx:if 特性,就可以做到。

当用户确定授权,可以在 bindgetuserinfo 绑定的方法里,用 e.detail.userInfo 拿到用户信息。

但还有个问题:open-type="getUserInfo" 这个特性,需要基础库版本高于 1.3.0 才能用。

如果可以,最好还是做一下低版本兼容处理。

关注「知晓程序」微信公众号,回复「用户信息」,查看小程序获取用户信息的最佳实践。

群能力

目前,小程序已经支持获取到微信群的群 ID 和显示群名。

当用户创建的接龙类型是指定群成员参与时,指定的群就是第一个转发到的群。而成员也只有通过这个群的分享进入小程序,才可参与接龙。

下面,我所说的这些情况,都是如何获取到群 ID 的。

在可分享的页面,调用 wx.showShareMenu() 显示转发按钮。添加 onShareAppMessage 方法,并在里面设置分享信息:

getShareInfo 方法里,我们需要获取到分享目标群的信息,现在能获取到的只有群 ID。

这里和 getUserInfo 一样,微信返回的数据是加密的,需要将 res.encryptedDatares.iv 传给后台解密。

加密方式和 userInfo 是一样的,所以可以用同一个接口解密。解密后的 openGId 就是我们要的群 ID。

至于从微信群进入的情况,我们需要对 app.jsonLaunch 方法动手。

onLaunch 方法里可以获取到一个场景值,它区分了各种进入小程序的场景。其中的 1044 场景,就是带 shareTicket 的小程序卡片。

也就是说,当场景值为 1044 时,我们就可能获取到携带的 shareTicket

之后,我们再对这个 shareTicket 进行解密,获取 openGId,判断用户是否可参与这次接龙。

接龙列表页面

从设计图可以看到,新的成语在成语接龙列表的底部,类似微信聊天中,新消息都在屏幕下方的效果。

但是,列表都是默认置顶的,用户进入一个接龙,很有可能需要划很久才能到最新一条接龙。这下该怎么办?

其实很简单,利用 scroll-view 组件的 scroll-into-view 属性,就可以轻松定位到最新一条接龙。

需要注意的是,ID 值不能以数字开头。但我的元素 ID 就是数字开头的怎么办?

那就在原来的元素 ID 前面,随便加个字母就好。

切记,item 的 ID 属性前,也要记得加相同的字母。

在获得页面数据并且 setData 之后,我们就可以将列表定位到底部:

在这里,我设定了一个延时。这是不可少的,因为页面渲染需要点时间,页面载入就立刻加载数据的体验并不好。

而且,不同类型、品牌的手机,所需要的渲染时间还不一样。看过几台手机,300 毫秒是比较合适的。

如果要实现滑动到顶部,进行「加载更多」的操作,可以用上 bindscrolltoupper 这个属性。当屏幕滑动到顶部时,这个属性所绑定的事件就会被触发。

获取更多数据之后,将 toView 设置为新获取到的列表最后一项的 ID。

浮动按钮

首页右下角的按钮很漂亮,但是它会对页面造成一定的遮挡。

在 Android 开发里,有一个叫 FloatActionButton 的控件,当列表滚动时,这个控件可以向下移动隐藏。我尝试在小程序里实现类似的效果。

我觉得遮挡其实只对列表最底部有影响,所以当列表滚到底部时隐藏就好了;在底部重新发生滚动时,再重新显示按钮。

我们都知道,在不使用 scroll-view 的情况下,页面触底会触发 onReachBottom 方法,滚动会触发 onPageScroll 方法。

所以,这个功能可以这样实现:

是不是很简单呢?最后的效果还不错:

但是这里面有两个坑。

首先,这个实现效果在开发工具上没什么问题。但在真机上,列表到达底部触发 onReachBottom 之后,居然还会同时触发 onPageScroll

我的做法是,在 onReachBottom 之后的三百毫秒内,不显示按钮。

另外,在列表高度不满屏幕高度时,向上滑动列表,也会触发 onReachBottom,但是不会触发 onPageScroll

这就会导致列表项目过少时,会意外隐藏按钮,而且就不会再显示了。

我的解决方法是,先判断列表是否可被滚动,不可滚动的情况下不隐藏按钮。

最后的话

刚开始,在没有推广、我身边的人都不愿意玩的情况下,每天都会有一两百个新用户。

在上次知晓程序推荐过后,现在居然每天有一两千个新用户!流量费都快给不起了,非常感谢大家的捧场。

最后,还是要感谢我家宝宝做了这么好看的设计图。

「碰词 er」小程序使用链接

https://minapp.com/miniapp/3952/

本文分享自微信公众号 - 知晓程序(zxcx0101)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-08-24

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

左右用R右手Pyhon系列——趣直播课程抓取实战

本文将以趣直播课程信息数据抓取为例,展示如何使用RCurl进行结合浏览器抓包操作进行简易数据抓取。 library("RCurl") livrary("XML"...

36170
来自专栏练小习的专栏

使用自定义标记来构建页面

在用html5来搭建页面的时候,为了兼容不支持html5标记的浏览器,需要把html5标记全部createElement一遍。

24560
来自专栏DeveWork

jQuery Builder:jQuery 库的精简之道

最近在做一个手机主题,为了用上看似华丽的Ajax 特效,不得不用上jQuery(不要问我为什么不用原生js,要是我会写就不用那么费劲了)。但众所周知Jquery...

28670
来自专栏李成熙heyli

性能优化三部曲之二——通用纯前端优化首屏时间

背景: 对构建的改造已经完成,目前构建的能力可以较为灵活地支撑进一步的优化 希望进一步减少首屏时间,将首屏时间控制在2秒以内 页面情况: 优化之前,并没有上报...

40390
来自专栏纯洁的微笑

谈谈我与 Intellij IDEA 的故事

说到这款 IDEA,很早就想写一篇关于它的文章了,可不知从何处写起,刚好一位师弟问起我来,正好写一篇入门文章,本文的涉及的快捷键主要针对于 Windows系统「...

11920
来自专栏子勰随笔

前端开发中常用资源收集(网站小图标、css、js 框架等)

92350
来自专栏Python、Flask、Django

有没有什么好看的网址,想爬点东西做个可视化

20020
来自专栏向治洪

关于React Native项目在android上UI性能调试实践

我们尽最大的努力来争取使UI组件的性能如丝般顺滑,但有的时候这根本不可能做到。要知道,Android有超过一万种不同型号的手机,而在框架底层进行软件渲染的时候是...

37150
来自专栏QQ音乐技术团队的专栏

React v16 新特性实践

我们在对以上新特性经过一段时间的使用过后,通过本文进行一些细节分享和总结。

76980
来自专栏FreeBuf

捆绑安装浏览器:技术剖析搜狗输入法中的猫腻

不知道从什么时候开始,上网变成了搜狗浏览器。卸载后,过几天又莫名其妙安装上。搜狗也算是名门正派,竟然会用这么恶劣的手段捆绑软件!这么做跟病毒有什么区别?! 专门...

27480

扫码关注云+社区

领取腾讯云代金券