【小程序】踩坑记

最新推荐文章于 2024-07-08 16:51:42 发布

墨霁青玉

最新推荐文章于 2024-07-08 16:51:42 发布

阅读量2.9k

点赞数 3

分类专栏：微信小程序文章标签：小程序下拉刷新 swiper

本文链接：https://blog.csdn.net/qq_30604453/article/details/82216927

版权

微信小程序专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1. navigator点击出现阴影，如何去除阴影

2. 页面可以左右滑动且出现白色部分

3. 如何进行针对某个页面的下拉刷新：enablePullDownRefresh:true

4. 如何禁止组件swiper手动滑动

5. IOS系统与Android系统Date数据类型比较不兼容，new Date().getTime()为null或NaN

6. position：absolute布局IOS系统与Android系统不兼容

7. 如何解决map组件设置z-index无效

8. 改变数据然后通过$apply更新到视图层无效

9. wepy：官方demo报错 pages/index.js 出现脚本错误或者未正确调用 Page()

14. input组件opacity设置为0无效

15. 官方chooseLocation API设计不合理导致的bug

16.z-index在textarea上无效

17.上传代码体积超过限制

18. new Date(时间戳) 转化年份为1970年

19. font-weight:600 部分安卓机型加粗无效

20. border为1rpx并且有圆角的时候会出现糊边

21. 代码换行导致文字（加号＋，减号－）消失

22. text出现莫名高度

24.页面计时器bug，计得很快

25. image与image之间存在缝隙

26.如何让swiper高度自适应

27.swiper轮播图片动态更新，swiper空白

28.按钮怎么调都没办法文字上下左右居中（style:v2带来的诡异效果）

1. navigator点击出现阴影，如何去除阴影

做法：将navigator组件的hover-class设置为none：hover-class="none"

<navigator url='index' class="nav" hover-class='none'>
   .....
</navigator>

2. 页面可以左右滑动且出现白色部分

做法：因为页面有元素总宽度超出 750rpx，所以导致页面可以左右滑动且出现白色部分。需要检查好样式，找出超过750rpx的原因，进行修改。

3. 如何进行针对某个页面的下拉刷新：enablePullDownRefresh:true

在小程序的app.json中配置window项的enablePullDownRefresh为true，小程序的所有页面都可以下拉刷新

如果只要某个页面可以下拉刷新，只要配置这个页面的config项enablePullDownRefresh:true即可。

同时配置 backgroundTextStyle: "dark"，实现下拉刷新的点是黑色的

config = {
  navigationBarTitleText: '....',
  enablePullDownRefresh:true,
  backgroundTextStyle: "dark"
}

监听页面的下拉刷新事件

onPullDownRefresh(){
  .... 
  this.loadOrderList(1,true);  //做一些异步请求，更新页面数据
  ....
}

async loadOrderList(page,pullrefresh){
  let result = await getOrderList(page);
  .....
  if (pullrefresh) { // 异步请求函数内写明，如果该函数是通过下拉刷新触发的，请求结束后，需要关闭下拉刷新的动画效果
    wx.stopPullDownRefresh();
  }
  this.$apply();
}

4. 如何禁止组件swiper手动滑动

有时候因为需求，不希望用户可以手动滑动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系统与Android系统Date数据类型比较不兼容，new Date().getTime()为null或NaN

比较时间需要将时间字符串“2019-11-18 14:44:00”转化为时间戳

let startTime = new Date(s1).getTime()  // s1: "2018-10-18 14:44:00"
let endTime = new Date(s2).getTime()  // s2:  "2019-11-18 14:44:00"
let now = new Date().getTime()
if(startTime < now && now < endTime) { // 已开始但未结束
    // code.....
}

经上机测试，在Android系统中，该代码片段正常运行，但是在IOS系统中出错，new Date(s)拿到的是null

原来，'2018-10-10 18:00’时间格式适用于Android系统，但是IOS系统却要这种时间格式‘2014-09-25T13:24:00’

修改后代码如下

let startTime = new Date(s1.replace(/\-/g, '/')).getTime()  // s1: "2018-10-18 14:44:00"
let endTime = new Date(s2.replace(/\-/g, '/')).getTime()  // s2:  "2019-11-18 14:44:00"
let now = new Date().getTime()
if(startTime < now && now < endTime) { // 已开始但未结束
    // code.....
}

https://blog.csdn.net/qq_30604453/article/details/82021634

6. position：absolute布局IOS系统与Android系统不兼容

