前景:在实现web端扫描二维码后跳转到h5页面进行签名,在web点击获取到手机端的签名
一、在vue中二维码的生成,点击查看上一篇文章
二、canvas绘制签名
:具体实现,指路上一篇文章- canvas绘制签名
三、以下是一些在实现签名过程中遇到的问题,零零散散记录一下。
1、h5页面的提示语:
在web端扫描二维码后跳转到h5页面进行签名,
其中的提示语的设置,是通过引入移动端的组件库-有赞Vant
,使用其中的轻提示Toast进而实现。有赞Vant官网
https://www.xiaopiu.com/h5/byId?type=project&id=5c1cc8bd2d5cd56e709f0c60
//首先通过 npm 安装
npm i vant -S
/* 引入vant中的轻提示组件 这里是用了方式二. 手动按需引入组件 */
import Toast from 'vant/lib/toast';
import 'vant/lib/toast/style';
// h5页面的提醒
Toast('请先进行签署');
2、引入VConsole使得可以在手机端点击查看控制台
//首先下载
npm install vconsole
//引入vconsole
import VConsole from 'vconsole/dist/vconsole.min.js'
let vConsole = new VConsole() // 初始化
然后代码中的console.log()内容,就可以在手机端通过控制台显示
3、遇到问题:ios 12版本的post请求报错
// let uploadData = {
// orderViewId: that.orderListId,
// autographPhoto: that.viewScanCodeUrl
// }
// console.log('uploadData====点击提交上传的图片',uploadData)
// // 调取提交
// that.$api.CONSULTATION.upLoadAutographPhoto(uploadData).then(res => {
// console.log('res--------', res,that)
// that.$router.push({
// path: "/signSuccess",
// query: {
// id: that.orderListId, //订单id
// }
// });
// })
// .catch(err => {
// console.log('err--------上传签名err',err)
// return Toast('提交失败,请重新提交');
// })
qs.stringify
和JSON.stringify
区别
4、h5页面的布局
/* 横屏情况下 landscape */
// @media screen and (orientation: landscape) { /* 横屏 */
// }
/* 竖屏情况下 portrait */
@media screen and (orientation: portrait) { /* 竖屏 */