小程序花式填坑

1.前言

记录开发小程序过程中的花式填坑

2.使用 wx.getImageInfo 获取图片链接

如果src 参数对应的是一张不存在图片，那么在ios下面会报错，阻止下面的业务代码执行。在安卓了有兼容处理，只是不存在的图片，无法获取。下面的业务代码能获取。

wx.getImageInfo({
  src: src,
 success: function (res) {
    resolve(res)
  },
 fail:function () {
    reject()
  }
});

3.input组件 confirm 方法触发2次

以下代码sendCommen方法会触发2次

<scroll-view>
    <input confirm-type="send" @confirm="sendCommen" />
</scroll-view>

解决方法

<!--将input组件移出scroll-view-->
<scroll-view></scroll-view>
<input confirm-type="send" @confirm="sendCommen" />

4.scroll-view里元素定位问题

在scroll-view组件里面用fixed定位在ios下元素会跟着scroll-view滚动，出现布局异常

尽量不要在scroll-view里面使用定位

5.live-player 添加loading效果

只能用cover-view、cover-image盖在live-player

• 使用gif图片无动画效果
• 无法使用css animation动画，否则动画会出现异常
• wx.createAnimation 同上

建议：使用文字loading效果

  let _d = '.'
  this.timing = setInterval(() => {
    this.$apply(() => {
      this.loadingText = '加载中，请稍后' + _d
    })
    if(_d.length < 3) {
      _d += '.'
    } else {
      _d = '.'
    }
  }, 500)

6.swiper滑动出现卡顿

请尝试以下两种方法

6.1 方法一

display-multiple-items设置为true

6.2 方法二

如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

    if (e.detail.source === 'touch') {
        this.currentTab = e.detail.current;
    }

7.强制授权步骤

7.1检测是否授权

app.wepy

  // 查看是否授权
  wx.getSetting({
    success (res){
      if (res.authSetting['scope.userInfo']) {
        // 已授权，获取用户最新信息
        console.log('user had auto-auth');
        that.getUserInfo();
      }else {
        //未授权，跳转去授权页面强制授权
        console.log('user has no auto-auth');
        // 注意：这里使用navigateTo跳转，否则授权页getCurrentPages获取不到页面信息
        wx.navigateTo({
          url:'/pages/auth'
        })
      }
    }
  });

7.2获取上一个页面信息并销毁其他页面

auth.wepy

onLoad() {
  // 获取上一个页面
  let _prevPage = getCurrentPages().slice(-2)[0]
  // 处理死循环
  if (!this.$parent.globalData.prevPage) {
    // 存储上个页面数据
    this.$parent.globalData.prevPage = {
      route: _prevPage.route,
      options: _prevPage.options
    }
    // 清空其他页面,防止退出授权页
    wx.reLaunch({
      url: '/pages/auth'
    })
  }
}

7.3授权成功后，跳回上一个页面

auth.wepy

<button open-type="getUserInfo" bindgetuserinfo="uf">微信授权登录</button>
uf(e) {
    if(e.detail.errMsg === 'getUserInfo:ok') {
     // 拼接上一个页面参数和路径并跳转
      wx.redirectTo({
        url: _this.createURL('/' + _this.$parent.globalData.prevPage.route, _this.$parent.globalData.prevPage.options)
      })
    }
}
/**
 * @description 拼接路径
 * @param url 路径
 * @param param 参数
 */
createURL(url, param) {
  var urlLink = '';
  for (let key in param) {
    var link = '&' + key + "=" + param[key];
    urlLink += link;
  }
  urlLink = url + "?" + urlLink.substr(1);
  return urlLink.replace(' ', '');
}

8.输入框内容被键盘挡住怎么办

8.1方法一

设置 adjust-position默认就是为true, 个别机型无法上推页面

 <input adjust-position />

8.2方法二

