项目描述:类似淘宝客服聊天界面和功能,用于用户反馈问题和运营推送优质内容/版本更新给用户
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方法返回七牛地址,成功拿到则蒙层消失,失败则提示重新发送,点击重新发送,则重新上传图片