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

96s4-fxzkfvn0997448
我是一名 Android 开发程序员,以前没有接触过前端开发,直到接手了公司的小程序项目,才开始逐渐接触前端领域。
小程序学起来还是很快的。对于有编程经验的人,看着示例代码,对照着官方文档,几天就能上手了。
而且,自从接触了小程序,我也一直想做一个自己的东西。在机缘巧合之下,「碰词 er」的小程序就这样诞生了。

下面,我将与大家分享我的小程序开发的点滴。
「碰词 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.encryptedData 和res.iv 传给后台解密。
加密方式和 userInfo 是一样的,所以可以用同一个接口解密。解密后的 openGId 就是我们要的群 ID。
至于从微信群进入的情况,我们需要对 app.js 的 onLaunch 方法动手。
在 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
这就会导致列表项目过少时,会意外隐藏按钮,而且就不会再显示了。
我的解决方法是,先判断列表是否可被滚动,不可滚动的情况下不隐藏按钮。
最后的话
刚开始,在没有推广、我身边的人都不愿意玩的情况下,每天都会有一两百个新用户。
在上次知晓程序推荐过后,现在居然每天有一两千个新用户!流量费都快给不起了,非常感谢大家的捧场。
最后,还是要感谢我家宝宝做了这么好看的设计图。

移动信息化交流QQ群:一号群:211029692 二号群:344692795 CIO交流群:316076815(需认证)

移动化问答社区:wenda.yidonghua.com



1 星2 星3 星4 星5 星 (还没有打分,快来打分吧!)
Loading...
 
已有 0 条评论
返回顶部

无觅相关文章插件,快速提升流量