//设置 adjust-position为false,监听获取焦点事件
<input adjust-position="{{false}}" @focus="onFocus"  style="{{isFocus ? 'transform:translate3d(0, ' + keyboardHeight + ', 0)' : 'transform:translate3d(0,0,0)'}}" />
//内容上推
<scroll-view style="{{isFocus ? 'transform:translate3d(0, ' + keyboardHeight + ', 0)' : 'transform:translate3d(0,0,0)'}}">
//获取焦点
focusFn(e) {
    // 设置当前状态为获取焦点状态
    this.isFocus = true
    // 获取键盘高度
    this.keyboardHeight = -e.detail.height + 'px'
}

9.长按点击事件

9.1方法一

使用官方给出的长按点击事件longpress事件进行实现

wxml中为图片绑定点击事件，事件类型为长按（手指触摸后，超过350ms立即触发该事件）

<image bindlongpress='longPress' src='{{userInfo.avatarUrl}}'></image>
longPress:function(){
  wx.showModal({ //使用模态框提示用户进行操作
    title:'警告',
    content:'你将清空小程序本地所有缓存！',
    success:function(res){
      if(res.confirm){ //判断用户是否点击了确定
        wx.clearStorageSync();
      }
   }
  })
}

9.1方法二

根据官方给出的touchstart（触摸开始时间）和touchend（触摸结束时间）事件，设计可以自定义长按时长的点击事件

<image bindtouchstart='touchStart' bindtouchend='touchEnd' bindtap='pressTap'src="{{userInfo.avatarUrl}}"></image>
touchStart:function(e){
  varthat=this;
  that.setData({
    touchStart:e.timeStamp
  })
},
touchEnd:function(e){
  varthat=this;
  that.setData({
    touchEnd:e.timeStamp
  })
},
pressTap:function(){
varthat=this;
vartouchTime=that.data.touchEnd-that.data.touchStart;
if(touchTime>1000){ //自定义长按时长，单位为ms
  wx.showModal({
    title:'警告️',
    content:'你将清空小程序本地所有缓存！',
    success:function(res){
      if(res.confirm){
        wx.clearStorageSync();
      }
    }
  })
}
}

10.下载图片

下载图片功能，下载的域名必须是https，并且在小程序后台设置downloadFile白名单；

11.微信小程序动画中如何将rpx转化px

1、需要借助的API：wx.getSystemInfoSync();

通过API可获取的值：

// 在 iPhone6 下运行：
var systemInfo = wx.getSystemInfoSync();
console.log(systemInfo.windowWidth); // 输出 375（单位 px）
 
// 在 iPhone6 Plus 下：
var systemInfo = wx.getSystemInfoSync();
console.log(systemInfo.windowWidth); // 输出 414 （单位 px）

2、px与rpx之间转换的公式：px = rpx / 750 * wx.getSystemInfoSync().windowWidth;

动画中如何使用：

//假设我想向右平移300rpx，动画代码如下：
this.animation.translateX(300 / 750 * systemInfo.windowWidth).step()

这样在所有机型上都可以进行适配。

12.获取自定义顶部导航高度

// let totalTopHeightSet = {
//   'iPhone': 64,
//   'iPhone X': 88,
//   'android': 68
// }
wx.getSystemInfo({
  success: function(res) {
    let totalTopHeight = 68
    if (res.model.indexOf('iPhone X') !== -1) {
      totalTopHeight = 88
    } else if (res.model.indexOf('iPhone') !== -1) {
      totalTopHeight = 64
    }
    //状态栏高度
    vm.globalData.statusBarHeight = res.statusBarHeight
    // 自定义导航高度
    vm.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
  },
  failure() {
    vm.globalData.statusBarHeight = 0
    vm.globalData.titleBarHeight = 0
  }
})

13.转发跳转导致ios页面卡死问题

在onShareAppMessage的返回值return之前进行redirectTo跳转页面，经过真机测试发现在安卓机上可以分享后跳转到对应的页面，但是在ios机上，吊起分享组建后，ios上页面会直接卡死。

解决方法：

// onShareAppMessage  设置个状态，根据这个状态  是否在onShow使用redirectTo
onShow() {
    if(this.isRedired) {
        // 在这跳转
    }
}
onShareAppMessage() {
    this.isRedired=true;
}

本文使用 mdnice 排版