Hello everybody ! 雷迪森 and 乡亲们,long time no see!我可想死你们了!!!
由于去年年中到现在就在一直开发微信小程序,一路上坎坎坷坷,受(瘦)了蛮多教训地。接来下就是年度汇总了!敲黑板,划重点!噹噹噹!!!
1. flex 布局
话说在微信小程序里面使用 flex 布局真是的非常的方便呢!如丝般顺滑!兼容性感觉完全不用担心(至少现在没有遇到什么坑嘞) == (得意脸)。
言归正传!要实现如下布局(这还不简单吗。。。注意看类名哦,就不写 CSS 了,懒癌症犯了,关键电脑在公司。)
<view class="flex">
<image class="logo"></image>
<view class="container flex_column">
<view class="name-salary flex a_center space_between">
<view class="job-name flex_1 one-line-ellipsis">job-name frontend developer</view>
<view class="salary">15K-30K</view>
</view>
<view class="company-name">
company-name
</view>
<view class="other flex">
<view class="edu-add">
beijing | wangliu | no-limit | benco
</view>
<view class="time">
Mar one
</view>
</view>
</view>
</view>
本以为大功告成,没想到就在 job-name 这里文本过长时并没有进行缩略,然后就一脸懵逼,心想这可咋整哇!
突然想着是不是我可以把它的长度限制一下,不就 OK 了吗。。。果然 job-name 一限制长度,药到病除。
但是转眼一想,这明显不是杨某人的作风哇!限制长度的做法有点 low ,于是就再试试其他办法吧。
千试万试终于试出来了!最后在 name-salary 的布局如下:
<view class="name-salary flex a_center">
<view class="job-name flex_1 one-line-ellipsis" style="width: 0">
<view>job-name frontend developer</view>
</view>
<view class="salary">15K-30K</view>
</view>
主要的关键点是在 job-name 里面再加了一个标签来匡住里面的文本,然后加个 width:0 这样就完美了。
2. 画长图
因为要实现在点击长图分享的时候,出现一张图片,后端不给生成,所以就自己画一张呗。。。
发现在 iOS 和 安卓下真的微信的兼容做得并不是很完美,而且 canvas 在微信下使用起来,感觉也不是很丝滑。
- 文字不能换行,只能通过字数一定来强制限制,然后中英文字体大小不一,加之各种中英文标点。。。(感觉天塌了,想想就头痛)于是就通过 1 × 中文 === 1.46 × 英文字母来判断;
- 长图中的各种图片只能是本地图片,如果是网络图片,必须先通过 wx.downloadFile(OBJECT) 下载下来,然后通过 tempFilePath 来画在长图上;
3.字体不能设置样式; - 在画这一部分阴影的时候,发现在 Android 下完美,在 iOS 下 BOMM 炸了。
这个就是通过 canvasContext.createLinearGradient 来画的,可能在 iOS 下不兼容吧。具体表现就是在 iOS 下,长图的背景成透明的了,并不是白色的。。。
- 通过 wx.canvasToTempFilePath(OBJECT, this) 把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。在 iOS 下利用此 API 时,将
success: function(res) { console.log(res.tempFilePath) }
中 res.tempFilePath 设置到 this.data 中。
success: function(res) {
console.log(res.tempFilePath)
that.setData({
tempFilePath: res.tempFilePath
})
}
在下一次打开长图的时候直接通过判断 this.data.tempFilePath 存在与否,决定直接预览 wx.previewImage(OBJECT)。在 iOS 下完美呈现,在 Android 下发现 this.data.tempFilePath 一直为空,所以每次都要重新绘制一份。。。(我也很无奈哇=_=)
结束语:
2017 年真是不平凡的一年!!!祝大家狗年大吉,汪汪汪汪汪汪汪汪汪汪汪汪!内推一首(伤心通话-李代沫)大家多多指教