记录一次完整的移动端内嵌H5开发

·  阅读 212
记录一次完整的移动端内嵌H5开发

一次活动开发,从头到尾踩坑无数,从兴致勃勃到嘴里骂骂咧咧,心累。不想让自己精力白费,记录一下,当成后续的积累。PS:使用VUE开发

1. 保存图片

用过购物APP的肯定见过保存图片的操作。基本都是将活动内容+个人信息生成一个图片,然后分享给用户。例如:

1. 生成二维码

其中二维码一般是一个带个人信息的链接自动生成。使用第三方插件[qrcode.vue](https://www.npmjs.com/package/qrcode.vue)

该插件需要注意的事项:

 -- size属性是number类型,不能使用诸如"vm/vh"的度量单位,因为IOS不兼容!!

2. 拼接图片(将DOM拼接成一张图)

使用html2canvas插件, 将DOM生成Canvas。

该插件的注意事项:

-- 为了保证图片的清晰程度,不要使用背景图片,使用前景图片!!

3. 将canvas转为blob

使用canvas.toBlob 方法将canvas转为二进制

4. 将图片内容上传服务器

由于封装的jsBridge需要使用远程地址进行图片下载或者分享。

2. 分享图片

分享图片的前提是1中的生成图片。然后通过内部封装的jsBridge将图片分享到微信等其他工具内。我这次是只分享到微信!

bug:分享的图片带有黑/白色的背景色

图片是非规则图片,非规则边界是UI使用的透明背景。例如:

原因: 微信对png分享到朋友圈的图片ios下是白色填充,android下是黑色填充。

解决方案:

自己设置背景色,如统一设置成为白色。

html2Canvas的方法可以自定义设置生成图片的背景色。

3. 动画播放

使用svga进行动画播放。

播放插件使用svga-player

注意⚠️:该动画方式和lottie一样,都可以暂停到某一帧。我因为不知道,走了很多弯路。

4. 查看更多

          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          overflow: hidden;
复制代码

一直使用该方法进行类似问题处理。但是不知道是否是webview的问题,这次开发中IOS使用该方法无效。

最后为了兼容和赶时间,使用了固定高度!!

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改