答案说-基于 mpvue 的微信小程序 技术产品设计篇

项目介绍

答案说 定位为一款娱乐小程序，旨在反转的问答给人带来快乐。

产品展示

扫描下方小程序码或在微信小程序中搜索 答案说，即可使用。

人员介绍

Jackliu：大坚，前端，伪产品、伪设计，不会做产品的前端不是好设计

项目统计

原型到设计到开发，耗时半周，跨时一周半，中间一周加班加的心力交瘁。一个人开发，也没什么好统计的项目，有空就敲代码（单身狗一直有空）

产品篇

缘起

话说某天晚上，我刷着抖音，出现几条网红答案奶茶的小视频，就萌发了灵感，可以做一款类似答案奶茶的问答小程序。于是乎，画了两页原型，对小程序做了大概的功能设定。原型地址传送门

竞品分析

同类型的产品有“答案之书”小程序，“The Book Of Answers” APP（就是很火的答案书出的 app）。对比这两款产品，都是心里想一个问题，再随机产生一个答案。当然这个问题是要封闭性地问题，答案又是那种模棱两可的答案。

通过竞品，在“答案说”的定位一定要有与之不同的买点，总结：

要有答案库可以匹配特定答案 可以分享朋友圈，可以转发小程序

针对以上，最终答案说设计的模式为 输入答案后，生成结果，提供分享截图功能，可以分享朋友圈。

加上社交功能，这个产品的好坏很大程度上取决于答案的匹配度、娱乐性。

设计篇

原型

用墨刀画了两页的原型，一页输入问题，一页呈现答案。页面很简单，然而一直在考虑呈现方式的问题。页面的跳转？过渡动画? 最后采用过渡动画方式呈现两个页面，因为小程序的页面切换是有感知的，用户体验不是很好。

logo

logo设计原则：简单背景色加文字。橘色为主题色，加黑白字体对比。自认为简洁得体。

背景图

首屏背景图一本闭合的书，截成圆形。到实际页面，一张毛玻璃效果的放大的背景图，叠加正常大小的背景图。现在还算是比较流行吧。

其他效果图

其他的图片都是在背景图及logo的基础上稍作修改。

动效设计

没有很好的工具展示动态效果，只能开发时边写边改。总体的想法是用3秒的动画来抹平绘图的时间与后台 api 交互的时间。

音效设计

中了抖音的毒，一直有个背景音围绕在耳边，又想不起是哪个，于是又刷了半天抖音，终于找到了《We No Speak Americano》，利用音频剪辑软件剪辑了两部分。一部分前奏音频在问题输入页循环播放，另一部分反转音频在答案页面播放。

开发篇

之前有过用 mpvue开发过一款 音阶学习小程序的经验，这次还是采用 mpvue，以下代码环境为 mpvue的基础上。mpvue细节可以看之前的文章

WeScale 技术篇 —— mpvue 与微信小程序的火花 当一个小团队的 Leader 开发一款小程序的实践思考分享 微音阶 技术篇 —— mpvue 微信小程序实战

微信小程序异步 API Promisify

微信的异步处理都是采用回调的方式。很容易产生回调地狱。 例如：

  wx.request({
    success: function(res) {
      wx.requset({
        success: function(res) {
          wx.request({
            // ...
          })
        }
      })
    }
  })

参考 es6-promisify 的源码，分析小程序 API 的特点：成功都是回调 success 方法，失败都是回调 fail 方法。 封装一个 Promisify的方法，对异步 API Promisify

/* 这里是重点！ */

export const wxPromisify = fn => (obj = {}) => {
  return new Promise((resolve, reject) => {
    obj.success = function (res) {
      resolve(res)
    }
    obj.fail = function (res) {
      reject(res)
    }
    fn(obj)
  })
}

使用的时候先定义 Promisify 的API，再使用，配合es7 的 async await 简直爽

const wxRequest = wxPromisify(wx.request)
const wxGetImageInfo = wxPromisify(wx.getImageInfo)
const wxDownloadFile = wxPromisify(wx.downloadFile)
const wxSaveFile = wxPromisify(wx.saveFile)

