申明:本文純屬資料整理,如有違規(guī)請(qǐng)?jiān)u論聯(lián)系作者刪除。
1. navigator點(diǎn)擊出現(xiàn)陰影,如何去除陰影
做法:將navigator組件的hover-class設(shè)置為none:hover-class="none"
<navigator url='index' class="nav" hover-class='none'>
.....
</navigator>
2. 頁(yè)面可以左右滑動(dòng)且出現(xiàn)白色部分
做法:因?yàn)轫?yè)面有元素總寬度超出 750rpx,所以導(dǎo)致頁(yè)面可以左右滑動(dòng)且出現(xiàn)白色部分。需要檢查好樣式,找出超過750rpx的原因,進(jìn)行修改。
3. 如何進(jìn)行針對(duì)某個(gè)頁(yè)面的下拉刷新:enablePullDownRefresh:true
在小程序的 app.json 中配置 window 項(xiàng)的enablePullDownRefresh為true,小程序的所有頁(yè)面都可以下拉刷新
如果只要某個(gè)頁(yè)面可以下拉刷新,只要配置這個(gè)頁(yè)面的config項(xiàng)enablePullDownRefresh:true即可。
同時(shí)配置 backgroundTextStyle: "dark",實(shí)現(xiàn)下拉刷新的點(diǎn)是黑色的
config = {
navigationBarTitleText: '....',
enablePullDownRefresh:true,
backgroundTextStyle: "dark"
}
監(jiān)聽頁(yè)面的下拉刷新事件
onPullDownRefresh(){
....
this.loadOrderList(1,true); //做一些異步請(qǐng)求,更新頁(yè)面數(shù)據(jù)
....
}
async loadOrderList(page,pullrefresh){
let result = await getOrderList(page);
.....
if (pullrefresh) { // 異步請(qǐng)求函數(shù)內(nèi)寫明,如果該函數(shù)是通過下拉刷新觸發(fā)的,請(qǐng)求結(jié)束后,需要關(guān)閉下拉刷新的動(dòng)畫效果
wx.stopPullDownRefresh();
}
this.$apply();
}
4. 如何禁止組件swiper手動(dòng)滑動(dòng)
有時(shí)候因?yàn)樾枨?,不希望用戶可以手?dòng)滑動(dòng)swiper-item
<swiper autoplay="true" circular="true" duration="2000" interval="7000" vertical="true" catchtouchmove='catchTouchMove'>
<swiper-item wx:for-items="{{list}}" wx:for-index="index" wx:key="index" catchtouchmove='catchTouchMove'>
....
</swiper-item>
</swiper>
methods = {
catchTouchMove(e){
return false;
}
}
5. IOS系統(tǒng)與Android系統(tǒng)Date數(shù)據(jù)類型比較不兼容
https://blog.csdn.net/qq_30604453/article/details/82021634
6. position:absolute布局IOS系統(tǒng)與Android系統(tǒng)不兼容
https://blog.csdn.net/qq_30604453/article/details/82116427
7. 如何解決map組件設(shè)置z-index無(wú)效
https://blog.csdn.net/qq_30604453/article/details/81670740
8. 改變數(shù)據(jù)然后通過$apply更新到視圖層(用到wepy框架)微信開發(fā)者工具正常,但是真機(jī)測(cè)試視圖層數(shù)據(jù)卻無(wú)更新
https://blog.csdn.net/qq_30604453/article/details/81670509
9. wepy:官方demo報(bào)錯(cuò) pages/index.js 出現(xiàn)腳本錯(cuò)誤或者未正確調(diào)用 Page()
https://blog.csdn.net/qq_30604453/article/details/80968909
10. 去除button按鈕的默認(rèn)邊框線
小程序就是這么神奇,直接 border:none 是沒有辦法去除按鈕的邊框線的。得這樣寫:
button::after{
border: none;
}
11. 增加按鈕的點(diǎn)擊反饋效果
wx.vibrateLong():使手機(jī)發(fā)生較短時(shí)間的振動(dòng)(400ms)
wx.vibrateShort():使手機(jī)發(fā)生較短時(shí)間的振動(dòng)(15ms)
但是該效果只支持iPhone7及以上機(jī)型以及少部分安卓機(jī)型
bindtap(){
wx.vibrateShort();
}
12. 優(yōu)化輸入為空時(shí)候的提示:利用input的屬性placeholder-class
<input placeholder-class="{{isNull?'color-red':''}}"/>
.color-red{
color:red;
}
testIsNull(val){
if(val==''){
this.isNull = true;
this.$apply();
}
}
13.chooseLocation無(wú)反應(yīng)
存在一種情況,就是當(dāng)首次申請(qǐng)授權(quán)使用用戶地理位置時(shí)被拒絕,接下來(lái)每次點(diǎn)擊chooseLocation都會(huì)沒有反應(yīng)。因?yàn)槭跈?quán)被拒后,都不會(huì)再?gòu)棾鍪跈?quán)彈框了。授權(quán)彈框只彈一次,所以必須考慮授權(quán)被拒的處理情況。授權(quán)被拒,只能打開設(shè)置頁(yè)面,讓用戶手動(dòng)授權(quán)。
一般我們?cè)趏nLoad頁(yè)面的時(shí)候就申請(qǐng)授權(quán)
當(dāng)使用chooseLocation的時(shí)候需要進(jìn)行fail處理
wx.chooseLocation({
success:function(res){
...//成功
},
fail:function(){
...//失敗
this.authorizationAgain(); // 提醒用戶再次授權(quán)
}
});
authorizationAgain(){
wx.getSetting({
success:function(res) {
if (!res.authSetting['scope.userLocation']) {
console.log('已經(jīng)拒絕過授權(quán)');
wx.showToast({
title:'您已經(jīng)拒絕過使用地理位置授權(quán)請(qǐng)求,請(qǐng)前往設(shè)置開啟授權(quán)',
icon:'none'
})
setTimeout(function(){
wx.openSetting({
success (res) {
console.log(res.authSetting)
}
})
},1500)
}
}
})
}
14.### input組件opacity設(shè)置為0,無(wú)效


