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

1、數據接口訪問

常用接口：

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

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

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

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

真機預覽時，該配置不生效，需要進行如下圖操作：

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

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

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配合使用。

3、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
}

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

4、scroll-view bindscrolltolower多次觸發

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

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

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

5、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雙向數據綁定原理