小程序花式填坑

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;
}
複製代碼