就是這么神奇,微信開發(fā)者工具一切正常,但是真機(jī)測(cè)試 opacity:0 根本不起作用。這是小程序官方組件的bug。當(dāng)inpu focus時(shí) opacity:0就失效了。blur時(shí)又生效了。
所以要實(shí)現(xiàn)input隱藏的功能還不能使用opacity,得考慮其他途徑。
我是通過設(shè)置padding-left當(dāng)它變得很大,內(nèi)容被擠掉達(dá)到隱藏的效果??梢钥吹骄G色那一塊就是padding-left,
.input{
position: absolute;
top: 0;
left: 0;
height:80rpx;
font-size: 1rpx;
color:gray;
letter-spacing: 880rpx;
opacity: 0;
overflow: hidden;
padding-left:600rpx;
}
<view class="mask" wx:if='{{showPayModal}}' >
<view class="modal col">
<icon class='close' type="clear" size="26" bindtap='clickCloseMask'/>
<view class="title">輸入支付碼</view>
<view class="col input-panel " bindtap='inputpay'>
<view class="rect row">
<text class="fang row">{{paycodeText[0]}}</text>
<text class="fang row">{{paycodeText[1]}}</text>
<text class="fang row">{{paycodeText[2]}}</text>
<text class="fang row">{{paycodeText[3]}}</text>
<text class="fang row">{{paycodeText[4]}}</text>
<text class="fang row">{{paycodeText[5]}}</text>
</view>
<input bindinput='bindinput' class='input' type='number' password='true' maxlength='6' focus="{{focus}}"/>
</view>
</view>
</view>
.mask{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 99;
.modal{
position: fixed;
top: 42%;
left: 50%;
background: #fff;
width: 630rpx;
height: 342rpx;
border-radius: 8rpx;
transform: translate(-50%,-50%);
}
.input-panel{
justify-content: center;
position: relative;
margin-left: 12rpx;
}
.rect{
/* margin-left: -12rpx; */
}
.title{
font-size: 36rpx;
margin-top: 70rpx;margin-bottom: 60rpx;
font-weight: bold;
}
.close{
position: absolute;
top: 20rpx;
right: 20rpx;
}
.input{
position: absolute;
top: 0;
left: 0;
height:80rpx;
/* border: 1rpx solid red; */
font-size: 1rpx;
color:gray;
letter-spacing: 880rpx;
opacity: 0;
overflow: hidden;
padding-left:600rpx;
}
.fang{
width: 80rpx;
height: 80rpx;
border: 1rpx solid #ddd;
margin-right: 12rpx;
justify-content: center;
font-size: 36rpx;
color: #888;
}
}
15. chooseLocation API設(shè)計(jì)超級(jí)不合理而且返回結(jié)果極其隨意
chooseLocation返回?cái)?shù)據(jù)的關(guān)鍵字段分別是address:用來(lái)描述省市區(qū)街道,name:用來(lái)描述具體某個(gè)建筑物。當(dāng)我們點(diǎn)擊某一列數(shù)據(jù)時(shí),拿到的返回結(jié)果就是如上描述。從省市區(qū)街道建筑物,該有的數(shù)據(jù)都有,而且排列整齊,符合預(yù)期結(jié)果。
但是,如果用戶只是通過移動(dòng)地圖上的點(diǎn),移動(dòng)完后看下列默認(rèn)選擇的第一列數(shù)據(jù)剛好符合預(yù)期,直接點(diǎn)了確定,拿到的 address = name(基本相等,并不完全相等,是不是完全相等還是看緣分的) 其字符串組成大致為 “建筑物(市區(qū)街道)”。為什么說大致,這恰恰是我想吐槽的返回?cái)?shù)據(jù)的隨意性!取到什么數(shù)據(jù)完全看緣分!()里可能有市也可能沒有,可能有區(qū)街道描述,也可能沒有。不信的小伙伴多劃拉幾下測(cè)試幾遍你就知道了?。。?!
這兩種情況取到的數(shù)據(jù)有一個(gè)poiid可以區(qū)分。當(dāng)我們默認(rèn)選擇第一項(xiàng)數(shù)據(jù)時(shí),poiid為‘City’,可以看到address與name基本相等。當(dāng)通過點(diǎn)擊除第一項(xiàng)數(shù)據(jù)以外的數(shù)據(jù),poiid是一個(gè)具體的qqmap_id,address剛好描述其具體位置,name剛好是建筑物的名稱。

