之前試水的項(xiàng)目下水了~開發(fā)過程中又踩了不少坑，絕大部分為微信自己的坑，在此記錄希望大家看到能高效解決或避免。
1. 理解原生組件和原生組件的限制
小程序原生組件的使用限制
原生組件和非原生組件的區(qū)別
可以說開發(fā)過程中遇到的大部分奇奇怪怪的問題都是因?yàn)闆]有注意到原生組件使用限制導(dǎo)致的，其中input是最怪異的，它只在focus時(shí)是原生組件，blur狀態(tài)是非原生組件，所以在你聚焦失焦的過程中有個(gè)渲染切換的過程，在我這帶來了以下幾個(gè)問題。
(1. 模態(tài)框彈出情況下停留在頁(yè)面， 息屏再打開，賬號(hào)輸入框覆蓋在模態(tài)框上面。
原因：進(jìn)入頁(yè)面時(shí)賬號(hào)輸入框自動(dòng)獲焦，focus時(shí)的input組件為原生組件，層級(jí)最高
解決方法：在willMount而不是DidShow生命周期中調(diào)用賬號(hào)輸入框獲焦，這樣在息屏后亮起是不會(huì)觸發(fā)的
(2. 輸入賬號(hào)后 placeholder沒有消失
原因：參考官方說法
因?yàn)槭蔷奂瘯r(shí)的input是用原生渲染，有個(gè)web渲染跟原生渲染的切換過程，所以會(huì)有個(gè)重疊，看社區(qū)18年9月份就在眾測(cè)優(yōu)化了但是似乎還是沒有解決解決方法： 自己實(shí)現(xiàn)placeholder，即判斷輸入框里沒有值時(shí)顯示placeholder
(3. 彈出模態(tài)框后，模態(tài)框中input無(wú)法自動(dòng)獲焦
原因：官方tip在 input 聚焦期間，避免使用 css 動(dòng)畫, 模態(tài)框彈出有一段css動(dòng)畫
解決方法： input 聚焦給個(gè)延時(shí)，動(dòng)畫結(jié)束后再設(shè)置
2. 虛擬輸入框fake-input, 設(shè)置透明度為0 還是能看到輸入的內(nèi)容及光標(biāo)
原因：兼容性問題，社區(qū)有人提了iphoneX 小程序input無(wú)法隱藏，我自己就是x但是沒做真機(jī)測(cè)試沒發(fā)現(xiàn)，開發(fā)工具上沒問題
解決方法：使用定位將input移出屏幕外面。增加input的padding，使之依舊能覆蓋到6個(gè)小的input框
3. 地圖相關(guān)
首先小程序的地圖的展示是限制了只能用騰訊地圖的，但是高德地圖也提供了快速生成圖片的替代方法，如果可以滿足的需求的話也可以考慮一下，api相關(guān)沒有太大的差別，騰訊地圖有每日最高限額和并發(fā)限額，國(guó)內(nèi)的可以免費(fèi)申請(qǐng)?zhí)犷~，高德似乎沒有，但是海外位置服務(wù)應(yīng)該是都需要購(gòu)買的，否則都有限額
（1. translateMarker 的參數(shù)animationEnd 在安卓不能正確觸發(fā)
（2. 更新了marker起點(diǎn)的情況下，同一個(gè)marker id不能連續(xù)移動(dòng)兩次
以上已經(jīng)在社區(qū)提出issue
第一個(gè)問題暫無(wú)回復(fù)，第二個(gè)問題果然 官方回復(fù)，marker位置為了優(yōu)化性能有做緩存，這邊還是自己更新markerId解決
4. 渲染層錯(cuò)誤 Expect END descriptor with depth 0 but get another
這個(gè)問題到現(xiàn)在都還不明確是哪邊的問題
但是因?yàn)閠aro編譯過代碼，我在開發(fā)工具里看dist文件夾中編譯完的代碼 并沒有找到類似上述使用情況的，最后的解決方法還是很白癡的取消了自定義組件的嵌套，一大堆代碼放在一個(gè)文件里解決的。。就真的很白癡。。。
5. 全局變量在攔截器中未正確更新
//設(shè)置全局變量 this.baseURL
constructor (props) {
super(props);
this.state = {};
this.baseURL = "";
}
//攔截器
envInterceptor = (chain) => {
const requestParams = chain.requestParams;
if(requestParams.url.indexOf('http') === -1)
requestParams.url = `${this.baseURL}${requestParams.url}`;
return chain.proceed(requestParams).then(res => console.log("envInterceptor", this.baseURL))
};
//在willMount獲取頁(yè)面參數(shù)賦值給全局變量并設(shè)置攔截器
componentWillMount() {
console.log('index willmount');
const { baseURL, applicationOID } = this.$router.params;
console.log("index willmount", baseURL);
this.baseURL = baseURL || Taro.getStorageSync('baseURL');
baseURL && Taro.setStorageSync('baseURL', baseURL);
Taro.addInterceptor(this.envInterceptor);
console.log("SDKVersion", Taro.getSystemInfoSync().SDKVersion);
console.log(Taro.getSystemInfoSync().brand + " " + Taro.getSystemInfoSync().model);
}
官方回復(fù)，攔截器內(nèi)是用閉包函數(shù)實(shí)現(xiàn)的，銷毀頁(yè)面對(duì)象并不會(huì)銷毀該全局對(duì)象，將在下個(gè)版本修復(fù)，因?yàn)閷?duì)用戶沒影響只對(duì)測(cè)試有影響，所以我也不打算先對(duì)這個(gè)問題做修復(fù)了。
6. getStorageSync不是每次都能成功的
官方回復(fù) getStorageSync不是每次都能成功的，如果存放了重要數(shù)據(jù)建議加個(gè)try catch或者用異步方法在success里做后續(xù)操作
7. canvas實(shí)現(xiàn)自定義轉(zhuǎn)發(fā)封面
看這里總結(jié)http://www.itdecent.cn/p/665234a76453