async function foo {
 try {
    var res = await wxRequest({})
  } catch (e) {
    console.error(e)
  }
}

canvas 文字换行处理

以下代码可以对英文、中文进行换行处理，传入 text 字符串，返回分割好的数组。 原理就是对中文每一个字/英文每个单词进行分割。用微信的 cavas api —— ctx.measureText() 来进行测距。 需要注意的是 微信的一个 bug, ctx.setFontSize(20)。这里只能传入数值，不能传变量！

const maxWidth = 236
function splitLine (ctx, text, type = 'cn') {
  let chatArr
  let temp = ''
  let row = []
  if (type === 'cn') {
    ctx.setFontSize(20)
    chatArr = text.split('')
  } else {
    ctx.setFontSize(14)
    chatArr = text.split(' ')
  }
  for (let i = 0; i < chatArr.length; i++) {
    if (ctx.measureText(temp).width < maxWidth) {
      temp = type !== 'cn' ? temp + ' ' : temp
      temp += chatArr[i]
    } else {
      row.push(temp)
      temp = chatArr[i]
    }
  }
  return [...row, temp]
}

canvas 绘图图片不显示问题

用微信小程序的 canvas API 进行绘图的时候经常会出现绘制的图片无法显示。或者调试器可以显示，ios无法显示等问题。 总结几点：

图片需要先加载后绘制

比如我绘制三张图片，需要等待这三张图片完全加载玩才能进行绘制。用微信的 wx.getImageInfo() API 得到图片的路径

  const wxGetImageInfo = wxPromisify(wx.getImageInfo)

  this.avatarPath = (await wxGetImageInfo({ src: avatarUrl })).path
  this.qrcodePath = (await wxGetImageInfo({ src: qrcodeUrl })).path
  this.bgPath = (await wxGetImageInfo({ src: bgUrl })).path

图片链接不能带有空格

在用到 wx.getImageInfo() API 时，一张图片链接的结尾带了一个空格，调试器、安卓都能正常显示，唯独 ios 无法显示。注意别踩坑了。

ctx.clip() 方法

ctx.clip() 方法可以对某个区域进行裁剪，我用到这个方法把头像裁剪成圆形。用的好没问题，用不好，可能出现不想裁剪的图片也被裁剪了。 注意方法的调用及 ctx.restore() 的使用。

微信小程序权限获取

微信小程序的权限获取越来越难。这里的难指的是无法做到用户无感知。 本次开发用到 获取用户信息的权限及保存图片到设备相册的权限 以下为流程图

答案生成

后端照例用 node 写的，请求问题，通过预设的答案库，返回答案。生成答案的逻辑如下图。

答案分为两种：

特殊问题的答案 模棱两可的模糊答案

通过分词提取到关键词，与特殊问题的答案库中的问题作比较得到一个匹配度最高的答案，匹配度大于等于预设阈值，返回特殊问题的答案。小于阈值，返回模糊答案。

别跟我说什么 机器学习、语义分析、人工智能。这已是能力范围内，想到最好的方法了。

小程序审核技巧

认证了五次才通过，前两次以涉及问答，不得以个人，建议以企业认证小程序。纯属扯淡，把认证记录删了，重新申请审核。

后面两次，拒绝的原因是就和前两次不一样了：分享截图不得带有二维码。在保存程序正常运行的情况下，在服务器用一张透明的 png 图替换二维码就好了。删了还不行，因为用了 promise…

最后，终于通过。鼓掌~

免责声明

答案纯属瞎jb胡闹，不负任何责任 ~

致谢

致谢 拖了两周都没给我答案库的 @Tingcy_Huang。 致谢 让答案看起来像智障的 @Tingcy_Huang。 致谢 不给我答案库不改致谢的 @Tingcy_Huang。

致谢所有参与产品、开发、测试，贡献出创意想法与建议的小伙伴。

我们有个小团队，自嘲为“咸鱼科技”，谁说咸鱼不能有梦想，哈哈。我们还需要 UI、运营等，如果你有想法、有创意、有技能可以加入我们的小团队！2333~