https://blog.csdn.net/qq_30604453/article/details/82116427

7. 如何解决map组件设置z-index无效

https://blog.csdn.net/qq_30604453/article/details/81670740

8. 改变数据然后通过$apply更新到视图层无效

（用到wepy框架）微信开发者工具正常，但是真机测试视图层数据却无更新

https://blog.csdn.net/qq_30604453/article/details/81670509

9. wepy：官方demo报错 pages/index.js 出现脚本错误或者未正确调用 Page()

https://blog.csdn.net/qq_30604453/article/details/80968909

10. 去除button按钮的默认边框线

小程序就是这么神奇，直接 border:none 是没有办法去除按钮的边框线的

得这样写

button::after{
  border: none;
}

11. 增加按钮的点击反馈效果

wx.vibrateLong():使手机发生较短时间的振动（400ms）

wx.vibrateShort():使手机发生较短时间的振动（15ms）

但是该效果只支持iPhone7及以上机型以及少部分安卓机型

bindtap(){
  wx.vibrateShort();
}

12. 优化输入为空时候的提示

利用input的属性placeholder-class

<input placeholder-class="{{isNull?'color-red':''}}"/>

.color-red{
 color:red;
}

testIsNull(val){
 if(val==''){
   this.isNull = true;
   this.$apply();
 }
}

13.chooseLocation无反应

存在一种情况，就是当首次申请授权使用用户地理位置是被拒绝，接下来每次点击chooseLocation都会没有反应。因为授权被拒后，都不会再弹出授权弹框了。授权弹框只弹一次，所以必须考虑授权被拒的处理情况。授权被拒，只能打开设置页面，让用户手动授权。

一般我们在onLoad页面的时候就申请授权

当使用chooseLocation的时候需要进行fail处理

wx.chooseLocation({
  success:function(res){
    ...//成功
  },
  fail:function(){
    ...//失败  
    this.authorizationAgain(); // 提醒用户再次授权
  }
});

authorizationAgain(){
      wx.getSetting({
        success:function(res) {
          if (!res.authSetting['scope.userLocation']) {
            console.log('已经拒绝过授权');
            wx.showToast({
              title:'您已经拒绝过使用地理位置授权请求，请前往设置开启授权',
              icon:'none'
            })
            setTimeout(function(){
              wx.openSetting({
                success (res) {
                  console.log(res.authSetting)
                }
              })
            },1500)
          }
        }
      })
    }

14. input组件opacity设置为0无效

就是这么神奇，微信开发者工具一切正常，但是真机测试 opacity:0 根本不起作用。这是小程序官方组件的bug。当inpu focus时 opacity:0就失效了。blur时又生效了。

所以要实现input隐藏的功能还不能使用opacity，得考虑其他途径。

我是通过设置padding-left当它变得很大，内容被挤掉达到隐藏的效果。可以看到绿色那一块就是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设计不合理导致的bug

chooseLocation API设计超级不合理而且返回结果极其随意

chooseLocation返回数据的关键字段分别是address：用来描述省市区街道，name：用来描述具体某个建筑物。当我们点击某一列数据时，拿到的返回结果就是如上描述。从省市区街道建筑物，该有的数据都有，而且排列整齐，符合预期结果。

但是，如果用户只是通过移动地图上的点，移动完后看下列默认选择的第一列数据刚好符合预期，直接点了确定，拿到的 address = name（基本相等，并不完全相等，是不是完全相等还是看缘分的）其字符串组成大致为 “建筑物(市区街道)”。为什么说大致，这恰恰是我想吐槽的返回数据的随意性！取到什么数据完全看缘分！()里可能有市也可能没有，可能有区街道描述，也可能没有。不信的小伙伴多划拉几下测试几遍你就知道了！！！！

这两种情况取到的数据有一个poiid可以区分。当我们默认选择第一项数据时，poiid为‘City’，可以看到address与name基本相等。当通过点击除第一项数据以外的数据，poiid是一个具体的qqmap_id，address刚好描述其具体位置，name刚好是建筑物的名称。

对于地址表设计谨慎精确的来说，这简直是烂到爆的API。没有分割省市区街道，返回数据有没有省市区全看缘分。这时候还是需要引入第三方地图。怕其他地图产品跟微信小程序地图产生结果会有细小的差别，只能选择跟微信小程序出自同一个爸爸的腾讯地图。

通过chooseLocation拿到经纬度，再通过腾讯地图进行逆地址解析，取得province/city/district/street三个值。

