今天就颜值招聘简历详情页面的分享问题和方案的探索进行记录。
首先看下简历预览页面：
详情1.png
详情2.png
根据 wx.onShareAppMessage( ) 方法，只要页面定义了该方法，就会在当前页面右上角显示分享按钮，点击转发才会调用该方法。
代码如下：
Page({
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
path: '转发路径',
imageUrl: '',
success: function(res) {
// 转发成功
},
fail: function(res) {
// 转发失败
}
}
}
})
如果不传imageUrl则使用默认截图，即小程序分享出去时的图片，是从上往下对当前页面进行截屏，设置图片长宽比是 5:4。
在detail页面， 我一开始没传imageUrl，分享出去的是视频。此时遇到了问题：
1、分享出去的视频有些会被拉伸变形。这个问题的根本原因是在小程序制作简历时，我们没对上传的视频做裁剪处理，视频宽高比是随意的，而截屏时是按照宽高比5:4对视频帧画面进行拉伸了。
2、同一份简历不同时机分享时的图片不一致。进入页面未播放视频时，分享的图片是视频第一帧，播放过或者播放中分享的是视频的当前帧。对于这个问题，我的理解是，点击分享时是获取视频的当前帧画面按照5:4的比例进行截屏得到图片的。
针对上述问题，我第一想法是能否获取当前时长视频帧画面进行处理，然后裁剪得到5:4的画面进行分享。查阅API，我发现小程序并没有提供截取当前当前视频帧画面的方法，所以我选择了放弃。
想着如果分享时imageUrl设置为第一张图片地址呢，是不是会好处理点。但我立刻意识到还是会存在图片拉伸变形的问题。因为上传图片也没做处理，没法保证图片宽高比1:1。
这个时候我就想着对分享的图片进行裁剪吧。小程序提供了画布绘图，我使用的就是wx.createCanvasContext( ) 和 ctx.drawImage( ) 进行绘制。为了方便测试看效果，我在wxml中定义一个canvas，js中去调用相应绘制方法将绘制的图片保存传给imageUrl。
<!-- 画布 -->
<canvas canvas-id="myCanvas" style="width: 250px; height: 200px; border: 1px solid;" hidden="{{false}}">
</canvas>
注明：底部黑框就是画布，我需要将图片绘制显示到画布中。
页面定义画布的真机效果
在绘制时，如果直接用网络图片进行绘制，在模拟器上运行，画布上会显示图片，而真机上不显示，我猜测是两者运行环境不同导致的吧。我尝试使用本地图片地址绘制，真机是显示的。所以为保证网络图片能绘制到画布上，我先下载再绘制。效果如下：
网络图片下载绘制在画布上的真机效果
可以看出图片依旧是拉伸变形的，在使用ctx.drawImage(that.data.photofilepath[0].path, 5, 20, 160, 160.5) 方法时，只是指定了图片在画布上的位置和宽高，所以我需要自己去裁剪图片。在处理过程中，我发现canvas绘图很耗资源，页面渲染很慢，体验性很不好。
分析下，现在这种方案渲染慢的原因：
首先，进入页面在 onLoad( ) 时进行网络请求获取页面数据，成功之后下载图片，裁剪再进行绘制，这些处理都需时间。
那么有木有什么办法缩短这个过程的时间加快渲染？让服务器直接返回一张裁剪好的宽高比5:4的图片？上传简历资料时服务器并没有保存裁剪图片，服务器何时去裁剪？详情页面请求时再裁么，会不会也导致请求时间较长呢？一系列问题，我们上传的图片时放在阿里云服务器上，支持图片缩放处理，所以就有了新的方案替代前端或后端去裁剪获取分享图片。
在请求数据成功后，可以拿到页面要显示的三张图片的网络地址，我可以直接
将图片按照要求生成缩略图，或者进行特定的缩放。完美～
还有个替代方案，那就是在当前页面放置哥悬浮分享按钮，点击，进入新页面，将要显示的内容样式写好，直接调页面分享方法截屏即可实现。
我尝试过，还可以自定义，不过缺点就是新开页面分享让用户操作成本加大而增加用户流失。权衡利弊后，选择了使用阿里云图片处理，自定义显示图片缩略图和缩放规则来实现分享图片5:4比例而不变形。至于效果嘛，可以看下面这张图片：
阿里云图片处理后的真机效果.png
阿里云图片处理规则具体可参考：https://help.aliyun.com/document_detail/44688.html?spm=5176.doc44696.6.972.5JWZkB
总结：
篇幅有点长，没收住，🤦♀️... 虽然有点杂，但记录的是自己思考分析的过程。
1、小程序目前只支持微信好友和群分享，Page页面需定义并实现wx.onShareAppMessage( ) 方法；
2、分享默认图片是当前页面截屏按照宽高比5:4形成一张默认图片进行分享的；
3、ctx.drawImage()方法绘制网络图片时需要下载，否则画布上不显示；
4、分享时imgUrl的图片宽高比不是5:4，则需要自己裁剪或者依靠阿里云处理了，否则会出现拉伸变形问题；
5、分享也可以考虑新开页面，做自定义个性化模版。
关于实现中的具体细节和坑，打算再写篇文章一一记录，好记性不如烂笔头～
网友评论