微信小程序踩坑資料整理

申明:本文純屬資料整理,如有違規(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)。(超多人問)
error
  • 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ì)改變。

參考資料

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容