具体教程查看 API 文档 https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html

其返回结果res.data.result.address_component含有nation（国家）/province（省）/city（市）/district（区）/street（街）这是可以取用的数据。

但是formatted_addresses描述的数据会跟小程序chooseLocation显示给用户的数据有细小的差别，其描述的建筑物不一定是chooseLocation默认第一项描述的建筑物，所以这一部分数据不能取用。所以我们需要“湖景1号”的数据只能通过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);  //省市区
            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();
          }
      })
    }

// 2018-8-30 截止

// 是的，我又来更新了，奈何小程序坑太多。还有好多坑忘记当时补上，现在再来想已经记不起来了，只能写印象深刻的

16.z-index在textarea上无效

这个问题在问题7上犯过，奈何就是不长记性。贴上官网截图

原生组件：camera / canvas / input / live-player / live-pusher / map / textarea / video

一开始用 view写的这个弹层用到 z-index，position:fixed。微信开发者工具完全看不出问题。一上真机，弹层完全遮不住textarea（能遮住input）。以为是z-index的问题，把z-index改的大大的，照样不起作用。查看官网文档，z-index无法覆盖textarea。好吧，那用cover-view。把view和text标签全部换成cover-view，把image标签换成cover-image标签。完美滴！弹层遮住了textarea。别急，下面还有bug！

在iPhone7测试正常。但是在iPhone6S出现这种情况：弹层下面的面板被压平了，根本出不来。

最后解决：给弹层下面的白色面板设置固定高度。之前弹层下面的白色面板是没有设置高度，高度自适应。

最后，要注意cover-view各项功能支持的基础库。

因为我的弹层设置了position:fixed。需要设置线上最低基础库为1.9.90。（设置/基本设置/基础库最低版本设置/选择1.9.90）

17.上传代码体积超过限制

微信规定小程序体积不超过2M，这时候就需要缩减优化代码，减少图片体积了。但是这减出来余量也是杯水车薪。这时候就注意到一个叫“分包”的功能了。可以根据项目的模块，将独立的模块分成一个一个包。

微信小程序官方分包教程

目前小程序分包大小的限制是：每个主包分包大小不超过2M，所有分包大小不超过8M

主包：放置默认启动页面 / tabbar页面 / 公共资源

分包：根据项目模块进行划分

分包操作很简单，在小程序的app.json中配置subPackages字段

每个分包相对独立，不能引用其他分包的资源，但是可以引用主包的资源

config = {
    pages: [   //主包页面路径
      .....
    ],
    window: {
      ....
    },
    tabBar: {
      ....
    },
    subPackages:[  //分包数组
      {  //包 1  packageA
        root:'modules/packageA',  //分包根目录
        name:'packageA',          //分包别名，分包预下载时可以使用
        pages:[                   //分包页面路径，相对与分包根目录
          'pages/page1',
          'pages/page2',
           ....
        ]
      }, 
      {  //包 2 packageB
        root:'modules/packageB',
        name:'packageB',
        pages:[
          'pages/page1',
          'pages/page2',
           ....
        ]
      },
      ......
    ]
  }

18. new Date(时间戳) 转化年份为1970年

解决方法 new Date（时间戳*1000）

19. font-weight:600 部分安卓机型加粗无效

解决方法 font-weight:bold

// 2018-08-30 截止

// 嗯我又来更新了 ....

20. border为1rpx并且有圆角的时候会出现糊边

我们知道小程序自己出了一个单位 rpx 。

rpx其实是微信对于rem的一种应用的规定，或者说一种设计的方案，官方上规定屏幕宽度为20rem，规定屏幕宽为750rpx。

当border设置为1rpx并且有圆角border-radius时，圆角区域很容易出现糊边。因为1rpx也就相当于0.5px的大小（iPhone6）。在微信开发者工具中并不会糊边，一旦上真机，就糊边了。所以建议border不要设置为1rpx，而直接写成 1px

// 2019-04-03截止

21. 代码换行导致文字（加号＋，减号－）消失

22. text出现莫名高度

这两个问题放在一起讲，因为导致的原因都是一样的，先出现问题的图片

接手了一个项目，里面有这样一段代码（已简化）

<button> ＋ </button>
<button> － </button>

我格式化了一下代码，变成

<button> 
  ＋ 
</button>
<button> 
  － 
</button>

开发工具正常，上真机却发现 + - 消失不见了。仙人板板，代码格式也能影响渲染?！最后把格式改回来了，恢复正常。

