微信小程序踩坑之旅

Hello everybody ! 雷迪森 and 乡亲们，long time no see！我可想死你们了！！！

由于去年年中到现在就在一直开发微信小程序，一路上坎坎坷坷，受（瘦）了蛮多教训地。接来下就是年度汇总了！敲黑板，划重点！噹噹噹！！！

1. flex 布局

话说在微信小程序里面使用 flex 布局真是的非常的方便呢！如丝般顺滑！兼容性感觉完全不用担心（至少现在没有遇到什么坑嘞） == （得意脸）。

言归正传！要实现如下布局（这还不简单吗。。。注意看类名哦，就不写 CSS 了，懒癌症犯了，关键电脑在公司。）

布局.jpg

<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 炸了。

阴影.jpg

这个就是通过 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 年真是不平凡的一年！！！祝大家狗年大吉，汪汪汪汪汪汪汪汪汪汪汪汪！内推一首（伤心通话-李代沫）大家多多指教

微信小程序踩坑之旅

1. flex 布局

2. 画长图

结束语：

End