• 媒体品牌
    爱范儿
    关注明日产品的数字潮牌
    APPSO
    先进工具,先知先行,AIGC 的灵感指南
    董车会
    造车新时代,明日出行家
    玩物志
    探索城市新生活方式,做你的明日生活指南
  • 知晓云
  • 制糖工厂
    扫描小程序码,了解更多

微信,我小鸡忍你很久了…… | 开发

小程序

2018-03-31 16:00

知晓程序注:

吐槽、吐槽……身为一个开发者,怎么可能对技术毫无感想。来吧,让吐槽来的更猛烈些!

吐槽 1:消息提示框的显示很傲娇

在开发时,我们明明设置了基础库最低限制,为什么还会报 wx.showLoading is not a function 错误?

由于不知名的原因(腾讯的锅),在一些较低版本的安卓微信客户端中,即使基础库版本已经满足要求,但还是不能执行 wx.showLoading

「小鸡词典」的解决方案:可以采用 wx.showToast 代替。icon 设置为「loading」,duration 设置成一个相对较大的数,这样就能达到和 loading 一样的效果。

wx.showToast({
    title:'正在进入鸡窝',
    icon:'loading',
    mask:true,
    duration:10000
})

吐槽 2:无法正常判断功能能否使用

由于 wx.canIUse is not a function 不能使用时,怎么判断要使用的功能是否支持?

「小鸡词典」的解决方案:对于 API 类的功能,可以使用 typeof 进行判断,比如:

// wx.showLoading 判断
if(typeof wx.showLoading==="undefined"){
    //TODO
}

如果 typeof 一个 API 是 undefined,那么说明用户当前使用的版本不支持这个 API。

不过这种方法只能验证 API 级别的东西,比如 showLoading 能不能用。至于更深层次的,比如一个 API 新增加的一个参数,则不能像原装的 wx.canIUsee> 一样去验证。

吐槽 3:突如其来的卡顿让人措手不及

Swiper 组件卡住,怎么破?

这个真的是欲哭无泪,答案是没法破!但是,我们可以想办法让用户自己动手破解。具体来说,就是增加一个「自救按钮」,类似于网游中,用户卡在地图某个位置后,可以通过回城等方式把自己救出来。

「小鸡词典」的解决方案:在「小鸡词典」中,我们在卡片的背后隐藏了一个自救提示。当用户按照提示,点击自救后,程序会重置卡片序列,这样就完成了自救的操作。用户又可以愉快的玩耍了。(方法很笨,但是不至于让用户无计可施后一走了之。)

至于代码,我们实现的方式是,设置一个全局变量 selfRescue

当用户点击自救按钮后,设置 selfRescue 为 true,然后在卡片页面的 onShow 处,判断 selfRescue 的值,如果是 true 则重置卡片序列。(这里说的重置序列,不是简单的重置 swiper 的 current 值,而是清空 swiper,重新载入卡片。)

吐槽 4:疯狂滑动的卡片伤不起

当我们需要用 Swiper 组件动态加载内容时,如何避免卡片疯狂滑动?

官方有在文档中说明,不要在 swiper 组件 bindchange 的时候,改变 current 值。所以,小鸡词典的做法是,在动态加载内容后,把新加载的内容存在一个 buffer 里(即保存在一个页面级的变量当中),然后在 bindanimationfinish 中,再加载这些数据。

虽然从逻辑上说,这种方式依然会导致疯狂滑动。但概率会小的多。至少对小鸡词典来说,改过之后,我们没再发现过疯狂滑动的现象。

如果你是小程序插件开发者,请不要错过这里:知晓程序推出首个「插件市场」,免费为开发者提供插件的展示与交易服务,让优秀的插件快速对接用户。

吐槽 5:怎么把字体搞成五彩斑斓的黑啊

不能读 DOM,接口又这么少,怎么实现富文本编辑啊?!

为了让词条卡片内容更丰富,也为了让鸡友可以更好的表达意思,所以我们希望鸡友在创建词条时可以使用富文本(即特殊格式,如加粗划掉等)。但是,由于小程序既不能读 DOM,输入相关的接口又很少,实现富文本输入/输出只能采用曲线救国的形式了。

「小鸡词典」的解决方案:既然微信不提供,于是我们就自己创造了一套标记语言。(为什么不用 Markdown?因为复杂,不便于普通用户输入)。

我们的设计是这样的,如果要输入加粗的文字,则用户输入【加粗:胖子】,看到的结果就是胖子。同理,【划掉:小程序没 bug】,显示结果为小程序没 bug。如果需要嵌套效果,则可以用逗号将格式分开,如【加粗,斜体:就是这样】,来显示就是这样

通过小鸡词典的实践,这套语言对于用户来说,接受度还是非常高的。但由于我们产品本身并没有对富文本有太多格式的要求,所以这套语言支持的范围非常有限。

至于实现方法,我们用 JS 写了一个编译器,把纯文本转换成了 JSON 格式,然后再通过 WXML 渲染出来。(我们没用官方的 rich-text 组件,因为我们做的早,换过去太费劲,还不如自己写的灵活)

吐槽 6:小程序的谜之更新策略

为了修补 bug,为了上新功能,程序猿们经过不懈努力敲代码,之后又经过漫长的等待,小程序终于审核通过,发布并上线了。但是!!!用户居然不能选择主动更新?这种操作也是醉了……

「小鸡词典」的解决方案:小鸡词典发现,只要强制关闭微信,再重新打开小程序,就有一定概率会进行自动更新。所以,我们的做法又很简单粗暴,前端提示用户有更新,并且把更新步骤告知用户。这样就可以提高用户更新的效率了。

小技巧:如果想让文本在 Modal 框中换行,可以这么操作

content: 'LINE1内容内容内容\r\nLINE2内容内容内容'
// \r\n 表示了换行

关注「知晓程序」微信公众号,回复「开发」,获取小程序开发技巧大全。

登录,参与讨论前请先登录

评论在审核通过后将对所有人可见

正在加载中