• QQ空间
  • 收藏

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

| 2020-07-28

我是一名 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(需认证)

2020-09-18
网络安全 5年将投入20亿美元!美国多措施并举 发力人工智能
自动化机器人、无人驾驶、远程医疗……在发展人工智能领域上,世界多国都十分重视。 为确保在人工智能时代“领头羊”地位,美国通过强化政策支持、推动国会立法、加大研发... <详情>
2020-09-18
网络安全 换汤不换药,STO=非法金融活动。段叔12月2日行情分析
北京市地方金融监督管理局局长霍学文在演讲中告诫STO(证券型代币发行)从业者,如果在北京开展活动,政府将视同非法金融活动予以驱离。同时区块链、法学研究专家、中央... <详情>
2020-09-18
网络安全 到处都要“刷脸”,哪里有隐私可言?
本文转载自全球人工智能科学研究院,作者为初心,原标题《人脸识别安全遭质疑,泄露的数据及其黑产业链何时制止?》。亿欧智慧城市对文章进行二次编辑,供读者参考。 先... <详情>
2020-09-18
网络安全 纪录片《伊犁河》荣获“第25届中国电视纪录片系列片十佳作品”
由中国电视艺术家协会、中国视协电视纪录片学术委员会举办的“第25届中国纪录片十佳十优作品及优秀栏目、年度频道、年度人物推选活动”近日举行... <详情>
2020-09-12
网络安全 区块链与新零售
区块链是适应的新零售环境下的必然产物,发展趋势必然迅速蔓延整个零售行业,尤其是电商行业。 互联网时代,新零售环境的出现,零售模式风云变化,稍有风吹草动,商业模... <详情>
2020-09-12
网络安全 坚定技术信仰 百度任命AI领军人王海峰为集团CTO
  新华网北京5月31日电(凌纪伟)百度今日宣布任命高级副总裁王海峰为百度集团首席技术官(CTO),并继续担任AI技术平台体系(AIG)和基础技术体系(TG)总... <详情>