公司準(zhǔn)備APP和小程序并行開發(fā)譬正，所以需要開始著手小程序的編寫业踏，由于之前只是寫過(guò)小程序demo约炎，系統(tǒng)開發(fā)還是第一次植阴，此篇文章記錄小程序中遇到的各種坑。
1圾浅、小程序button按鈕自帶邊框效果掠手，而且直接設(shè)置border無(wú)法去掉，需要設(shè)置：after的樣式
.login-user-code button {
border: 1rpx solid #ffd530;
}
.login-user-code button::after {
border: 1rpx solid #ffd530;
}
2狸捕、登錄后跳轉(zhuǎn)到首頁(yè)時(shí)惨撇，如果首頁(yè)在tabBar中設(shè)置了路徑，就不能用wx.navigateTo跳轉(zhuǎn)府寒，需要用wx.switchTab跳轉(zhuǎn)才能成功魁衙；
3、給view設(shè)置背景圖片的時(shí)候株搔，不能用本地圖片剖淀，會(huì)導(dǎo)致無(wú)法加載。
background: url('../image/bisai-diwen.png' ) no-repeat center;
使用網(wǎng)絡(luò)圖片后正常
background: url('http://cdn.spbcn.org/Fengyong/Images/bisai-diwen.png' ) no-repeat center;
4纤房、這個(gè)不算小程序的坑纵隔，之前H5沒(méi)寫過(guò)，剛知道炮姨，設(shè)置背景圖片透明捌刮，但是文字不透明；
需要用兩個(gè)view來(lái)實(shí)現(xiàn)舒岸，父容器設(shè)置背景圖片绅作，子容器通過(guò)rgba設(shè)置透明度，就可以實(shí)現(xiàn)圖片透明蛾派，子容器中的文字不透明俄认；
代碼：
<view class='study-body'>
<view class='study-body-bg'>
測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試
<view class='study-body-list'></view>
</view>
</view>
css代碼：
父容器
.study-body {
width: 100%;
/* height: 800rpx; */
background: url('http://cdn.spbcn.org/Fengyong/Images/bisai-diwen.png' ) no-repeat center;
background-size: cover;
padding-bottom: 50rpx;
}
子容器
.study-body-bg {
background:rgba(255, 255, 255, 0.7);
}
效果對(duì)比：
5个少、小程序中view實(shí)現(xiàn)內(nèi)容超出后不換行，顯示為左右滑動(dòng)眯杏，而且隱藏滾動(dòng)條夜焦；
省市級(jí)三級(jí)聯(lián)動(dòng)中，小程序內(nèi)置了組件岂贩，直接用picker組件茫经，設(shè)置
mode="region"即可，但是內(nèi)哦讓區(qū)域無(wú)法用input顯示萎津，只能用view，所以會(huì)出現(xiàn)省市縣名稱過(guò)長(zhǎng)時(shí)超出view寬度姜性；wxml樣式
<view class="picker"> {{region[0]}}/{{region[1]}}/{{region[2]}} </view>
wxss樣式為
.picker{
line-height: 60rpx;
overflow-x: auto;
white-space: nowrap;
}
.picker::-webkit-scrollbar {
display: none
}
最終顯示效果為：
6瞪慧、小程序中video標(biāo)簽無(wú)法設(shè)置定位；
在小程序中播放視頻的時(shí)候部念，我們是希望視頻播放器固定于頁(yè)面頂部弃酌，下面的視頻列表是可以滑動(dòng)的儡炼，但是設(shè)置video的fixed定位的時(shí)候發(fā)現(xiàn)妓湘，在開發(fā)工具中是正常的乌询，但是在手機(jī)端會(huì)導(dǎo)致屏幕無(wú)法定位唬党。
解決方案：將其他需要滑動(dòng)的內(nèi)容全部放在scroll-view標(biāo)簽中，并且設(shè)置scroll-view的高度不能超過(guò)屏幕高度晶衷，即667px;
7、video層級(jí)過(guò)高問(wèn)題;
video的層級(jí)太高晌纫，就會(huì)導(dǎo)致video視頻畫面無(wú)法再添加我們想添加的東西税迷。設(shè)置z-index也無(wú)效箭养，比如你想在視頻頁(yè)面添加vip按鈕，提示用戶該視頻需要vip權(quán)限凌蔬，這個(gè)情況露懒，微信提供了cover-view標(biāo)簽闯冷，將內(nèi)容放到cover-view標(biāo)簽中砂心，在設(shè)置定位樣式即可懈词；
微信小程序官方說(shuō)明截圖：
8、小程序中更改radio的大斜绲坎弯；
使用radio組件的時(shí)候，發(fā)現(xiàn)選擇的圖標(biāo)無(wú)法更改大小译暂，設(shè)置width和height后不生效抠忘，查看后發(fā)現(xiàn)設(shè)置transform:scale(0.7)可以；
<label><radio color='#EB0000' style='transform:scale(0.7)' value="{{item.id}}" /></label>
效果如下：
原大型庥馈：
9崎脉、小程序如何阻止事件冒泡
正常事件綁定使用的是bindtap，但是該方法無(wú)法阻止事件冒泡伯顶，這樣就會(huì)觸發(fā)父元素綁定的事件囚灼，小程序提供另一種方法來(lái)解決該問(wèn)題，使用catchtap事件替換bindtap即可祭衩；
待更新灶体。。掐暮。蝎抽。
