前短時(shí)間公司在探索新的C端產(chǎn)品，在一段艱難的抉擇之后脖旱，決定先從小程序入手而非app原生開(kāi)發(fā)堪遂，畢竟微信自帶的流量對(duì)我們還是有很大吸引力的介蛉，所以我也不得不去踩小程序的坑(是真的坑)，至今為止項(xiàng)目已經(jīng)有20萬(wàn)+的用戶溶褪，也算可以告一段落币旧，這里準(zhǔn)備把最近遇到的坑整理一下，后續(xù)如果遇到問(wèn)題也會(huì)持續(xù)更新竿滨。歡迎大家?guī)兔ρa(bǔ)充問(wèn)題或提出錯(cuò)誤~
接下來(lái)我會(huì)把問(wèn)題分為以下幾大類(lèi)佳恬，控件問(wèn)題，小程序基本知識(shí)和小程序后臺(tái)管理問(wèn)題于游。
控件問(wèn)題
原生組件
input canvas camera live-player live-pusher map textarea video
以上是原生組件毁葱，小程序組件與原生組件有本質(zhì)區(qū)別，原生組件脫離在webview渲染流程外贰剥。開(kāi)發(fā)者工具上的原生組件用web組件模擬倾剿，所以和真機(jī)很多情況不一致，有原生組件的最好使用真機(jī)模式調(diào)試
原生組件的問(wèn)題
原生組件層級(jí)最高 其他組件z-index不能遮擋原生組件
原生組件不能再 scroll-view swiper picker-view movable-view使用
不能設(shè)置css動(dòng)畫(huà)
不能設(shè)置position:fixed
不能再父節(jié)點(diǎn)使用overflow:hidden裁剪原生組件顯示區(qū)域
原生組件不能使用bind:eventname寫(xiě)法只能bindeventname蚌成。也不支持catch和capture綁定
iOS原生組件不能觸摸
原生組件能擋住vConsole
cover-view / cover-image
如果我們需要在原生組件上覆蓋視圖或圖片前痘，由于原生組件層級(jí)最高的原因，所以我們只能使用提供給我們的cover-view和cover-image
可覆蓋在原生組件上担忧，只可cover-view和cover-image互相嵌套芹缔，或在cover-view上添加button
scroll-view
小程序給我們提供了一個(gè)可以滾動(dòng)的控件，可對(duì)比iOS的UIScrollView和android的ScrollView最欠，可以實(shí)現(xiàn)獨(dú)立的滾動(dòng)區(qū)域，不過(guò)遇到一些問(wèn)題的時(shí)候惩猫，還是要乖乖使用自帶的Page滾動(dòng)。
scroll-view中不能使用原生組件,如果長(zhǎng)頁(yè)面中有原生組件轧房，還是要使用Page滾動(dòng)
滾動(dòng)scroll-view時(shí)會(huì)阻止頁(yè)面回彈，所以不能觸發(fā)onPullDownRefresh
如果想使用下拉刷新(觸發(fā)onPullDownRefresh)奶镶，就要使用頁(yè)面的滾動(dòng)迟赃，page滾動(dòng)同樣可以通過(guò)點(diǎn)擊頂部狀態(tài)欄回到頁(yè)面頂部
下拉刷新
“enablePullDownRefresh”:”true”
onPullDownRefresh:function(){ wx.stopPullDownRefresh() }
這里在特定位置要使用wx.stopPullDownRefresh() 方法停止捺氢，否則會(huì)一直保持下拉的狀態(tài)
NavigationBar / TabBar
不支持自定制樣式，只能通過(guò)創(chuàng)建view的方式模擬，原生顏色只支持純色悠反，navigationBarTextStyle導(dǎo)航條標(biāo)題色只能white或black
同樣不支持自定制功能残黑，如果轉(zhuǎn)發(fā)的小程序路徑是二級(jí)頁(yè)面，那么打開(kāi)的小程序沒(méi)有返回按鈕梨水，如果想把導(dǎo)航條加返回按鈕，同樣只能通過(guò)創(chuàng)建view方式模擬
Page滾動(dòng)
動(dòng)態(tài)滾動(dòng)page頁(yè)面 wx.pageScrollTo({ scrollTop:0 }) //scrollTop表示滾動(dòng)到頂部的距離
頁(yè)面跳轉(zhuǎn)
wx.navigateTo等方式進(jìn)行跳轉(zhuǎn)疫诽，重點(diǎn)是如果有頁(yè)面屬于tabBar上，那只能用wx.switchTab跳轉(zhuǎn)到tabBar頁(yè)面奇徒，原本頁(yè)面會(huì)消失同樣不會(huì)有返回按鈕
小程序基本知識(shí)
快速新建文件
app.json填寫(xiě)路徑保存就可以生成包含四個(gè)必要文件的文件夾，例如"pages/index/index"
找不到文件路徑
如果發(fā)現(xiàn)提示類(lèi)如 pages/index/index not found類(lèi)型的提示摩钙，表示沒(méi)有在app.json的page里面添加該文件路徑，同上一條胖笛，最好使用直接在app.json中填寫(xiě)路徑的方式創(chuàng)建文件，快速又不會(huì)出錯(cuò)
Pages順序的問(wèn)題
首頁(yè)要寫(xiě)在page的最前面长踊，page第一個(gè)下標(biāo)為第一個(gè)加載的頁(yè)面，順序也盡量保證二級(jí)頁(yè)面在一級(jí)頁(yè)面后面身弊，避免找不到的問(wèn)題
boolean類(lèi)型的標(biāo)簽屬性
boolean類(lèi)型的屬性，例如scroll-y佑刷，希望生效可以直接用scroll-y或者scroll-y=“xxx” 這里xxx即使是false字符串也一樣生效莉擒，想不生效可以使用 scroll-y=“” 這里留空 表示false瘫絮，如果寫(xiě)了值，本人理解為任何有值的字符串其實(shí)都為真也就是true麦萤，當(dāng)然默認(rèn)值為false這里不考慮
wxss
小程序的像素單元可以使用rpx，rpx可以完美解決適配問(wèn)題
組件和引用組件的頁(yè)面不支持id選擇器#a壮莹，屬性選擇器[a]
使用子元素選擇器只能在view標(biāo)簽和子節(jié)點(diǎn)中使用
button邊框
給button本身設(shè)置border無(wú)效 button根據(jù)::after實(shí)現(xiàn)的邊框，使用button::after{border:none;}
數(shù)據(jù)操作
使用this.data.userInfo = xxx; 這種格式不能做到data中數(shù)據(jù)的修改命满，要使用this.setData({userInfo:xxx})這種方式
富文本問(wèn)題
項(xiàng)目中難免會(huì)遇到使用富文本，小程序有一套成熟的富文本解析框架：wxParse.js
控件定制問(wèn)題
不能自定制小程序控件的樣式，例如slider不支持縱向樣式歼疮，即使使用旋轉(zhuǎn)實(shí)現(xiàn)樣式，但是手勢(shì)還是橫向操作
小程序后臺(tái)管理問(wèn)題
AppSecret
生成之后一定保存好韩脏，否則重置的話，不止前臺(tái)對(duì)接第三方sdk問(wèn)題赡矢，包括后端的配置都要改，如果漏掉一個(gè)忘記修改就會(huì)有很大的坑出現(xiàn)吹散，所以還是盡量不要修改
服務(wù)器域名配置問(wèn)題
基本接口api地址域名，上傳文件域名送浊，業(yè)務(wù)域名一定第一時(shí)間在小程序后臺(tái)配置好，否則原本開(kāi)發(fā)測(cè)試沒(méi)問(wèn)題的項(xiàng)目袭景，發(fā)布生產(chǎn)之后就會(huì)各種接口突然不能調(diào)用了
上線問(wèn)題
所選分類(lèi)一定注意唁桩，如果分類(lèi)對(duì)應(yīng)不上小程序的類(lèi)型荒澡，無(wú)法審核通過(guò)
如果小程序的某些功能如果需要證書(shū)(如視頻播放)，那么請(qǐng)?zhí)崆稗k好与殃，否則同樣不能審核通過(guò)或強(qiáng)制下架
配置修改次數(shù)問(wèn)題
小程序很多設(shè)置一定時(shí)間段修改次數(shù)是有限的，一定要提前注意幅疼，否則會(huì)造成無(wú)法修改信息的情況
小程序發(fā)布后每年只能修改2次名稱(chēng)，每月可以修改5次頭像
服務(wù)器域名和業(yè)務(wù)域名等也有限制爽篷，服務(wù)器域名每個(gè)月可以修改5次，業(yè)務(wù)域名每年修改50次
以上遇到的坑是我這段時(shí)間親身經(jīng)歷逐工，后期會(huì)持續(xù)更新，如果大家有什么遇到的問(wèn)題泪喊，歡迎一起分享棕硫。
