小程序花式填坑

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

一、须要借助的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）
复制代码

二、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;
}
复制代码