開發微信小程序，為什麼只使用 upData

鑑於在下使用微信小程式開發時使用setData 的蹩腳體驗，開發了個函式庫函數wx-updata，專案上線之後，我把這個自用的函式庫函數整理放到Github 上開源出來wx-updata，這個函式庫函數在開發的時候對我很有幫助，希望也可以幫到大家

如果大家在使用中遇到了問題，可以給我提pr，提issue，一起來改善小程式開發體驗～

• #wx-updata 版本0.0.10

• #Github 位址： github.com/SHERlocked9…

• 小程式碼片段預覽位址： developers.weixin.qq.com/s/CcXdO1mc7…

• 小程式碼片段程式碼位址： github.com/SHERlocked9…

1.setData 不方便的地方

你在使用setData 的時候，是不是有時候覺得很難受，舉個簡單的例子：

// 你的 datadata: {    name: '蜡笔小新',    info: { height: 140, color: '黄色' }
}复制代码

如果要修改info.height 為155，使用 setData 要怎麼做呢：

// 这样会把 info 里其他属性整不见了this.setData({ info: { height: 155 } })// 你需要取出 info 对象，修改后整个 setDataconst { info } = this.data
info.height = 155this.setData({ info })复制代码

似乎不太複雜，但如果data 是個很大的對象，要把比較深且不同的物件、陣列項挨個改變：

data: {    name: '蜡笔小新',    info: {        height: 140, color: '黄色',        desc: [{ age: 8 }, '最喜欢大象之歌', '靓仔', { dog: '小白', color: '白色' }]
    }
}复制代码

例如某個需求，需要把info.height 改為155，同時改變info.desc 陣列的第0 項的age 為12，第3 項的color 為灰色呢？

// 先取出要改变的对象，改变数字后 setData 回去const { info } = this.data
info.height = 155info.desc[0].age = 12info.desc[3].color = '灰色'this.setData({ info })// 或者像某些文章里介绍的，这样可读性差，也不太实用this.setData({    'info.height': 155,    'info.desc[0].age': 12,    'info.desc[3].color': '灰色'})复制代码

上面這兩種方法，是我們平常小程式裡常用的，和其他Web 端的框架相比，就很蹩腳，一種濃濃的半成品感撲面而來，有沒有這樣一個方法：

this.upData({    info: {        height: 155,        desc: [{ age: 12 }, , , { color: '灰色' }]
    }
})复制代码

這個方法會幫我們深度改變嵌套物件裡對應的屬性值，跳過陣列項裡不想改變的，只設定我們提供了的屬性值、陣列項，豈不是省略了一大堆蹩腳的程式碼，而且可讀性也極佳呢。

這就是為什麼我在上線的項目中使用wx-updata，而不是setData

wx-updata 的原理其實很簡單，舉個例子：

this.upData({    info: {        height: 155,        desc: [{ age: 12 }]
    }
})// 会被自动转化为下面这种格式，// this.setData({//    'info.height': 155,//    'info.desc[0].age': 12,// })复制代码

原來這個轉換工作是要我們自己手動來做，現在wx-updata 幫我們做了，豈不美哉！

下面介紹wx-updata 的優點和主要使用方法～

2. wx-updata 的優點

1. 支援setData 對象自動合併，不用寫蹩腳的物件路徑了 
2. 支援物件中嵌套數組，在數組中嵌套物件；
3. 如果數組的某個值你不希望覆蓋，請使用數組空位來跳過這個數組項，例如[1,,3] 這個數組中間就是數組空位；
4. 如果數組空位你的Eslint 報錯，可以使用wx-updata 提供的Empty 來代替： [1, Empty, 3]
5. 如果陣列空位你不習慣，或不樂意數逗號個數，可以試試試數組的物件路徑方式[1,,3] -> {'[0]': 1, '[2]': 3}

3. wx-updata 安裝

你也可以直接把dist 目錄下的wx-updata.js 拷貝到專案裡使用

使用npm、yarn 安裝方式：

$ npm i -S wx-updata# or$ yarn add wx-updata复制代码

然後：

1. 把微信開發者工具面板右側的詳情- 本地設定- 使用npm模組 按鈕開啟；
2. 點擊微信開發者工具面板工具列的工具- 建立npm;

建置後成功產生miniprogram_npm 資料夾就可以正常使用了

4. wx-updata 使用方法

使用方式一

#可以使用直接掛載到Page 上的方式，這樣就可以在Page 實例中像使用setData 一樣使用upData#了

// app.jsimport { updataInit } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径App({
    onLaunch() {
        Page = updataInit(Page, { debug: true })
    }
})复制代码

// 页面代码中this.upData({    info: { height: 155 },    desc: [{ age: 13 }, '帅哥'],    family: [, , [, , , { color: '灰色' }]]
})复制代码

使用方式二

有的框架可能在Page 物件上進行了進一步修改，直接替換Page 的方式可能就不太好了，wx-updata 同樣暴露了工具方法，用戶可以在頁面程式碼中直接使用工具方法進行處理：

// 页面代码中import { objToPath } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径Page({    data: { a: { b: 2}, c: [3,4,5]},    // 自己封装一下
    upData(data) {        return this.setData(objToPath(data))
    },    // 你的方法中或生命周期函数
    yourMethod() {        this.upData({ a: { b: 7}, c: [8,,9]})
    }
})复制代码

使用Empty 代替數組空位

#可以使用wx-updata 提供的Empty 來取代陣列空位，由於Empty 本質上是一個Symbol，所以只能使用wx-updata 導出的，而不能自己新建。

// 页面代码中import { Empty } from './miniprogram_npm/wx-updata/index'this.upData({    info: { height: 155 },    desc: [{ age: 13 }, '帅哥'],    family: [Empty, Empty, [Empty, Empty, Empty, { color: '灰色' }]]
})复制代码

數組的物件路徑方式

如果數組空位你不習慣，或者不樂意數逗號個數，可以試試數組的物件路徑方式，需要傳遞config 的配置 {arrObjPath: true}

// 页面代码中import { Empty } from './miniprogram_npm/wx-updata/index'// 原来的方式this.upData({    info: { height: 155 },    desc: [, '靓仔'],    family: [, , [, , , { color: '灰色' }]]
})// 使用数组路径方式this.upData({    info: { height: 155 },    desc: {'[1]': '靓仔'},    family: { '[2]': { '[3]': { color: '灰色' }
})复制代码

5. wx-updata 相關API

Page.prototype.upData(Object data, Function callback)

#

1. data： 你希望設定的data
2. callback： 跟setData 第二個參數一樣，會引起介面更新渲染完畢後的回呼函數

updataInit(Page, config)

1. #Page： 頁面對象，需要在 app.js 中呼叫；
2. config 配置
   • 配置參數{ debug: true }，會將路徑化後的data 列印出來，幫助使用者進行調試，預設false 不開啟；
   • 配置參數{ arrObjPath: true }，會開啟陣列的物件路徑方式功能，預設false 不開啟；

#objToPath(Object data, Object config)

1. data： 你希望設定的data 物件
2. #config 設定
   • 設定參數{ arrObjPath: true }，會開啟陣列的物件路徑方式功能，預設false 不開啟；

#更多相關免費學習推薦：微信小程式開發

以上是開發微信小程序，為什麼只使用 upData的詳細內容。更多資訊請關注PHP中文網其他相關文章！