{"id":17838656,"url":"https://github.com/zhangzhonghe/miniprogram-setup","last_synced_at":"2025-03-19T23:31:27.436Z","repository":{"id":49370152,"uuid":"486848580","full_name":"zhangzhonghe/miniprogram-setup","owner":"zhangzhonghe","description":"小程序支持 setup 选项。","archived":false,"fork":false,"pushed_at":"2022-09-03T09:24:33.000Z","size":372,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-02T07:21:44.649Z","etag":null,"topics":["lifecycle","miniprogram","setup","vue3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhangzhonghe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["zhangzhonghe"]}},"created_at":"2022-04-29T05:28:43.000Z","updated_at":"2023-08-23T11:45:46.000Z","dependencies_parsed_at":"2022-08-12T20:10:59.325Z","dependency_job_id":null,"html_url":"https://github.com/zhangzhonghe/miniprogram-setup","commit_stats":null,"previous_names":["zhangzhonghe/miniprogram-lifecycle"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangzhonghe%2Fminiprogram-setup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangzhonghe%2Fminiprogram-setup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangzhonghe%2Fminiprogram-setup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangzhonghe%2Fminiprogram-setup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhangzhonghe","download_url":"https://codeload.github.com/zhangzhonghe/miniprogram-setup/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244031029,"owners_count":20386534,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lifecycle","miniprogram","setup","vue3"],"created_at":"2024-10-27T21:00:00.041Z","updated_at":"2025-03-19T23:31:26.955Z","avatar_url":"https://github.com/zhangzhonghe.png","language":"TypeScript","funding_links":["https://github.com/sponsors/zhangzhonghe"],"categories":[],"sub_categories":[],"readme":"# 背景\n在小程序中实现「组合式 API」的库已经有不少，比如 [vue-mini](https://github.com/vue-mini/vue-mini) 和 [wx-setup](https://github.com/Maizify/wx-setup)，它们都是使用 Vue3 的[响应式库](https://github.com/vuejs/core/tree/main/packages/reactivity)实现的。但是，Vue3 的响应式 API 特别复杂，我数了一下，暴露出来的竟然有 50 多个 API，当然我不是说它不好用，只是要下很大的功夫才能用好。\n\n于是我就想，有没有更简单的方式实现「组合式 API」的效果，甚至不需要增加任何 API 就能实现？于是就创建了 [miniprogram-setup](https://github.com/zhangzhonghe/miniprogram-setup) 这么个项目，**现在还是试验阶段。**\n\n# 安装\n直接在项目目录下运行以下命令。\n\n```\nnpm install miniprogram-setup\n```\n然后在小程序开发者工具中点击「构建 npm」。\n\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4fbf5023f3534f31855bd609019b846b~tplv-k3u1fbpfcp-watermark.image?)\n\n# 一个简单的例子\n\n```js\nimport { ComponentWithSetup, onDetached, onReady } from 'miniprogram-setup'\n\nComponentWithSetup({\n  // 完全兼容原生写法\n  properties: {\n    default: Number\n  },\n\n  // 可以访问 properties 的值和绑定到组件实例上的 API，\n  // 注意：在 setup 中不能访问 data 和 method 中的值，\n  // 这是有意做的一层隔离。\n  setup(props, { triggerEvent }) {\n    let count = props.default\n\n    // 状态更改会自动更新视图\n    const handleClick = () =\u003e {\n      count++\n\n      // 触发一个事件\n      triggerEvent('update', count)\n    }\n\n    // 组件挂载时运行\n    onReady(() =\u003e {\n      console.log('ready')\n    })\n    // 组件销毁时运行\n    onDetached(() =\u003e {\n      console.log('detached')\n    })\n\n    return () =\u003e ({\n      count,\n      handleClick\n    })\n  },\n})\n\n```\n对应的 wxml 文件：\n\n```html\n\u003cbutton class=\"btn\" bindtap=\"handleClick\"\u003e{{count}}\u003c/button\u003e\n```\n\n实际的效果可以点击查看这个[代码片段](https://developers.weixin.qq.com/s/Fd7UB1mh7XBj)。\n\n\n# 理念\n目前，只需使用原生的 Javascript 且不需要 Vue 那样复杂的**响应式 API** ，就在小程序中实现了**响应性**，相比于 Vue，上手的门槛要小很多。\n\n**简单**就是我的理念。😂\n\n如果你对这个项目感兴趣欢迎提 [Issue](https://github.com/zhangzhonghe/miniprogram-setup/issues) ～\n\n\u003e 注意：现在还是试验阶段，请不要在生产环境中使用。","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhangzhonghe%2Fminiprogram-setup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhangzhonghe%2Fminiprogram-setup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhangzhonghe%2Fminiprogram-setup/lists"}