日韩精品成人无码专区免费-国产99久久久久久免费看-国产精品丝袜久久久久久不卡-国产精品无码一区二区三区

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

發布時間:2024-03-10 點擊:198
鑒于在下使用微信小程序開發時使用 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.datainfo.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.datainfo.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 的優點支持 setdata 對象自動合并,不用寫蹩腳的對象路徑了 支持對象中嵌套數組,數組中嵌套對象;如果數組的某個值你不希望覆蓋,請使用數組空位來跳過這個數組項,比如 [1,,3] 這個數組中間就是數組空位;如果數組空位你的 eslint 報錯,可以使用 wx-updata 提供的 empty 來代替: [1, empty, 3]如果數組空位你不習慣,或者不樂意數逗號個數,可以試試數組的對象路徑方式 [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復制代碼然后:
把微信開發者工具面板右側的 詳情 - 本地設置 - 使用npm模塊 按鈕打開;點擊微信開發者工具面板工具欄的 工具 - 構建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]&

域名解析報錯-域名及賬戶問題
這邊提升后還是超負荷達到百分之
這是啥意思啊客服-域名及賬戶問題
安暢程小中:搏浪云時代,做全球頂尖云管理服務商
在阿里云購買的服務器在哪里找到
阿里云輕量服務器添加其他網站
服務器藍屏,-云服務器問題
linux redhat7.0 zabbix4.0的安裝和部署