项目描述:类似淘宝客服聊天界面和功能,用于用户反馈问题和运营推送优质内容/版本更新给用户

1.弹出输入框的同时自动弹出键盘

解决:让textarea获取焦点,调用focus()方法就会自动调起键盘

this.$nextTick(() => {
  this.$refs.textarea.focus()
})

关键点:
1.代码顺序,此行代码必须在设置输入框显示(this.showComment = true)后执行
2.vue@2.5.11此处,在ios时键盘不会自动吊起,换成vue@2.4.4可以吊起,官方有issue,不过没写解决方法

2.将vue版本降到@2.4.4后,再次运行报错 同时构建项目出错
解决:vue的版本要与vue-template-compiler版本一致,一起降为2.4.4

3.所有接口用postman请求一直返回index.html页面

解决:注意代码顺序

app.use('/api', fetchUserInfo, apiRoutes) // 接口在history的上面
app.use(history()) // 这句代码需要在express.static上面
app.use(express.static(path.join(__dirname, '../../dist')))

原因:待

4.本地调试正确,测试环境异常,发现new Date()时间比本地早八个小时

原因: 项目因为是用了最新的vue-cli3构建,所需要的node版本较高,隔离项目放入docker中,docker的默认时区是UTC,应改为CST

解决:

// dockerfile
RUN rm /etc/localtime \
  && export DEBIAN_FRONTEND=noninteractive \
  && apt-get install -y tzdata \
  && ln -fs /usr/share/zoneinfo/Asia/Shanghai /etc/localtime

5.调用bridge发送图片信息,交互体验差,低网速环境下,发送失败几率大

现状:等到图片上传到七牛,拿到图片网络地址后再渲染页面和发送消息,期间没有任何提示
解决:调用bridge,从相册/相机选择照片后-->客户端返回base64的图片信息-->把图片消息先渲染到页面上,上面加蒙层loading-->等待上传图片的bridge方法返回七牛地址,成功拿到则蒙层消失,失败则提示重新发送,点击重新发送,则重新上传图片


Rainie
441 声望36 粉丝

全栈攻城狮


下一篇 »
QUIZ