用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

開發微信小程序,我為什么使用 upData

Rolan 2020-8-3 15:12

鑒于在下使用微信小程序開發時使用setData的蹩腳體驗,開發了個庫函數wx-updata,項目上線之后,我把這個自用的庫函數整理放到 Github 上開源出來wx-updata,這個庫函數在開發的時候對我很有幫助,希望也可以幫到大 ...

鑒于在下使用微信小程序開發時使用 setData 的蹩腳體驗,開發了個庫函數 wx-updata ,項目上線之后,我把這個自用的庫函數整理放到 Github 上開源出來 wx-updata ,這個庫函數在開發的時候對我很有幫助,希望也可以幫到大家 :clap:

如果大家在使用中遇到了問題,可以給我提 pr,提 issue,一起來改善小程序開發體驗加油~

1. setData 不方便的地方

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

// 你的 data
data: {
    name: '蠟筆小新',
    info: { height: 140, color: '黃色' }
}
復制代碼

如果要修改 info.height 為 155,使用 setData 要怎么做呢:

// 這樣會把 info 里其他屬性整不見了
this.setData({ info: { height: 155 } })

// 你需要取出 info 對象,修改后整個 setData
const { info } = this.data
info.height = 155
this.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 = 155
info.desc[0].age = 12
info.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

2. wx-updata 的優點

  1. 支持 setData 對象自動合并,不用寫蹩腳的對象路徑了
  2. 支持對象中嵌套數組,數組中嵌套對象;
  3. 如果數組的某個值你不希望覆蓋,請使用數組空位來跳過這個數組項,比如 [1,,3] 這個數組中間就是數組空位;
  4. 如果數組空位你的 Eslint 報錯,可以使用 wx-updata 提供的 Empty 來代替: [1, Empty, 3]

3. wx-updata 安裝

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

使用 npm 、 yarn 安裝方式:

$ npm i -S wx-updata
# or
$ yarn add wx-updata
復制代碼

然后:

詳情 - 本地設置 - 使用npm模塊
工具 - 構建npm

構建后成功生成 miniprogram_npm 文件夾就可以正常使用了

4. wx-updata 使用方法

使用方式一

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

// app.js
import { 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: '灰色' }]]
})
復制代碼

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 打印出來,幫助用戶進行調試;

objToPath(Object data)

  1. data : 你希望設置的 data 對象

網上的帖子大多深淺不一,甚至有些前后矛盾,在下的文章都是學習過程中的總結,如果發現錯誤,歡迎留言指出~

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 前端下午茶 來自: 掘金
梦幻单人赚钱方法 平码固定的公式规律 山东11选5基本走势图彩经网 一分时时彩计划人工 浙江11选5基本走势图 重庆快乐十分走势图开奖结果 陕西11选5技巧投注 体彩p3字谜图谜总汇 体彩扑克牌开奖结果 1分钟一次的极速赛车骗局 赢真钱的棋牌游戏