這個(gè)月給手機(jī)衛(wèi)士寫(xiě)了個(gè)功能及其簡(jiǎn)單的小程序，但就這么個(gè)及其簡(jiǎn)單的小程序抖拴，也是踩了一堆坑~
開(kāi)發(fā)流程
其實(shí)按照官網(wǎng)的教程一步步來(lái)就行燎字，介紹的已經(jīng)很全面了。然后：
-
開(kāi)發(fā)
- 自己的賬號(hào)
- 微信開(kāi)發(fā)者工具
- VsCode
-
調(diào)試（top center at 開(kāi)發(fā)者工具）
- 預(yù)覽阿宅，手機(jī)掃二維碼
-
遠(yuǎn)程調(diào)試
調(diào)試
-
傳代碼 (top right at 開(kāi)發(fā)者工具)
上傳 體驗(yàn)者掃碼體驗(yàn)
開(kāi)發(fā)方式
本來(lái)是沒(méi)寫(xiě)過(guò)小程序的候衍，于是上來(lái)就照著教程寫(xiě)原生。
快寫(xiě)完的時(shí)候被俊哥鄙視了：這年頭小程序還用原生寫(xiě)家夺？脱柱！瞬間我就毛躁了...
然后俊哥說(shuō)他用WePY不爽，然后那好吧拉馋，剛好mpVue冒了個(gè)泡榨为，索性趁熱練練手~
寫(xiě)習(xí)慣Vue的寶寶們，恭喜煌茴！mpVue對(duì)你們來(lái)說(shuō)挺友好的随闺，上手很快！在Vue大部分自己的寫(xiě)法里面蔓腐，小程序的api也隨便用~ 總之就是邊寫(xiě)Vue矩乐，邊看小程序文檔。
mpVue對(duì)Vue的有些寫(xiě)法是不支持的，開(kāi)發(fā)的時(shí)候剛好被我碰上了散罕！
- 比如分歇，在Vue里
:class="[activeClass, errorClass]"這種對(duì)class的寫(xiě)法就是不支持的~ - 再比如，想給
input或是textarea的placeholder設(shè)置style欧漱，用::-webkit-input-placeholder不职抡！生！效误甚！
所以只能依賴(lài)小程序文檔內(nèi)原生的方法：placeholder-style="color: #c1c1c1"
還有一些類(lèi)似不知道怎么獲取路徑傳輸參數(shù)的問(wèn)題缚甩，可以看看mpVue的文檔；文檔里沒(méi)有的窑邦，可以在git issue中提問(wèn)擅威，美團(tuán)的開(kāi)發(fā)者們回答很快，點(diǎn)個(gè)贊冈钦。
關(guān)于數(shù)據(jù)請(qǐng)求
小程序的請(qǐng)求方式簡(jiǎn)單粗暴（我沒(méi)用到上傳和下載郊丛，暫且不講）。
- 只能用
wx.request - url必須是
https的
然后派继，一個(gè)https接口給出來(lái)了宾袜，不能直接用！
要在微信公眾平臺(tái) => 設(shè)置 => 開(kāi)發(fā)設(shè)置 => 服務(wù)器域名 加上所謂的白名單驾窟。
不過(guò)貌似在開(kāi)發(fā)者工具里設(shè)置一下可以跳過(guò)校驗(yàn)庆猫。我試了一下，接口沒(méi)調(diào)成功绅络，索性就乖乖加了白名單月培，至于為什么設(shè)置了也沒(méi)成功，沒(méi)再研究??恩急。
接下來(lái)杉畜，數(shù)據(jù)傳輸方式：
之前寫(xiě)ajax基本都是甩過(guò)去一個(gè)url、data衷恭、method此叠、dataType: json，就坐等success返回了随珠。
這一次人家后端不只要求json灭袁，還要表單形式的請(qǐng)求。來(lái)看一下屈大的博客
配置header窗看，規(guī)定好content-type：
header: {
'content-type': 'application/x-www-form-urlencoded',
},
必須得放下DOM了
由于小程序頁(yè)面不是在瀏覽器里茸歧！，所以document啊显沈、window啊软瞎，這種瀏覽器暴露的API就都用不了了逢唤！所以我連訪(fǎng)問(wèn)一個(gè)textarea的value都不能操作DOM，怎么辦：
給textarea綁定特定的事件涤浇，在想獲取value（比如@blur=“showValue”）的時(shí)候鳖藕，通過(guò)
showValue (e) {
console.log(e)
handleValue(e.target.value)
}
來(lái)獲取，可以看下console出來(lái)的結(jié)果：
為什么不可以給textarea數(shù)據(jù)綁定只锭，這里有坑
想獲取textarea的值吊奢，我們又是用的Vue，那么直接通過(guò)v-model綁定的數(shù)據(jù)來(lái)獲取不是很容易么~
但是我要告訴你不能這么用纹烹。Why？
如圖：在ios中（安卓沒(méi)測(cè)）召边，如果用戶(hù)輸入完內(nèi)容之后铺呵，移動(dòng)光標(biāo)至中間做刪除操作，那么你會(huì)很崩潰隧熙，因?yàn)槊縿h一個(gè)字片挂，光標(biāo)就會(huì)跑到末尾！
我覺(jué)得這應(yīng)該是小程序的一個(gè)bug吧贞盯，每次監(jiān)聽(tīng)到數(shù)據(jù)變化的時(shí)候音念，整個(gè)textarea區(qū)域就“重新渲染”了，光標(biāo)也就跑到了最后躏敢。
解決辦法就是放棄v-model闷愤，用上述方法，在textarea@blur（也就是點(diǎn)擊按鈕）的時(shí)候獲取e.target.value件余。
但這里還是會(huì)有個(gè)問(wèn)題：就是如果button@click的時(shí)候頁(yè)面跳轉(zhuǎn)了讥脐，怎么辦？
這個(gè)時(shí)候啼器，頁(yè)面跳轉(zhuǎn)是在blur事件捕獲之前進(jìn)行的旬渠。
因此我們必須要在blur執(zhí)行完之后再做跳轉(zhuǎn)，所以這里要有一個(gè)setTimeout()
bindAuthTap () {
setTimeout( () => {
if (!this.searchMsg) {
wx.showToast({
title: '請(qǐng)您輸入要鑒定的內(nèi)容',
icon: 'none'
})
return
}
const url = `../logs/logs?msg=${this.searchMsg}`
wx.navigateTo({ url })
}, 100)
}
overflow: hidden之后怎么還有1像素可見(jiàn)端壳？
如圖告丢，給文字做超出兩行省略加隱藏之后，下面還會(huì)有1px的"邊"（實(shí)際上是被遮擋的文字內(nèi)容）可以看到~
我猜應(yīng)該是小程序在轉(zhuǎn)換成rpx進(jìn)行計(jì)算產(chǎn)生的誤差损谦，其實(shí)這種事情H5上也常有岖免。
解決辦法就是：給兩行文字設(shè)置
height，徹底不讓下面的一行字顯示出來(lái)：
.msg-text {
height: 36px; /* 設(shè)置成line-height的2倍就能夠起到遮擋效果 */
line-height: 18px;
font-family: PingFangSC-Regular;
font-size: 15px;
color: #353535;
letter-spacing: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
word-break: break-all;
overflow: hidden;
}
防刷的策略
為了提高用戶(hù)體驗(yàn)成翩，我們決定不在前端使用驗(yàn)證碼策略觅捆，但是防刷還是要做的。
大概思路就是在用戶(hù)登錄的時(shí)候給服務(wù)端發(fā)送用戶(hù)信息和系統(tǒng)信息麻敌，返回服務(wù)端用一系列加密和算法生成的uid栅炒；再去請(qǐng)求數(shù)據(jù)的時(shí)候就要帶上這個(gè)uid。
這里面至少要有wx.login()、wx.getUserInfo()赢赊、wx.getSystemInfo()乙漓，還有N次服務(wù)端的請(qǐng)求。
所以释移，promise / async await是逃不過(guò)的叭披。
最后安利一款Base64，啊哈哈哈哈哈哈玩讳。
