小程序開發小結－線下服務器域名部署等

一、數據接口訪問

經常使用接口：

• 網絡接口：wx.request
• 文件上傳接口：wx.uploadFile

接口對應的服務器域名需在平臺進行配置，要求必須是https協議、且無故口號。發起請求時，將進行白名單驗證。

如此，在線下環境時，如何讓請求生效呢？開發環境下，小程序開發工具，提供了配置，可跳過白名單檢測，具體以下圖：

圖1 詳情 -> 不校驗安全域名、TLS版本以及HTTPS證書［勾選］

真機預覽時，該配置不生效，須要進行以下圖操做：

圖2 真機預覽時，打開調試

如此，即可在開發、真機預覽環境下，訪問數據接口了。

二、image組件問題

小程序其將圖片的處理都綜合在了image組件上，因此它的功能比更強大，但用起來也沒那麼方便。

• a、圖片size：在使用時，其size一般爲圖片的實際寬高，而在小程序當中，默認爲320px、240px，比例固定、尺寸也碩大，稍感不適。這也就使得須要更多額外的屬性，去處理該組件，使其展示正常。
• b、另，在普通的html、css下，每每會使用background-size去處理響應式，從而提供一個圖片填充的容器。但在小程序中，這並不能正常做用。其提供了「mode」屬性去作響應式處理，該「mode」有13種模式，其中對應css的background的四種屬性值舉例以下：
  • scaleToFill <==> background-size: 100% 100%;
  • aspectFit <==> background-size: contain;
  • aspectFill <==> background-size: cover;
  • widthFix <==> background-size: 100% auto。
• c、lazy-load屬性，用於圖片懶加載，與scroll-view配合使用。

三、wx.navigateTo

該api其行爲並不會如同單頁history同樣，當其被調用時，該單頁的做用域並未及時切換到另外一個page，且瞬時的連續跳轉也不會進行去重，因此，容易出現相同頁面連續期間屢次被調用，產生很差的用戶跳轉視覺體驗，同時致使頁面跳轉邏輯混亂，當回退時，老是回退到相同頁面，或者空白頁［數據爲來得及填充］。

解決方案：增長跳轉互斥鎖

• step1：定義鎖，全局屬性中增長互斥鎖數據對象定義，存儲鎖狀態；
• step2：上鎖，在navigate跳轉時，判斷互斥鎖，若是存在，則不跳；若是不存在，則上鎖，並跳轉；
• step3：解鎖，從新進入該頁面時，將互斥鎖打開。

相應代碼：

// step1
//app.js
App({
    globalData: {
        locks: {}
    }
})

// step2
// index.js
// 若是頁面互斥鎖存在，則返回
if (util.isLockedASet('indexNav')) {
    return
}
wx.navigateTo({
    url: '../detail/detail?id=' + id + '&oprType=' + oprType
})

// step3
// index.js 該方法爲頁面顯示時的回調方法
onShow() {
    util.closeLock('indexNav')
}

// util.js
let appInstance = getApp()

function isLockedASet(key) {
    let flag = false
    if (_getLock(key)) {
        flag = true
    } else {
        _setLock(key)
    }
    return flag
}

function closeLock(key) {
    appInstance.globalData.locks[key] = false
}

function _getLock(key) {
    return appInstance.globalData.locks[key]
}

function _setLock(key) {
    return appInstance.globalData.locks[key] = true
}

如上，完成互斥鎖的鎖定義、上鎖、解鎖的過程，保證每次跳轉僅發生一次。

四、scroll-view bindscrolltolower屢次觸發

scroll-view組件提供了bindscrolltolower功能，其是對觸底功能進行的封裝，如存在須要判斷觸底的交互時，可方便的調用。但該功能有個缺點，一次滾動操做，會屢次觸發bindscrolltolower，使得操做發生抖動，因此須要設置防抖的功能，進行相應的處理。代碼以下：

let debounceFn = util.debounceStart(this._bottomFn, 100, this)

防抖功能經常使用於用戶交互操做的性能提高，其原理、行爲、代碼實現等，請查閱上一篇wiki：性能提速：debounce（防抖）、throttle（節流／限頻）

五、setData的數據驅動

小程序也屬於數據驅動視圖，但其原理與vue略有不一樣，前面講到過，vue使用ES5的Object.defineProperty()來實現數據變動的監聽，如此能夠直接經過賦值，來獲取數據變動，從而驅動視圖變動。但在小程序中，須要顯示的調用setData()方法，才能拿到對應屬性的變化。下面給出setData()方法與Object.defineProperty()實現數據變動監測的實現代碼［並不是小程序和vue的源碼，只是更爲簡單的實現原理，幫助理解］：

// vue
// 對每一個數據生成對應的訂閱器，並進行修改劫持
_defineReactive(obj, key, val) {
    depBuff[key] = new Dep()
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            return val
        },
        // 監測數據變化，並通知訂閱器
        set(newValue) {
            if (newValue != val) {
                val = newValue
                depBuff[key].notify()
            }
        }
    })
}

// setData方法 若是值發生變化，則通知訂閱器
setData(obj) {
    Object.keys(obj).forEach((key) => {
        let value = obj[key]
        if (value != this.data[key]) {
            this.data[key] = value
            depBuff[key].notify()
        }
    })
}

vue的驅動原理，以前有單獨分享過，感興趣的能夠翻出來看下：vue雙向數據綁定原理