最近一個多月斷斷續(xù)續(xù)的寫了個小程序，就記錄下之前遇到過的坑朵纷。
首先放一個微信小程序爬坑的一個查詢網(wǎng)站：http://www.wxapp-union.com，這里挺多的問題都能找到的烁，我也差不多都是這里看到
1.關(guān)于微信https的問題
微信在接口的調(diào)試上限制挺多的诉位，在模擬器上調(diào)試的話把開發(fā)者工具詳情里的不校驗Https勾上，那么非https的地址確實可以訪問了唠倦，但是在真機上測試的話金踪，需要在右上角的三個點里把調(diào)試工具打開再重新打開項目才會有數(shù)據(jù)接入，否則的話是沒有效果的牵敷，
webview的話那就必須是真實環(huán)境的調(diào)試，因為公司一般會有一個或多個https的域名法希，那么測試只能在這個上面進行枷餐，比如一些詳情頁和小程序的交互；注意在一些外部鏈接放入的話會有一些問題苫亦。
2.關(guān)于用戶授權(quán)的問題
在小程序之前的版本里毛肋，詢問授權(quán)的api是可以直接發(fā)起的，而之后官方在這個api上做了修改屋剑，導(dǎo)致我一度以為是我自己調(diào)用的方法不對润匙，具體可以去官方的文檔查詢wx.getUserInfo，然后去社區(qū)可以看看相應(yīng)的問題唉匾≡谢洌基本上在第一次的時候要用Button組件設(shè)置屬性open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo"匠楚，前面是設(shè)置成發(fā)起授權(quán)的屬性，后面是回調(diào)厂财，官方覺得可能直接問用戶要權(quán)限顯的不是非常友好芋簿，也能理解；
所以基本上都會是一個授權(quán)按鈕頁面璃饱，或者你可以說是綁定之前的賬號或者与斤，可以放一個紅包頁面，然后提示用戶授權(quán)登錄即可領(lǐng)取紅包荚恶，我暫時用的是單獨一個綁定頁面讓用戶去授權(quán)并綁定我們平臺對應(yīng)的賬號撩穿，。谒撼。對食寡。。嗤栓。因為我們是要通過unionId來同步以前已經(jīng)注冊過的用戶的相關(guān)資料冻河。這里的綁定的問題來稍微說明一下：
首先你要通過wx.login來獲取用戶的code（一般傳給后端消費一次就要重新調(diào)用來使用），這個不用授權(quán)茉帅，登錄就有叨叙，然后傳給后臺，他會給你自己平臺的校驗token什么的堪澎，具體要和后端討論擂错，然后獲取回來后就能通過token來確定用戶的相關(guān)信息了。
還有就是授權(quán)設(shè)置界面是能通過wx.openSetting來跳轉(zhuǎn)樱蛤，不過快要廢掉了钮呀，也要用button組件來發(fā)起了，可以先通過wx.getSetting來查看用戶給來哪些權(quán)限昨凡。
3.微信是不支持div這些標簽的爽醋，雖然div放進去也不會報錯，但是最好不要用便脊。蚂四。其實小程序的布局感覺借鑒好多框架的，哪痰，至少rn使用view,text等遂赠。。
我一般會在app.wxss里放入view==》
box-sizing: border-box;
word-break: break-all;
/* 防止純數(shù)字不換行 */
來把盒子模式自己設(shè)置過晌杰，還有就是如果是純數(shù)字微信默認是不換行的跷睦，所以就自己加一個，可以把統(tǒng)一的樣式放入這個文件肋演。
我公司是做電商的抑诸，商品詳情的很多圖肯定都是Html格式的烂琴，，我推薦用wxParse哼鬓，好使监右，簡單，無腦异希，直接放入項目健盒，他有個Icon的文件好像，我刪掉了称簿，太大了
微信不支持Dom操作扣癣，可以通過下面這個api去操作：這個是例子，具體去文檔看
wx.createSelectorQuery()
4.tabBar的設(shè)置憨降。父虑。
你可以選擇自己寫，如果想偷懶那么就直接用他的授药，也挺方便的士嚎，就是要注意圖片的路徑什么的，悔叽；
關(guān)于頭部的東西莱衩，，我是不怎么推薦自己寫娇澎，挺麻煩的笨蚁，當然閑的話可以自己寫，把navigationStyle設(shè)置成custom 模式就能隱藏默認的頭（全局的）趟庄，注意三個點和圈是還在的括细，我看貝貝都是自己寫的；不支持漸變Ｆ萆丁７艿ァ！Ｃㄊ览濒！
5.微信不支持想vue一樣的管道過濾器，所以只能自己寫方法炫彩，在數(shù)據(jù)獲取后自己過濾，要先過濾在set進去絮短，一般在untils里加入個時間過濾方法或者其他什么的
6.關(guān)于webview的用法江兢，就直接<web-view src="{{url}}"></web-view>好了。要穿什么參數(shù)么丁频，在onload里的options自己處理嘛
7.關(guān)于一些自己寫的浮層彈窗
小程序不支持就是類似boot那種在body里可以加內(nèi)容的組件杉允，官方回復(fù)是自己寫咯邑贴。。叔磷。自己寫的話拢驾，如果你的彈窗出現(xiàn)后，彈窗蓋住的頁面依舊能夠滾動的改基，所以我建議是吧下面的東西用scroll-view包住繁疤，如果彈窗出現(xiàn)，那么scroll-y什么的設(shè)置成false秕狰，彈窗現(xiàn)實再設(shè)置成true,注意稠腊，，用了scroll-view鸣哀，那么在json文件里最好把disableScroll設(shè)置成true架忌。
8.請求的方法request最好統(tǒng)一封裝一個，否則要修改就聽麻煩的我衬，放一個我寫的：有點垃圾叹放，不過能用至少，哈哈
var baseUrl = getApp().globalData.apiBaseUrl;
function ajaxFetch(url, data, type) {
let sendObj = data || {};
let tmp = Date.parse(new Date()).toString().substr(0, 10);
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + url,
data: sendObj,
header: {
'FYH-App-Key': '',
'accept-Language': 'zh_CN',
'FYH-Session-Id': wx.getStorageSync('sessionId'),
'content-type': 'application/x-www-form-urlencoded',
'FYH-App-Timestamp': tmp
},
method: type,
success: function (res) {
if (res.statusCode == 302) {
// 這里是校驗憑證過去
} else {
resolve(res);
}
},
fail: function (err) {
reject(err)
}
})
})
}
module.exports = {
get: (url, data) => {
return ajaxFetch(url, data, 'GET')
},
post: (url, data) => {
return ajaxFetch(url, data, 'POST')
}
}
// 調(diào)用方法
var fetch = require("../../utils/fetch.js");// 先引入
fetch.get(url).then((res) => {
}).catch((err) => {
})
fetch.post(url, obj).then((res) => {
}).catch((err) => {
})
對對對挠羔，井仰，可以用。褥赊。
9.關(guān)于wx.uploadFile(OBJECT)
Fuker,傳圖片的地方我暫時只能一張一張傳糕档，不會批量傳。拌喉。有點坑的速那，Loading能好久，如果網(wǎng)速差一點就超時了尿背，端仰，目前我就傳的是壓縮圖，然后規(guī)定了最多5張田藐，遞歸傳嘛荔烧，還有就是如果還要傳參數(shù)，要注意編碼問題汽久，還有就是返回的字段要先調(diào)用JSON.parse(res);
10.關(guān)于生成小程序碼進入對應(yīng)的頁面鹤竭。。景醇。//先貼個生成小程序菊花碼的地址：https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html
里面有對應(yīng)path的字段臀稚，要后端去批量生成，然后我們前端需要
var id = decodeURIComponent(options.scene)三痰；獲取對應(yīng)id
options.scene是生成小程序碼的參數(shù)
其實主要是小程序的掃一掃二維碼匹配規(guī)則的地方只有5條的限制才去搞這個小程序碼的吧寺，窜管，
這里還有就是我把商品圖片和小程序碼合成一張圖。稚机。
這里會涉及canvas幕帆，我就提一點，其他都沒啥大問題赖条，文檔也說的挺詳細的失乾，就是網(wǎng)絡(luò)圖片地址不能直接放入canvas，不然讀不出來的谋币。仗扬。要先調(diào)用 wx.getImageInfo來獲取具體Path然后在繪制
11.關(guān)于Input沒有類似v-model的功能，
wxModel(e) {
let nowData = e.currentTarget.dataset.model;
var temData = {};
temData[nowData] = e.detail.value;
this.setData(temData)
}
自己寫一個雙向綁定的咯蕾额。早芭。小程序的set數(shù)據(jù)是同步更新的，不過能在setData的后面加回調(diào)诅蝶，保證數(shù)據(jù)渲染了再去執(zhí)行你想執(zhí)行的東西
example:
this.setData({
obj:obj
},()=>{
// do something
})
12.關(guān)于textarea組件退个，都不想吐槽了，调炬，一直這樣语盈，官方也沒有優(yōu)化，估計就是你愛用就用缰泡，不愛拉倒咯刀荒。。
其他功能其實也都差不多棘钞，不過有幾點我真的煩
一.各種樣式無法調(diào)整缠借，邊距大小什么的，
二.對應(yīng)的層級是最高的宜猜，如果一個頁面里有textarea組件泼返，還有自己的彈框，姨拥，那么問題就來了绅喉，你的textarea會完全蓋過你的彈框，無論怎么設(shè)置z-index都沒有用叫乌，還有就是如果把他設(shè)置成disable為true柴罐，模擬器上沒啥問題，憨奸，真機上依舊如此
我的建議是革屠，，，最好不要用啊屠阻。。賊煩
13.關(guān)于input的一個坑
password的屬性如果來回切換的話會出現(xiàn)無法選中Input的情況额各，并且第一次成功切換的話也會出現(xiàn)閃現(xiàn)国觉，效果并不是很好，不建議使用這個虾啦，社區(qū)也問了麻诀，至今沒有解決，如果有的就留個言傲醉，謝謝啦~~~
14關(guān)于支付方面的
有坑的地方就是蝇闭，剛接觸的時候不用看下面注意事項，硬毕，因為其實根本不會有那么多手機給你測試呻引，用戶取消支付觸發(fā)失敗就是fail的里面調(diào)用，complete里的回調(diào)最好不要用吐咳。逻悠。我自己碰到的賊菜哈哈，
還有就是wx.requestPayment的參數(shù)問題韭脊。
其實各種參數(shù)都需要后端去走公共支付接口獲取童谒，前端只要通過接口把訂單ID告訴后端就好了，沪羔，注意饥伊，，消費一次就要重新獲取哦
15.關(guān)于數(shù)據(jù)默認為true后又要設(shè)置成false的情況蔫饰，一些數(shù)據(jù)是要異步數(shù)據(jù)設(shè)置琅豆，會出現(xiàn)如果有，但是會閃一下死嗦，最好先都是false趋距，在去設(shè)置對應(yīng)的顯示效果
16,關(guān)于數(shù)據(jù)設(shè)置順序的問題，首先setData的都是同步發(fā)生的越除，并沒有所謂的異步节腐，有的回調(diào)也只是監(jiān)聽他渲染結(jié)束的一個動作，如果是一個數(shù)組的摘盆，最好是先concat()一個數(shù)組在去操作翼雀，最后在賦值回來，這個不想vue一想更新之后能自動更新孩擂，沒有數(shù)據(jù)監(jiān)聽的概念狼渊。
17,關(guān)于圖片背景
如果有些場景要用圖片，要么就是用Image,要么就是背景圖把圖片轉(zhuǎn)成base64位的情況，如果把大圖放入背景圖狈邑，那么又出問題城须。千萬====<image src=""/>一定要閉合！Ｃ灼弧８夥ァ（///////）這個東西
18.關(guān)于提交審核的問題
我前幾次沒有涉及到錢的版本，基本上2-3個小時就過了蘸嘶，良瞧，這次加了個我的資產(chǎn)，训唱，就單顯示了一個數(shù)據(jù)褥蚯，，審核居然2天况增。赞庶。
所以，最好不要有金額方面的東西澳骤。
19.登錄綁定的測試基本都是在真實環(huán)境尘执，用自己號多次幾次吧~~
20.小程序view組件無法是被\n或者后臺返回的?字符串，只能使用text組件
21.最近換了個安卓機宴凉，發(fā)現(xiàn)以前一直用Oppo vivo測誊锭，并沒有拿華為測試，有個小毛病弥锄，就華為上有丧靡，如果一個父div下子div右浮動并且里面包含了Input,那么這個定位會跑走，清除浮動也沒有用籽暇，最后都改成后邊有輸入用absolute解決的温治。一直沒發(fā)現(xiàn)，老板沒看到還好戒悠，不然要被扣工資了
22.今天朋友給我發(fā)了個奇怪的bug
社區(qū)里也有碰到自定義組件在某些版本里出現(xiàn)問題熬荆，目前我還沒想到啥解決辦法，先記錄下绸狐，等知道方法了在更
