Hello everybody ! 雷迪森 and 鄉(xiāng)親們谬返，long time no see丧枪！我可想死你們了９馔俊！拧烦！
由于去年年中到現(xiàn)在就在一直開發(fā)微信小程序忘闻，一路上坎坎坷坷，受（瘦）了蠻多教訓(xùn)地恋博。接來下就是年度匯總了齐佳！敲黑板葵蒂，劃重點(diǎn)！噹噹噹Ｖ芈恰＜丁！
1. flex 布局
話說在微信小程序里面使用 flex 布局真是的非常的方便呢缺厉！如絲般順滑永高！兼容性感覺完全不用擔(dān)心（至少現(xiàn)在沒有遇到什么坑嘞） == （得意臉）。
言歸正傳提针！要實現(xiàn)如下布局（這還不簡單嗎命爬。。辐脖。注意看類名哦饲宛，就不寫 CSS 了，懶癌癥犯了嗜价，關(guān)鍵電腦在公司艇抠。）
<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 這里文本過長時并沒有進(jìn)行縮略久锥，然后就一臉懵逼家淤，心想這可咋整哇！
突然想著是不是我可以把它的長度限制一下瑟由，不就 OK 了嗎絮重。。歹苦。果然 job-name 一限制長度青伤，藥到病除。
但是轉(zhuǎn)眼一想殴瘦，這明顯不是楊某人的作風(fēng)哇狠角！限制長度的做法有點(diǎn) 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>
主要的關(guān)鍵點(diǎn)是在 job-name 里面再加了一個標(biāo)簽來匡住里面的文本，然后加個 width:0 這樣就完美了辣吃。
2. 畫長圖
因為要實現(xiàn)在點(diǎn)擊長圖分享的時候动遭，出現(xiàn)一張圖片，后端不給生成神得，所以就自己畫一張唄厘惦。。。
發(fā)現(xiàn)在 iOS 和 安卓下真的微信的兼容做得并不是很完美宵蕉，而且 canvas 在微信下使用起來酝静，感覺也不是很絲滑。
- 文字不能換行羡玛，只能通過字?jǐn)?shù)一定來強(qiáng)制限制别智，然后中英文字體大小不一，加之各種中英文標(biāo)點(diǎn)稼稿。薄榛。。（感覺天塌了让歼，想想就頭痛）于是就通過 1 × 中文 === 1.46 × 英文字母來判斷敞恋；
- 長圖中的各種圖片只能是本地圖片，如果是網(wǎng)絡(luò)圖片谋右，必須先通過 wx.downloadFile(OBJECT) 下載下來硬猫，然后通過 tempFilePath 來畫在長圖上；
3.字體不能設(shè)置樣式改执； - 在畫這一部分陰影的時候啸蜜，發(fā)現(xiàn)在 Android 下完美，在 iOS 下 BOMM 炸了天梧。
這個就是通過 canvasContext.createLinearGradient 來畫的盔性，可能在 iOS 下不兼容吧。具體表現(xiàn)就是在 iOS 下呢岗，長圖的背景成透明的了，并不是白色的蛹尝。后豫。。
- 通過 wx.canvasToTempFilePath(OBJECT, this) 把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片突那，并返回文件路徑挫酿。在 iOS 下利用此 API 時，將
success: function(res) { console.log(res.tempFilePath) }中 res.tempFilePath 設(shè)置到 this.data 中愕难。
success: function(res) {
console.log(res.tempFilePath)
that.setData({
tempFilePath: res.tempFilePath
})
}
在下一次打開長圖的時候直接通過判斷 this.data.tempFilePath 存在與否早龟，決定直接預(yù)覽 wx.previewImage(OBJECT)。在 iOS 下完美呈現(xiàn)猫缭，在 Android 下發(fā)現(xiàn) this.data.tempFilePath 一直為空葱弟，所以每次都要重新繪制一份。。。（我也很無奈哇=_=）
結(jié)束語：
2017 年真是不平凡的一年Ｆ】妗Ｔ岳谩读跷！祝大家狗年大吉蕾各，汪汪汪汪汪汪汪汪汪汪汪汪褥赊！內(nèi)推一首（傷心通話-李代沫）大家多多指教
