# 微信，我小鸡忍你很久了…… \| 开发

- 作者：刘凌歌
- 发布时间：2018-03-31 16:00
- 原文：https://www.ifanr.com/minapp/996144

![](https://s3.ifanr.com/wp-content/uploads/2018/03/jiujiujiu.jpg)

**知晓程序注：**

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

### 吐槽 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：突如其来的卡顿让人措手不及

![](https://s3.ifanr.com/wp-content/uploads/2018/03/jt.png)

Swiper 组件卡住，怎么破？

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

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

![](https://s3.ifanr.com/wp-content/uploads/2018/03/zj.png)

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

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

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

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

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

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

如果你是小程序插件开发者，请不要错过这里：知晓程序推出[首个「插件市场」](https://mp.weixin.qq.com/s/yXPa3DZg7SCYAHMu7fmggg)，免费为开发者提供插件的展示与交易服务，让优秀的插件快速对接用户。

![](https://s3.ifanr.com/wp-content/uploads/2018/03/123-2.jpg)

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

不能读 DOM，接口又这么少，怎么实现富文本编辑啊？！

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

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

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

![](https://s3.ifanr.com/wp-content/uploads/2018/03/fwb.png)

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

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

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

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

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

![](https://s3.ifanr.com/wp-content/uploads/2018/03/gx.png)

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

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

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

![](https://s3.ifanr.com/wp-content/uploads/2018/01/qrcode.gif)