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

项目介绍

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

产品展示

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

人员介绍

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

项目统计

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

产品篇

缘起

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

竞品分析

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

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

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

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

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

设计篇

原型

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

logo

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

"logo"

背景图

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

"logo"

其他效果图

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

"bg" "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() 的使用。

微信小程序权限获取

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

"authorize"

答案生成

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

答案分为两种:

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

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

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

"authorize"

小程序审核技巧

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

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

最后,终于通过。鼓掌~

免责声明

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

致谢

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

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

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

文章来源:

Author:大刀分享站-dddog.com.cn
link:https://www.dddog.com.cn/tutorial/the-answer/