当前位置: 首页> 小程序

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

发布时间:20-01-14

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

下面,我将与大家分享我的小程序开发的点滴。 「碰词 eйr」┆┇的起源 有一天,和我家宝宝玩成语接龙,突然觉得这个东西挺⊙有意思,也许可以做一个小程〨序。 有了这个想法,我就琢磨了两天,大概想做成这样: 接龙可以有「所有人可参与」、「指定群成员参与」等类型。 不校验所填的词是不是成语,否则就无法使用「印贼做父」了。 字词前后的读音,还是要校验一下的。 不校验成语,难免会有人乱填,所以每条成语可以赞,也可以踩。 在有一定数据量后,可๑以增加排行榜。 除此之外,还有两件比较棘手的事:给小程序起个名字,以及小程序的界面设计。 有关小程序的名字,我想过很多,像什么「成语接龙吧」、「接下去」、「接吧」、「接一个」…… 这时候,我家宝宝说:「low 爆了,叫『碰词』,碰也有接的意思,成语也是个词嘛。」 当时一听,我ы立刻就去注册这个名字,然而,这种名字居然有人先想到了!最后,我决定用「碰词 er」这个名字。 有关于界面设计,随便放两张设计图。美如画啥的,就不说了:

获取用户信息 现在大部分的小程序都是一打开,就弹Ж出用户信息授权框,有的甚至强制需要授З权才可使用。 我之前做的一个也是需要拿到unionId去登录才能使用的,为Ⅱ此我还写过一篇文章说明如何实现。 但显然,微信认为这是一个很不好■的体验。在用户没有接触你的小程序之前,凭什么要信任你,将自己的用户信息暴露给你。Ё 为了规范用户信息的获取,官方发布了一篇《获取用户信息方案介绍》的文章(FAQ ✿。✿里面有两个问题还是我提的),里面详细地描述了获取用户信息的正确实践。 刚好,我也可以拿这个小程℃序来实践一下。 首先,我们需Ю要明确什么情况下需要用到用户信息。 在这个小程序里,用户信息需要显示在发布的成语旁,所以在创Ⅴ建接龙或者发送成语之前,需要先获取到用户信息。 如果你只是进来看看,是不需要你任何授权的。只有点击了创建接龙的按钮,或者发送成语的按钮,才会要求授权,弹出授权提示框。 我是这样做的:没有用户信息时,设置button组件的open-type属性为getUserIn?fo,点击会触发用户信息的获取。 如果小程序里已经有用户信息了,则是一个普通的跳转按钮。 判断逻辑并不复杂,使用 WXML 提供的wx:if特性,就可以做到℅。

当用户确定授权,可以在biΨndgetuserinfo绑定的方法里,用e.detail.userInfo拿到用户信息。 但还有个问题:open-type="getUserInfo"这个特性,需要基础库版本高于 1.3.0 才能用。 如果可以,最好还是做一下低版本兼容处理。 Ⅹ 关注「知晓程序」微信公众号,回复「用户信息」,查看小程序获取用户信息的最佳实践。 群能力 目前,小程序已经支持获取到微信群的群 ID 和显示群名。 当用户创建的接龙类型是指定群成员参与时,指定的群就是第一个转发到的群。而成员也只有通过这个群的分享进入小程序,才可参与接龙。 下面,我所说的这些情况,都是如何获取到群 ID 的。 在可分享的页面,调用wx.showShareMenu()显示转发按钮。添加onShareAppMes◈sage方法,并在里面设置分享信息:

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

这里和getUserInfo一样,微信返回的数据是加密的,需要将res.e▲ncryptedData和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-v►iew的情况下,页面触底会触发onReachBotηtom方法,滚动会触发onPageScroll方法。 所以,▫这个功能可以这样实现:

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

但是这里面有两个坑。 首先,这个实现效果在开发工具上没什么问题。但在真机上,列表到达底部触发onReachBottom之后,居然还会同时触发onPageScroll。 我的做法是,在onReachBottom之后的三百毫秒内,不显示按钮。 另外,在列表高度不满屏幕高度时,向上滑动列表,也会触发onReachBottom,但是不会触发onPЯageScroll。 这就会导致列表项目过少时,会意外隐藏按钮,而且就不会再显示了。 我的解决方法是,先判断列表是否可被滚动,不可滚动的情况下不隐藏按钮。 最后的话 刚开始,在没有推广、我身边的人都不愿意玩的情况下,每天都会有一两百个新用户。 在上次知晓程▕序推荐过后,现在居然每天有一两千个新用户!流量费都快给不起了,非常感谢大家的捧场。 最后,还是要感谢我家宝宝做了这么好看的设计图。◀

移动信息化交流QQ群:一号群:21102969εїз2 二号群:344692795 CIO交流群:316076815(需认证)

上一篇: 【seo网络培训】新手seo每天要坚持的十项工作
下一篇: 竞选美国总统,从“肢解”苹果、谷歌开始