wx-updata
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.13 • Public • Published

    wx-updata

    微信小程序官方 setData 替代品 ✈️

    教程地址:<开发微信小程序,我为什么放弃 setData,使用 upData>

    小程序代码片段预览地址: https://developers.weixin.qq.com/s/CcXdO1mc73jD

    小程序代码片段代码地址: https://github.com/SHERlocked93/wx-updata-demo

    npm npm

    NPM

    优势

    • 支持 setData 对象自动合并,不用写蹩脚的对象路径了 🥳
    • 支持对象中嵌套数组,数组中嵌套对象;
    • 如果数组的某个值你不希望覆盖,请使用数组空位来跳过这个数组项,比如 [1,,3] 这个数组中间就是数组空位;
    • 如果数组空位你的 Eslint 报错,可以使用 wx-updata 提供的 Empty 来代替 [1, Empty, 3]
    • 如果数组空位你不习惯,或者不乐意数逗号个数,可以试试数组的对象路径方式 [1,,3] -> {'[0]': 1, '[2]': 3}

    安装

    你也可以直接把 dist 目录下的 wx-updata.js 拷贝到项目里使用

    $ npm i -S wx-updata
    # or 
    $ yarn add wx-updata

    然后:

    1. 把微信开发者工具面板右侧的 详情 - 本地设置 - 使用npm模块 按钮打开;
    2. 点击微信开发者工具面板工具栏的 工具 - 构建npm

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

    引入

    方式一

    可以使用直接挂载到 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]})
        }
    })

    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 不开启;
      • 配置参数 { arrCover: true },数组会直接覆盖,而不会只修改数组的某几项,默认 false 不开启(设置 true,arrObjPath 会失效);

    objToPath(Object data, Object config)

    1. data: 你希望设置的 data 对象
    2. config 配置
      • 配置参数 { arrObjPath: true },会开启数组的对象路径方式功能,默认 false 不开启;

    使用

    使用 Empty 代替数组空位

    // 页面代码中
    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: '灰色' }
    })

    Install

    npm i wx-updata

    DownloadsWeekly Downloads

    36

    Version

    0.0.13

    License

    MIT

    Unpacked Size

    786 kB

    Total Files

    19

    Last publish

    Collaborators

    • sherlocked93