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

我是一名 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 。

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

接龙列表页面

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

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

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

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

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

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

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

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

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

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

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

浮动按钮

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

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

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

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

所以，这个功能可以这样实现：

是不是很简单呢？最后的效果还不错：

但是这里面有两个坑。

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

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

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

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

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

最后的话

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

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

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