小程式花式填坑

nuII發表於2019-02-22

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
  }
})
複製程式碼

12.轉發跳轉導致ios頁面卡死問題

在onShareAppMessage的返回值return之前進行redirectTo跳轉頁面，經過真機測試發現在安卓機上可以分享後跳轉到對應的頁面，但是在ios機上，吊起分享組建後，ios上頁面會直接卡死。

解決方法：

// onShareAppMessage  設定個狀態，根據這個狀態  是否在onShow使用redirectTo
onShow() {
    if(this.isRedired) {
        // 在這跳轉
    }
}
onShareAppMessage() {
    this.isRedired=true;
}
複製程式碼

相關文章