對(duì)于地址表設(shè)計(jì)謹(jǐn)慎精確的來(lái)說,這簡(jiǎn)直是爛到爆的API。沒有分割省市區(qū)街道,返回?cái)?shù)據(jù)有沒有省市區(qū)全看緣分。這時(shí)候還是需要引入第三方地圖。怕其他地圖產(chǎn)品跟微信小程序地圖產(chǎn)生結(jié)果會(huì)有細(xì)小的差別,只能選擇跟微信小程序出自同一個(gè)爸爸的騰訊地圖。
通過chooseLocation拿到經(jīng)緯度,再通過騰訊地圖進(jìn)行逆地址解析,取得province/city/district/street三個(gè)值。
具體教程查看 API 文檔 https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
其返回結(jié)果res.data.result.address_component含有nation(國(guó)家)/province(?。?city(市)/district(區(qū))/street(街)這是可以取用的數(shù)據(jù)。
但是formatted_addresses描述的數(shù)據(jù)會(huì)跟小程序chooseLocation顯示給用戶的數(shù)據(jù)有細(xì)小的差別,其描述的建筑物不一定是chooseLocation默認(rèn)第一項(xiàng)描述的建筑物,所以這一部分?jǐn)?shù)據(jù)不能取用。所以我們需要“湖景1號(hào)”的數(shù)據(jù)只能通過js截取字符串去截取
selectLocation(){
let that = this;
wx.chooseLocation({
success:function(res){
console.log(res);
that.form.longitude = res.longitude;
that.form.latitude = res.latitude;
let ischoose = res.poiid=='City';
that.form.street = res.address;
that.form.desc = res.name;
if (ischoose) {
that.form.desc = res.name.substring(0,res.name.lastIndexOf('('));
}
that.$apply();
that.loadCity(res.longitude,res.latitude,ischoose); //省市區(qū)
console.log('chooseLocation',res);
},
fail:function(){
that.authorizationAgain();
}
});
}
loadCity(longitude,latitude,flag){
var that = this;
wx.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' +
`${latitude},${longitude}&key=騰訊地圖Key`,
success(res) {
let info = res.data.result;
console.log(info);
let pro = info.address_component;
that.form.province = pro.province;
that.form.city = pro.city;
that.form.district = pro.district;
if (flag) {
that.form.street = info.address;
}
that.$apply();
}
})
16.數(shù)據(jù)綁定 Mustache 語(yǔ)法(雙大括號(hào))
這個(gè) {{}} 里面不能執(zhí)行任何的方法,只能做簡(jiǎn)單的四則運(yùn)算和Boolen判斷,比如:
<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
{{parseInt(i)}}
</view>
你這么干是不行的,你只能在拿到數(shù)據(jù)的時(shí)候就先對(duì)數(shù)據(jù)格式化一遍。
但是你如果非要在渲染的時(shí)候再格式化的話也行,你就只能通過WXS來(lái)處理了,比如:
<wxs module="m1">
var parse = function(str) {
return parseInt(str);
};
module.exports.parse = parse;
</wxs>
<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
{{m1.parse(i)}}
</view>
17. wx.navigateBack() 無(wú)法向回退的頁(yè)面?zhèn)鲄?/h3>
小程序的幾個(gè)導(dǎo)航api,都可以通過 url 給對(duì)應(yīng)的頁(yè)面?zhèn)鲄?。?w x.navigateBack({delta}), 只接受一個(gè)delta(返回的頁(yè)面數(shù))參數(shù)。但是有時(shí)候確確實(shí)實(shí)有向回退頁(yè)面?zhèn)鲄?shù)的情況,這時(shí)候就只能通過localstorage或是redux等來(lái)處理了。
18. rpx 單位適配問題
小程序提供的 rpx 單位確實(shí)讓我們開發(fā)的時(shí)候在高精度還原設(shè)計(jì)稿上省了很多事情。但是小記發(fā)現(xiàn)當(dāng)你使用1rpx在一些機(jī)型上特別容易出問題。
.border {
border: 1rpx solid #000;
}
如果你這樣設(shè)置邊框的時(shí)候,大多數(shù)情況下它都能正常顯示,但是在一些機(jī)器上尤其是 iPhone X 邊框有時(shí)候根本不顯示。所以我現(xiàn)在都改成 2rpx
19. 綁定事件獲取的target與currentTarget是有區(qū)別的
在綁定事件獲取當(dāng)前組件數(shù)據(jù)的時(shí)候,拿到的event里面有target和currentTarget 這兩個(gè)玩意兒里面都有一個(gè)dataset,而我們需要獲取的數(shù)據(jù)就在dataset對(duì)象里面。正確的我們應(yīng)該取 currentTarget 里面的就行,但是有時(shí)候這兩個(gè)的數(shù)據(jù)是完全一樣的,一不小心你就取錯(cuò)了。
那這個(gè) target 和 currentTarget 有什么區(qū)別呢,官方的解釋:
- target:觸發(fā)事件的源組件;
- currentTarget: 事件綁定的當(dāng)前組件;
看個(gè)例子:
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
點(diǎn)擊 inner view 時(shí),handleTap3 收到的事件對(duì)象 target 和 currentTarget 都是 inner,而 handleTap2 收到的事件對(duì)象 target 就是 inner,currentTarget 就是 middle。
其實(shí)很容易區(qū)分,target就是事件開始的地方,currentTarget就是你綁定事件的地方??梢匀タ纯?a target="_blank" rel="nofollow">小程序事件。
20. CSS引用靜態(tài)資源問題
iconfont, 圖片不能通過css,哦~應(yīng)該該叫 wxss 本地引入。
1、iconfont @font-face 引用的ttf等文件在小程序中不支持,可以使用線上或轉(zhuǎn)base64 參考 微信小程序wxss樣式文件中引用iconfont素材。
2、圖片可以使用base64或者線上鏈接?;蛘?lt;image>哦,對(duì)了圖片鏈接一定要帶 https 協(xié)議頭,形如://cdn.xxx.com/jflkadsjf.png 是不行的
21. view 添加點(diǎn)擊效果
需要主動(dòng)開啟
<view hover hover-class="view-hover">
22. page wxss樣式層級(jí)
下面是一個(gè)page 示例:
<!-- wxml -->
<view class="page-layout">
<view class="page__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item green">1</view>
<view class="flex-item red">2</view>
<view class="flex-item blue">3</view>
</view>
</view>
/* wxss */
.page-layout {
color: #000;
}
/* 下面這種寫法 .red 是不生效的 */
.red {
color: #f00;
}
/* 必須這么寫 */
.page-layout .red {
color: #f00;
}
23. 其他注意點(diǎn)
- 任何情況下的視圖更新只能通過setData()
- 路徑只能是五層,請(qǐng)盡量避免多層級(jí)的交互方式。
- 不要直接對(duì) Page.data 進(jìn)行修改,請(qǐng)使用 Page.setData
- 跳轉(zhuǎn)到tabbar頁(yè)面一定要用 wx.switchTab()
- 使用wx:for遍歷的時(shí)候最好加上wx:key=”{{index}}”
七牛云存儲(chǔ)整理的小程序坑
- 1、 不能執(zhí)行方法,只能處理簡(jiǎn)單的運(yùn)算如 “+ - * /”,比如遇到遍歷list,每個(gè)item的金額需要格式化,只能在js里預(yù)先格式化好再setData一遍( ╯□╰ )
- 2、只能通過,只能通過,只能通過setData()更新視圖,坑……….
- 3、我們規(guī)定頁(yè)面路徑只能是五層,請(qǐng)盡量避免多層級(jí)的交互方式。
- 4、A頁(yè)面–>B頁(yè)面,B頁(yè)面返回A,如何觸發(fā)A的刷新,不增加頁(yè)面層級(jí)。 暫時(shí)想到的方案:在A頁(yè)面的onshow事件里寫A的初始化數(shù)據(jù)邏輯。
- 5、
undefined 當(dāng)作字符串處理 if(xxx == “undefined”) 【后期版本迭代優(yōu)化了】 - 6、遇到奇怪的問題(如樣式等)先重啟工具,百試不爽
- 7、不支持本地web字體(需要使用線上字體),經(jīng)測(cè)試發(fā)現(xiàn)一些安卓就是不能正常顯示。幾經(jīng)折騰才發(fā)現(xiàn)原來(lái)還要存放字體的服務(wù)器要支持跨域。尼瑪,手機(jī)上調(diào)試也不報(bào)錯(cuò),差點(diǎn)放棄web字體了??撕镁?,坑………….
- 8、本地資源無(wú)法通過 css 獲取 可以使用網(wǎng)絡(luò)圖片,或者 base64,或者使用
<image/>標(biāo)簽 - 9、不能直接操作 Page.data 【避免在直接對(duì) Page.data 進(jìn)行賦值修改,請(qǐng)使用 Page.setData 進(jìn)行操作才能將數(shù)據(jù)同步到頁(yè)面中進(jìn)行渲染】
- 10、數(shù)字鍵盤用 type=”digit”
- 11、已用 https,但報(bào)無(wú)法建立與該服務(wù)器的安全連接是什么情況【需要 nginx 配置一下 https 的加密標(biāo)準(zhǔn)為tls1.2及以上】
- 12、wx.setStorage(OBJECT) 【目前每個(gè)小程序限制5M】
- 13、數(shù)據(jù)監(jiān)控【微信后臺(tái):事實(shí)訪問次數(shù)/昨日概況/累計(jì)訪問用戶數(shù)/TOP受訪頁(yè)】
- 14、微信調(diào)試神器,ngrok,見 ngrok
- 15、view 添加點(diǎn)擊效果[需要開啟hover效果]:
<view hover hover-class="item-hover">
- 16、用戶授權(quán)調(diào)試方法【開發(fā)工具-》清除手機(jī)授權(quán)數(shù)據(jù) (緩存-清除手機(jī)授權(quán)數(shù)據(jù)) 】
- 17、安卓手機(jī)上小程序第一次加載時(shí)候首頁(yè)時(shí)候, onshow方法會(huì)莫名其妙加載兩遍,而同樣在iphone下卻不會(huì),由于需要在onshow里面觸發(fā)獲取用戶信息,所以系統(tǒng)加載兩次onshow會(huì)導(dǎo)致后臺(tái)報(bào)錯(cuò)。。。
- 18、禁止頁(yè)面下拉: 設(shè)置 “disableScroll”: true 。
- 19、安卓下會(huì)出現(xiàn)getAppConfig:fail,無(wú)法獲取userInfo。微信問題,下載最新的微信安裝包
- 20、后臺(tái)不能接受POST數(shù)據(jù),但是可以接收GET請(qǐng)求參數(shù)
url: url,
data: data,
method: "POST",
dataType: "json",
header: {
'content-type': 'application/x-www-form-urlencoded' //==> 此處若為application/json則服務(wù)端無(wú)法獲取POST的參數(shù)
}
- 21、小程序第一次啟動(dòng)用戶拒絕授權(quán)后,下一次無(wú)法喚起授權(quán)彈框,默認(rèn)記住上一次用戶的選擇。暫時(shí)沒有找到解決方法,微信也沒有相關(guān)解析?!?017-01-10】
- 22、跳轉(zhuǎn)到有tabbar的頁(yè)面一定要用 wx.switchTab().這個(gè)在各個(gè)群里幾乎每天都有人問到!?。?/li>
- 22、綁定開發(fā)者/體驗(yàn)者時(shí)記得去手機(jī)上確認(rèn)邀請(qǐng)。(超多人問)

- 23、 微信后臺(tái)更新了request合法域名,可以直接去微信開發(fā)工具–>項(xiàng)目–>配置信息–>刷新,立馬生效。
- 24、 小程序官方?jīng)]有提供java版登錄信息解密示例,可以用這個(gè)demo java版解密demo
- 25、 使用wx:for遍歷的時(shí)候最好加上wx:key=”“,如果明確知道該列表是靜態(tài),或者不必關(guān)注其順序,可以選擇忽略,但是如果遍歷的數(shù)組會(huì)發(fā)生改變,則有可能導(dǎo)致數(shù)據(jù)順序會(huì)改變。