查看了元素， + - 号也在，代码格式的换行导致渲染也出现了换行

下面同理

编辑器里代码的换行导致text前面出现莫名高度

<text> 
  ￥39.8
</text>

最后更新为，一切正常

<text> ￥39.3 </text>

有谁遇到类似的问题不？哪位大神知道原因？

24.页面计时器bug，计得很快

页面有一个倒计时的计时器interval。发现页面的计时器interval，不是一秒变一下，有的时候一秒减掉2秒，有的时候一秒减掉3秒。经过反复测试，发现，一开始进入页面正常，第n次进入页面就会一秒减掉n秒。

原因：页面的计时器没有被清除，反复退出，进入页面的时候，页面会产生多个计时器，多个计时器同时作用导致页面计时器计时异常。

解决办法：在退出页面的时候记得清除计时器！！！！（生命周期onUnload）

25. image与image之间存在缝隙

页面全是图片，一行有1-4张图片，有n行，使用flex布局，发现图片与图片之间存在微小缝隙，如何清除这个缝隙呢？

解决方法：图片image设置 display:block；包裹图片的父元素设置font-size:0;

注意，此时开发者工具看可能还有缝隙，但是上真机看是不存在缝隙的。

26.如何让swiper高度自适应

swiper轮播的图片通过后台接口获取，没办法事先设置swiper高度，那么如何让swiper自适应轮播图片的高度呢？

关键点：

1. 设置swiper的高度bannerHeight

2. 通过image的bindload事件获取图片高度，修改bannerHeight的值。

<swiper class="swiper" style='height:{{bannerHeight}}rpx' indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}">
  <block wx:for="{{bannerData}}" wx:key="index">
    <swiper-item class="swiper-item">
      <image class="swiper-image" src="{{item.imgUrl}}" bindload="loadImg" data-item="{{item}}" bindtap="linkToPage"/>
    </swiper-item>
  </block>
</swiper>

.swiper {
  width: 750rpx;
}
.swiper-item {
  width: 100%;
  height: 100%;
}
.swiper-image {
  width: 750rpx;
  height: 100%;
}

    loadImg(e) {
      var imgh = e.detail.height;　　　　　　　　　　　　　　　　//图片高度
      var imgw = e.detail.width;
      this.setData({
        bannerHeight: (imgh / imgw) * 750
      })
    }

27.swiper轮播图片动态更新，swiper空白

续上26，swiper的轮播图片列表通过后台获取，偶尔会出现空白情况。通过多次反复测试，得出结论，swiper有一个current属性，表示当前轮播图的下标。假如有5张轮播图，当前轮播到第5张，current则为4。此时再去刷新轮播图，如果后台拿到轮播图片列表的数量少于5（例如只有3张图），此时current仍为之前的停留状态4，超过更新后的轮播图数量，就会报错，swiper变为空白。

所以，当我们的swiper是动态更新的话，一定要对current做处理！！！每次获取新的轮播图后，记得将current设置为0！！！

<swiper class="swiper" current="{{currentIndex}}" style='height:{{bannerHeight}}rpx' indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}">
  <block wx:for="{{bannerData}}" wx:key="id">
    <swiper-item class="swiper-item">
      <image class="swiper-image" src="{{item.imgUrl}}" bindload="loadImg" data-item="{{item}}" bindtap="linkToPage"/>
    </swiper-item>
  </block>
</swiper>

currentIndex默认为0，每次bannerData更新后，将currentIndex再次设置为0！

28.按钮怎么调都没办法文字上下左右居中（style:v2带来的诡异效果）

通过微信开发者工具新建项目，此时app.json里出现"style": "v2"字段，但我没有注意到。将以前写的组件代码全部拷贝过来，发现按钮的样式十分奇怪，怎么调样式都调不回原来的样式。

这里特别吐槽一下，微信升级的所谓的v2版样式，居然给所有按钮加了min-height！！

button:not([size='mini'])的样式蜜汁奇怪！

删掉app.json的"style": "v2"字段，样式一切恢复正常。

墨霁青玉

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
3
评论
【小程序】踩坑记

目录1. navigator点击出现阴影，如何去除阴影2. 页面可以左右滑动且出现白色部分3. 如何进行针对某个页面的下拉刷新：enablePullDownRefresh:true4. 如何禁止组件swiper手动滑动5. IOS系统与Android系统Date数据类型比较不兼容，new Date().getTime()为null或NaN6. position：ab...
复制链接

扫一扫

专栏目录