{"_id":"@best-components/miniprogram-skeleton","_rev":"4-4e260a952d82c9c40ebd3b8d1d3fdbb6","name":"@best-components/miniprogram-skeleton","dist-tags":{"latest":"2.0.3"},"versions":{"2.0.0":{"name":"@best-components/miniprogram-skeleton","version":"2.0.0","description":"绘制小程序骨架屏，轻量、方便、快捷","main":"miniprogram_dist/index.js","scripts":{"build":"cp -rf ./src/component/skeleton/ ./miniprogram_dist/"},"miniprogram":"miniprogram_dist","repository":{"type":"git","url":"git+https://github.com/jayZOU/skeleton.git"},"author":{"name":"jayzou"},"license":"MIT","bugs":{"url":"https://github.com/jayZOU/skeleton/issues"},"homepage":"https://github.com/jayZOU/skeleton#readme","keywords":["miniprogram","components","skeleton"],"gitHead":"2e21d04c9c3b73114693c0a67493905efd7cdc47","_id":"@best-components/miniprogram-skeleton@2.0.0","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-A1Js+0jSFfSzQjHx2XxPcPGRlLZ5/48sOETKVZ2cu3P23gBFKW/Efg78VWL/yv5x/izarrmAN9nmFYNkZI+Esg==","shasum":"88b58359fbb049de3ba95129a6205e63f2619f8b","tarball":"https://registry.npmjs.org/@best-components/miniprogram-skeleton/-/miniprogram-skeleton-2.0.0.tgz","fileCount":33,"unpackedSize":23257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffB2CCRA9TVsSAnZWagAAYvsQAJi138EEF1dc8T1IWXLh\nrQ6497g69AYFquOp+TudLCMDWnRY/pSYfdgRM70xCqJLRQZ+4Wzu6Q2KafCC\nqru9SoimTGY7KdUx0o222psedCWxj1P9/M8zcFNKO8i/ktmeTGPH2iSg9eX3\nDz2AinZ6L0x74GiIFRgbumHydq3k9Z9nUKzkcXGGf8dRSP+ewrLgH27hW81N\nVULGuUbcTP7gbbALU2R6/xTOkybdttvcnFvl5VdYE50jLl2HtdUHyZksM59D\nvAM7ncShWW1xyFc+VHeMb6GP8FyaynZ3CT+oGkAZ/lXl5nHcpiZN3gBTp46q\nqtBHuxAxo8rB9Q4Za0bLGbsA93CWhDZU02IgEFDs/D8QBMhn+8iQXKyG8tac\nPUzdeNRdtjxeI8eC3UaejNorLQw/bZ1BNldkknqV4OxEpr6qLugzpovS5j5i\n9LVNBQ3p5WVlz8/gAjRcabR3hy1RMa2Dq5i0xs/o5nbLd3v3KGsqyjoBqpQm\nNyRzFoc1BurxUlw36uLk6ylXUZ2LPIwIGPTXk5Gcqs6fAe2RIbvSHXZQFcBa\n+TcHXJCcXRnqlgV3thdefLZ1hmk05rdYlaKT8ntRaYSnwjSXWkmf/k7ORZcM\nkHSa5EAY+WhP09BKtzUCoubquTC5ZMsr9R66N+XSPGI0s58rVJaR9LOcZKVl\nhzB3\r\n=fFoe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRpqgKOwyUj3KVkJ5i1Sj5S3TGwq593EzpUa6quhZrqwIgH6SlWSCKabc38gngdE5jG+NND5Udr5h4UwcWCDi6Nog="}]},"maintainers":[{"name":"best-components","email":"417022902@qq.com"}],"_npmUser":{"name":"best-components","email":"417022902@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/miniprogram-skeleton_2.0.0_1601969537625_0.49377159195198184"},"_hasShrinkwrap":false},"2.0.1":{"name":"@best-components/miniprogram-skeleton","version":"2.0.1","description":"绘制小程序骨架屏，轻量、方便、快捷","main":"miniprogram_dist/index.js","scripts":{"build":"cp -rf ./component/skeleton/ ./miniprogram_dist/"},"miniprogram":"miniprogram_dist","repository":{"type":"git","url":"git+https://github.com/jayZOU/skeleton.git"},"author":{"name":"jayzou"},"license":"MIT","bugs":{"url":"https://github.com/jayZOU/skeleton/issues"},"homepage":"https://github.com/jayZOU/skeleton#readme","keywords":["miniprogram","components","skeleton"],"gitHead":"2e21d04c9c3b73114693c0a67493905efd7cdc47","_id":"@best-components/miniprogram-skeleton@2.0.1","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-XIMVvYZ6pYiWokWvHGs1uF4gHE8vMLrJG+JPItZ4ZvinD5JpX2d1bsg4Dd/XeywWwIjrVMCbKwirlnDTAf+mBw==","shasum":"2de47a08a9601cfb503e39168def37b51accd6b2","tarball":"https://registry.npmjs.org/@best-components/miniprogram-skeleton/-/miniprogram-skeleton-2.0.1.tgz","fileCount":36,"unpackedSize":25624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffCHXCRA9TVsSAnZWagAA5mQP/iFgqzE9JOVKAL/6YhXj\nMOHbhaeNPeioAaspdNyspwuZfywyu7pfSxehJAOyqldHKjDrAPoAOTQKAofk\nnnzCQLHzSDif/L5yr+eYz8vsd6a/etqZKsCfSgBebdkfyxcXSXY4q2xRC/qR\nYS9JxKna72NVWsyDWoOw5pEDnlT8Gfbdt08Uj1AcsC+UfHIyLK3qDayypvju\nm76ZDbvHyeliBwFu/aWF/4goKDx0f+2yt84WCroHjpZZmdUUMhQV81ga7rMr\nmM0DeYqTI5nGceMyVilqmftfUf80NOJhUD4QreRc4xKcslNA5ZVWrxTUdOIq\ngcpQp7l6vHcfdpR8Bz3YV9FwpjKikJzSzvScTAeO0KKxsWJ+EaJQoTa4oBEY\ncywjUl8m2azjFZWiGJpb7hgAOwtWDmCXeOaWh6Us9BGos/+No4B7QxuQoynY\nGl9NtjkzzTD6i+ST52aVOqx8WNMMQi3Kue0Ip9mx92b5WLObYdilTezUUR79\nJU8glCsE1lQkl3X2SlA30PEfVL31myKis3a1OIvLWkM1tqqEHyy2VYNeagr0\nz0QgFqEiGrYfa15C/DviVbT9QzBycCNL/UraejdYrNjcEQ6OjezdEYuAViIb\n6iNChZm4SwCReYzw2UTATOHUPc1+vJKu3GpmGLZAsa6xsdPCWsR0nMTV3i64\nw6JD\r\n=SS/w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/T/69if7hnWwyzMF2r1jBqtW0ZsYHTZ1D8BlJmJygeAiEAtY57MuGmAn2emaQ1XFA8rHlz3Ch2d0gxv6RxCcqf2t0="}]},"maintainers":[{"name":"best-components","email":"417022902@qq.com"}],"_npmUser":{"name":"best-components","email":"417022902@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/miniprogram-skeleton_2.0.1_1601970647213_0.4214437426312547"},"_hasShrinkwrap":false},"2.0.2":{"name":"@best-components/miniprogram-skeleton","version":"2.0.2","description":"绘制小程序骨架屏，轻量、方便、快捷","main":"miniprogram_dist/index.js","scripts":{"build":"cp -rf ./component/skeleton/ ./miniprogram_dist/"},"miniprogram":"miniprogram_dist","repository":{"type":"git","url":"git+https://github.com/jayZOU/skeleton.git"},"author":{"name":"jayzou"},"license":"MIT","bugs":{"url":"https://github.com/jayZOU/skeleton/issues"},"homepage":"https://github.com/jayZOU/skeleton#readme","keywords":["miniprogram","components","skeleton"],"gitHead":"2e21d04c9c3b73114693c0a67493905efd7cdc47","_id":"@best-components/miniprogram-skeleton@2.0.2","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-l0vD7vwK/c9o6jjm5rWf9wIgQgsVqd6C+Bg3yQOwSyxWeMhm6ERGqHmLGTP6AznCeTPH537ylP8RGN+UkaG30w==","shasum":"02de0076bdb39aa174c43add5d2108e458f20044","tarball":"https://registry.npmjs.org/@best-components/miniprogram-skeleton/-/miniprogram-skeleton-2.0.2.tgz","fileCount":35,"unpackedSize":24644,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffCKaCRA9TVsSAnZWagAAHVIP/RaHR/D/LYuBQ3xSwJ4q\nM3IUHpxsvzOfyWOfyDVBctywy8r1VZvj5nQrDB8npTaHXCpzqxVJHkV2UlhI\nKFrp/cA4q+CErnLXyNXbTdub/3Drks6eIaADc//M6jQ/h0qhMBMpurGT0dFh\nclblT+AVzdk96oGD6fzVF5rRu8Zfk0/TLu51sYR0u8C34quD6baelDdYpVZT\naWJAmH8ix/FtnCmTRyG4bW6LF0FmTG5WG8dFZhBkc43qAor94gUZ8u0TmTMR\nW0tx+Z5TMDOScRkfUFJuNwo8T81CnKwXYNHF0gxt+ZCLQo6OcAxG6hIsQ1YQ\nSUeAWtKu+9NhYbpD+xmraqG9hK4+fHC+ABzNNQqDgRJPTlh5Ho18XRRaje+h\n44YjTMsxeueJYQsoANyCJWdUmiSGY2vBfEI09k+XS5KDAsNSYu01LvFHIe7d\nAfr2Aub9xxVIP2r3UUaQVTCeYN5jn642ToqAXO8BHY33CcAJ9zBte3+iuRDb\ntDIltyCG4B537xLMGgjkHU9I/UvodVttruaczLY15CEg945TFtIue2pY2Kun\n92LKTFC84URgl+QRrT3X4HF1Dxj2Kuzqx3UBDKM5svpCa+OAhxLloIEGA2IK\nlVA5trdlZ6xsjr3MmIYTjHv8i89n4Gx7Gwy1spDEArc95Ytuj7tmfqfHjktp\nA5y2\r\n=mVV5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHTTJyk9oT8u8g9RPbbuzvMRDxunkv4Zmia6udJvu34sAiEA6pgxxrCd6gvCiXdUqGA26BTp1OuL9sq1KHmgcvqy2nI="}]},"maintainers":[{"name":"best-components","email":"417022902@qq.com"}],"_npmUser":{"name":"best-components","email":"417022902@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/miniprogram-skeleton_2.0.2_1601970842279_0.4246504603683716"},"_hasShrinkwrap":false},"2.0.3":{"name":"@best-components/miniprogram-skeleton","version":"2.0.3","description":"绘制小程序骨架屏，轻量、方便、快捷","main":"miniprogram_dist/index.js","scripts":{"build":"cp -rf ./src/component/skeleton/ ./miniprogram_dist/"},"miniprogram":"miniprogram_dist","repository":{"type":"git","url":"git+https://github.com/jayZOU/skeleton.git"},"author":{"name":"jayzou"},"license":"MIT","bugs":{"url":"https://github.com/jayZOU/skeleton/issues"},"homepage":"https://github.com/jayZOU/skeleton#readme","keywords":["miniprogram","components","skeleton"],"gitHead":"2e21d04c9c3b73114693c0a67493905efd7cdc47","_id":"@best-components/miniprogram-skeleton@2.0.3","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-XqXxLGJhiiGRrjVwwvk+pQShP3JWqwl4prah5IhbkPAHIZSWm5+OI4KR+Z7HT7XQiqYleGvm4SP5hPxe6Fjl3w==","shasum":"3a081390e9be7afd758e93d744d130f2da0c5ede","tarball":"https://registry.npmjs.org/@best-components/miniprogram-skeleton/-/miniprogram-skeleton-2.0.3.tgz","fileCount":7,"unpackedSize":7839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffCONCRA9TVsSAnZWagAA0q4P/iAFIPouj344Hz9ruSNU\nz2A0XHTM0kkXdG4MvKaOtIlJ/RGxVKR5h/GXExcZQAoNdDsKel9VSyDFDHpE\nvOhB98vWRaClzk6cK+3IIaf4OLwOrwjggqOaohggYblfZR6xYDyTF/DumNs3\n/tqbrWCIjheGJFaIel0L+fvH5rkrK6Gpt4LHb1SfiQ9ZksB/UGmrbO1PLJxy\nNd0aHYdW6KDvOYEq3KuGfx91AoPAfv+vGO6ZV1Nbg6aff6xbaZ2dJC3uZVuM\ncwZhGLrEWJYcekoJovz644J+0C7/leAWT8AHRrggAwk6ibTjRcmFFzqQ2UKL\nazDUz5GPzUSxGmS+SU3ZGXzqjE2geKpwMT3f44LgjplG4/S3MPbuYnLTAL3B\n5nU2BKmlvrpruSpW/ghGbrbt892WV09oq/mqClRw4SqzET1cNG2my0zgpNrI\nbs0HnJ51YvmggOx08iHZdXAHpHoFLTJny9nx3W2lrOweZypO2E98HagLFe4l\nn+NC4gLJHdbefPx3xDechUeC4OEtP/mH0mnpuMEGBDW2rKJZ+4yDCX4wg3Ya\ndTK3w8/BgFEADR11Y+eU3XZvtESkI27iNgrdchDDA5vL2M5hKOCSCzf9WEQX\n6ncqkw3mmU++FCV1XZ5H+6GJaffLZmP59T+mi58C9c3StKRrSqYc7f65udwu\nB7CU\r\n=FZ8o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsLExd1Vfs5zZCHYcHZ0i1aSRo4bwFZoMKnpGtQaEEyAIgO5ibU3eBcApwomvWR41Yf9+B0o5DKSvZplM/pgO+n3U="}]},"maintainers":[{"name":"best-components","email":"417022902@qq.com"}],"_npmUser":{"name":"best-components","email":"417022902@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/miniprogram-skeleton_2.0.3_1601971085013_0.6022221570790633"},"_hasShrinkwrap":false}},"time":{"created":"2020-10-06T07:32:17.583Z","2.0.0":"2020-10-06T07:32:17.757Z","modified":"2022-04-04T18:33:15.914Z","2.0.1":"2020-10-06T07:50:47.368Z","2.0.2":"2020-10-06T07:54:02.398Z","2.0.3":"2020-10-06T07:58:05.152Z"},"maintainers":[{"name":"best-components","email":"417022902@qq.com"}],"description":"绘制小程序骨架屏，轻量、方便、快捷","homepage":"https://github.com/jayZOU/skeleton#readme","keywords":["miniprogram","components","skeleton"],"repository":{"type":"git","url":"git+https://github.com/jayZOU/skeleton.git"},"author":{"name":"jayzou"},"bugs":{"url":"https://github.com/jayZOU/skeleton/issues"},"license":"MIT","readme":"# miniprogram-skeleton\n\n绘制小程序骨架屏，轻量、方便、快捷\n\n## 特性\n1. 运行时渲染，支持动态生成骨架屏\n2. 支持分块渲染，渐进式展示页面\n3. 支持多种骨架屏动画\n4. 支持npm\n\n## 示例\n![skeleton](https://image-static.segmentfault.com/218/832/2188326444-5f7c145a9cf9a_articlex)\n\n## Use\n\n### 一、安装和引入\n\n#### 1.安装组件： \n\n```\nnpm i @best-components/miniprogram-skeleton\n```\n#### 2.引入skeleton自定义组件\n\n```json\n{\n  \"usingComponents\": {\n    \"skeleton\": \"@best-components/miniprogram-skeleton\"\n  }\n}\n```\n\n**小程序中npm的配置及使用：**\n- 在微信开发者工具中，设置 —> 项目设置—> 勾选使用npm模块。\n- 在微信开发者工具中，工具 —> 构建npm，构建完成会生成 `miniprogram_npm` 文件夹，项目用到的npm包都在这里。\n- 按照页面的使用路径，从 `miniprogram_npm` 引入需要的包。\n\n### 二、使用骨架屏组件\n\n#### 1.在wxml页面需要用到的地方使用，如下：\n```html\n<!--引入骨架屏模版 -->\n<skeleton selector=\"sk\"\n          unit=\"px\"\n          region=\"{{region}}\"></skeleton>\n\n<!--index.wxml-->\n<!--给页面根节点class添加skeleton, 用于获取当前页面尺寸，没有的话就默认使用屏幕尺寸-->\n<view class=\"box sk\">\n    <view class=\"logo\">\n        <image class=\"img sk-header-radius\" src=\"{{header.logo}}\"></image>\n    </view>\n    <view class=\"title\">\n        <text class=\"sk-header-rect\">{{header.title}}</text>\n    </view>\n    <parent feature=\"{{feature}}\"></parent>\n    <view class=\"item\">\n        <view class=\"title_sub\">非骨架屏生成区域</view>\n        <view>这是一块没有骨架屏遮盖区域</view>\n    </view>\n</view>\n```\n\n#### 2.在js页面需要用到的地方使用，如下：\n\n```javascript\n//index.js\n//初始化默认的数据，用于撑开页面结构，让骨架屏可以获取到整体的页面结构\nPage({\n\tdata: {\n\t\tregion: {\t\t//骨架屏区域\n\t\t\theader: true,\n\t\t\tlists: true\n\t\t},\n\t\theader: {\n\t\t\tlogo: '../../images/logo.png',\n\t\t\ttitle: 'skeleton'\n\t\t},\n\t\tfeature: {\n\t\t\ttitle: '特性',\n\t\t\tlists: [\n\t\t\t\t'1.运行时渲染，支持动态生成骨架屏',\n\t\t\t\t'2.支持分块渲染，渐进式展示页面',\n\t\t\t\t'3.支持多种骨架屏动画',\n\t\t\t\t'4.支持npm',\n\t\t\t]\n\t\t}\n\t},\n\tonLoad: function () {\n    //隐藏header区域的骨架屏\n\t\tsetTimeout(() => {\n\t\t\tthat.setData({\n\t\t\t\t'region.header': false\n\t\t\t})\n\t\t}, 2000)\n    //隐藏lists区域的骨架屏\n\t\tsetTimeout(() => {\n\t\t\tthat.setData({\n\t\t\t\t'region.lists': false\n\t\t\t})\n\t\t}, 3000)\n\t}\n})\n```\n\n## API\n\n| Options | Type   | Required | Default         | Description                                                  |\n| ------- | ------ | --------- | --------------- | ------------------------------------------------------------ |\n| selector | String | No        | skelton | 渲染节点的标识前缀，比如```selector=\"sk\"```，那么页面根节点就是```class=\"sk\"```绘制矩形就是```class=\"sk-region-rect\"```，圆形就是```class=\"sk-region-radius\"``` |\n| unit | String | No        | px          | 骨架屏单位，默认px |\n| region | Object | Yes      |             | 骨架屏渲染区域，可按需分块展示/隐藏骨架屏 |\n\n## Note\n以最小节点原则添加相应的class，比如\n`<view class=\"box skeleton-rect\">这是有margin和padding属性的文案</view>`\n这里不要给view添加class，不然绘制区域会大很多，应该改成这样\n`<view class=\"box\"><text class=\"skeleton-rect\">这是有margin和padding属性的文案</text></view>`","readmeFilename":"README.md"}