{"id":19901114,"url":"https://github.com/chanceyu/weapp","last_synced_at":"2025-05-12T17:24:55.811Z","repository":{"id":98815911,"uuid":"108708103","full_name":"ChanceYu/weapp","owner":"ChanceYu","description":":penguin: 微信小程序组件和功能封装，基于微信 Component 自定义组件开发","archived":false,"fork":false,"pushed_at":"2018-11-11T06:24:04.000Z","size":8635,"stargazers_count":235,"open_issues_count":0,"forks_count":56,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-04T09:38:13.267Z","etag":null,"topics":["component","weapp","wechat","wechat-app","wx","wxapp","wxml","wxss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ChanceYu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-10-29T05:35:03.000Z","updated_at":"2025-01-05T07:57:12.000Z","dependencies_parsed_at":"2023-05-25T14:00:39.464Z","dependency_job_id":null,"html_url":"https://github.com/ChanceYu/weapp","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanceYu%2Fweapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanceYu%2Fweapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanceYu%2Fweapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanceYu%2Fweapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChanceYu","download_url":"https://codeload.github.com/ChanceYu/weapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253785630,"owners_count":21963996,"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":["component","weapp","wechat","wechat-app","wx","wxapp","wxml","wxss"],"created_at":"2024-11-12T20:14:09.102Z","updated_at":"2025-05-12T17:24:55.800Z","avatar_url":"https://github.com/ChanceYu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\r\n  \u003cimg width=\"360\" src=\"assets/images/logo-v2.png\" alt=\"weapp\" /\u003e\r\n  \u003cbr\u003e\r\n\r\n  \u003ca href=\"javascript:;\"\u003e\u003cimg src=\"https://img.shields.io/badge/language-JavaScript-brightgreen.svg\" /\u003e\u003c/a\u003e\r\n  \u003ca href=\"https://opensource.org/licenses/mit-license.php\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" /\u003e\u003c/a\u003e\r\n\r\n  \u003cp\u003e\u003cstrong\u003e微信小程序组件和功能封装，简洁的组件化编程\u003c/strong\u003e\u003c/p\u003e\r\n  \u003ch1\u003e\u003c/h1\u003e\r\n\u003c/div\u003e\r\n\r\n**基于微信的Component自定义组件封装**，简洁的组件化编程，关于Component自定义组件参考 [Component API](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/)。\r\n\r\n注意需要开启微信开发者工具中的ES6转ES5功能，请使用**大于`1.6.3`版本**的小程序基础库，并将微信更新到最新版本。\r\n\r\n\u003e 如果你需要一套代码开发微信小程序和支付宝小程序，那么 [mpapi 插件](https://github.com/ChanceYu/mpapi) 也许能协助你（微信小程序和支付宝小程序 API 兼容插件）\r\n\r\n## 项目预览\r\n![weapp组件](./assets/images/desc/components.gif)\r\n![weapp组件](./assets/images/qrcode.jpg)\r\n\r\n\r\n## 主要内容\r\n* [weapp组件，自定义封装和优化的组件](#weapp组件)\r\n* [common.js，对公共功能函数和小程序API的封装](#公共方法)\r\n* [第三方UI展示，方便预览查找，基本不做修改](#第三方ui库使用到)\r\n\r\n\r\n## 目录结构\r\n请用微信开发者工具打开 `src` 目录\r\n```\r\n├─images ---------- 公共图片\r\n├─js -------------- 公共的JS\r\n│  └─common ---------- 公共方法函数封装\r\n├─components ------ 自定义组件和第三方组件\r\n│  ├─libs ------------ 第三方库\r\n│  └─weapp ----------- weapp组件\r\n├─pages ----------- 页面目录\r\n│  ├─index ----------- 首页\r\n│  ├─libs ------------ 第三方库页面\r\n│  └─weapp ----------- weapp组件页面\r\n├─app.js\r\n├─app.json\r\n├─app.wxss\r\n└─README.md\r\n```\r\n\r\n\r\n## 主要特点\r\n* 组件调用简单\r\n* 组件化编程开发，可配置、可扩展、可复用\r\n* 使用ES6代码特性\r\n* 小程序API的二次封装，如转发分享\r\n* 公共方法的封装，如URL参数转换\r\n\r\n## 组件使用\r\n* 需要在使用组件的页面json配置文件中加入以下字段，配置组件的引用声明`usingComponents`\r\n```javascript\r\n// page.json\r\n{\r\n  \"usingComponents\": {\r\n    \"weapp-toast\": \"/components/weapp/toast/toast\",\r\n    \"weapp-tab\": \"/components/weapp/tab/tab\"\r\n  }\r\n}\r\n```\r\n* 使用组件，引入组件模板\r\n```html\r\n\u003c!-- page.wxml--\u003e\r\n\u003cweapp-toast title=\"{{ toastTitle }}\" bind:hide=\"onToastHide\" /\u003e\r\n\u003cweapp-tab list=\"{{ list1 }}\" active-index=\"{{activeIndex}}\" bind:change=\"onTabChange\" /\u003e\r\n```\r\n\r\n下面是展示`Tab`组件的简单使用，具体示例参考项目内部`pages/weapp/tab`中代码。其它类型组件使用基本和这种调用方式类似。\r\n\r\n```javascript\r\n// tab.json\r\n{\r\n  \"navigationBarTitleText\": \"Tab\",\r\n  \"usingComponents\": {\r\n    \"weapp-tab\": \"/components/weapp/tab/tab\"\r\n  }\r\n}\r\n```\r\n```html\r\n\u003c!-- tab.wxml --\u003e\r\n\u003cweapp-tab list=\"{{ list1 }}\" active-index=\"{{activeIndex}}\" bind:change=\"onTabChange\" /\u003e\r\n```\r\n```javascript\r\n// tab.js\r\nPage({\r\n  data: {\r\n    list1: ['选项1', '选项2', '选项3']\r\n  },\r\n  handlerSelect(){\r\n    this.setData({\r\n      activeIndex: 1\r\n    });\r\n  },\r\n  onTabChange(event){\r\n    console.log(event.detail.activeIndex)\r\n  }\r\n})\r\n```\r\n\r\n\r\n## weapp组件\r\n* [Toast 浮动提示](#weapp-toast)\r\n* [Tab 选项卡](#weapp-tab)\r\n* [CityPicker 城市选择](#weapp-city-picker)\r\n* [Loader 加载更多-暂无数据](#weapp-loader)\r\n* [Popover 弹出菜单](#weapp-popover)\r\n* [Toptip 顶部提示](#weapp-toptip)\r\n* [CalendarPicker 日历选择](#weapp-calendar-picker)\r\n\r\n\r\n## 公共方法\r\n* [share 页面转发分享](#commonshare)\r\n* [type 类型判断](#commontype)\r\n* [param 将对象解析成url字符串](#commonparam)\r\n* [unparam 将url字符串解析成对象](#commonunparam)\r\n* [navigateTo 保留当前页面，跳转到应用内的某个页面](#commonnavigateto)\r\n* [redirectTo 关闭当前页面，跳转到应用内的某个页面](#commonnavigateto)\r\n* [switchTab 跳转到tabBar页面，并关闭其他所有非tabBar页面](#commonnavigateto)\r\n* [reLaunch 关闭所有页面，打开到应用内的某个页面](#commonnavigateto)\r\n\r\n\r\n---------\r\n\r\n\r\n### weapp-toast\r\n浮动提示，普遍在移动开发中使用的Toast组件，与小程序的showToast不同\r\n###### 属性\r\n- `title`提示信息\r\n- `delay`自动关闭的延迟时间，单位毫秒，默认: `1500`\r\n###### 事件\r\n- `hide`关闭之后回调\r\n###### 使用\r\n```html\r\n\u003cweapp-toast title=\"{{ toastTitle }}\" bind:hide=\"onToastHide\" /\u003e\r\n```\r\n\r\n\r\n### weapp-tab\r\n选项卡\r\n###### 属性\r\n- `list`选项卡标题\r\n- `active-index`选中的索引，默认: `0`\r\n- `theme`主题样式，默认为空，可传入`weapp-tab`或其它自定义样式\r\n###### 事件\r\n- `change`切换的回调，参数`event`，其中`event.detail.activeIndex`为选中的当前索引\r\n###### 使用\r\n```html\r\n\u003cweapp-tab list=\"{{ list1 }}\" active-index=\"{{activeIndex}}\"  bind:change=\"onTabChange\" /\u003e\r\n```\r\n\r\n\r\n### weapp-city-picker\r\n城市选择\r\n###### 属性\r\n- `region`提示信息\r\n###### 事件\r\n- `change`切换的回调，参数`event`，其中`event.detail.region`为选择的区域信息\r\n###### 使用\r\n```html\r\n\u003cweapp-city-picker show=\"{{isCityPickerShow}}\" bind:change=\"onChangeCity\" /\u003e\r\n```\r\n\r\n\r\n### weapp-loader\r\n加载更多、暂无数据提示，通常配合上拉数据列表使用\r\n###### 属性\r\n- `icon-type`小程序icon组件的type类型，默认: `search`\r\n- `status`当前的状态，可选值: `loading`加载中、`nomore`没有更多、`empty`暂无数据，默认: `loading`\r\n- `empty-txt`暂无数据提示文字，默认: `暂无数据`\r\n- `loading-txt`加载中提示文字，默认: `正在加载`\r\n- `nomore-txt`没有更多提示文字，默认: `没有更多数据了`\r\n###### 使用\r\n```html\r\n\u003cweapp-loader status=\"{{status}}\" /\u003e\r\n```\r\n\r\n\r\n### weapp-popover\r\n弹出菜单，最多12个可支持的箭头方位，满足绝大部分场景\r\n\u003cbr\u003e\u003cbr\u003e\r\n![weapp-popover](./assets/images/preview/popover.gif)\r\n###### 属性\r\n- `list`菜单列表\r\n- `page-selector`整个页面最外层容器的CSS的选择器，默认为`.page`\r\n- `elem-id`根据哪个元素定位，元素的ID\r\n- `dir`箭头方位，可选值`tl tc tr rt rc rb bl bc br lt lc lb`，分别代表上右下左中，组合而成的12个方位\r\n  - `tl` 对应 `top-left`\r\n  - `tc` 对应 `top-center`\r\n  - `tr` 对应 `top-right`\r\n  - `rt` 对应 `right-top`\r\n  - `rc` 对应 `right-center`\r\n  - `rb` 对应 `right-bottom`\r\n  - `bl` 对应 `bottom-left`\r\n  - `bc` 对应 `bottom-center`\r\n  - `br` 对应 `bottom-right`\r\n  - `lt` 对应 `left-top`\r\n  - `lc` 对应 `left-center`\r\n  - `lb` 对应 `left-bottom`\r\n###### 事件\r\n- `select`选择每项的回调，参数`event`，其中`event.detail.item`为选中的当前项\r\n- `show`显示的回调\r\n- `hide`隐藏的回调\r\n###### 使用\r\n```html\r\n\u003cweapp-popover list=\"{{list}}\" dir=\"{{dir}}\" elem-id=\"{{elemId}}\" show=\"{{show}}\" bind:select=\"onSelectPopover\" /\u003e\r\n```\r\n\r\n\r\n### weapp-toptip\r\n顶部提示\r\n###### 属性\r\n- `title`提示信息\r\n- `type`提示类型，`success`成功、`error`失败、`warn`警告，默认: `default`\r\n- `delay`自动关闭的延迟时间，单位毫秒，默认: `1500`\r\n###### 事件\r\n- `hide`关闭之后回调\r\n###### 使用\r\n```html\r\n\u003cweapp-toptip type=\"{{ type }}\" title=\"{{ title }}\" /\u003e\r\n```\r\n\r\n\r\n### weapp-calendar-picker\r\n日历选择，支持多个月份滑动切换展示，左右点击切换月份，切换到今天\r\n\u003cbr\u003e\u003cbr\u003e\r\n![weapp-calendar-picker](./assets/images/preview/calendarPicker.gif)\r\n###### 属性\r\n- `start-date`开始日期\r\n- `end-date`结束日期\r\n- `current-date`默认选择的日期\r\n- `show`是否一开始就显示，默认: `false`\r\n- `current`默认显示第几个月，从开始日期的月份为第一个月，默认: `0`\r\n###### 事件\r\n- `change`选中日期的回调函数，参数`event`，其中`event.detail.currentDate`为选中的当前日期\r\n###### 使用\r\n```html\r\n\u003cweapp-calendar-picker start-date=\"2017-07-07\" end-date=\"2018-08-08\" show=\"{{ isCalendarPickerShow }}\" bind:change=\"onChangeDate\" /\u003e\r\n```\r\n\r\n\r\n---------\r\n\r\n\r\n### common.share\r\n页面转发分享，除去每个页面的繁杂配置，使用起来更加简单高效，支持页面传递参数 options\r\n###### 参数\r\n- `title`显示的标题\r\n- `url`转发的页面地址，默认为当前页面地址\r\n###### 使用\r\n```javascript\r\nimport common from '../../assets/js/common';\r\n\r\n// common.share([title], [url])\r\n\r\nPage({\r\n  onShareAppMessage: common.share()\r\n});\r\n```\r\n\r\n\r\n### common.type\r\n类型判断，返回`Number`、`String`、`Boolean`、`Array`、`Object`、`Function`等类型字符串\r\n###### 参数\r\n- `value`任意需要判断的参数\r\n###### 使用\r\n```javascript\r\nimport common from '../../assets/js/common';\r\n\r\n// common.type([value])\r\n\r\ncommon.type(1);            // Number\r\ncommon.type('abc');        // String\r\ncommon.type(true);         // Boolean\r\ncommon.type([]);           // Array\r\ncommon.type({});           // Object\r\ncommon.type(function(){}); // Function\r\ncommon.type(/\\d/);         // RegExp\r\ncommon.type(new Date());   // Date\r\n```\r\n\r\n\r\n### common.param\r\n将对象解析成url字符串\r\n###### 参数\r\n- `urlObject`参数对象，要转换成字符串参数的对象\r\n- `unEncodeURI`不使用编码，默认使用编码`encodeURIComponent`\r\n###### 使用\r\n```javascript\r\nimport common from '../../assets/js/common';\r\n\r\n// common.param([urlObject], [unEncodeURI])\r\n\r\nlet obj = {\r\n  name: 'weapp',\r\n  uid: 8,\r\n  age: 24\r\n};\r\n\r\nlet params = common.param(obj);\r\n\r\nconsole.log(params); // ?name=weapp\u0026uid=8\u0026age=24\r\n```\r\n\r\n\r\n### common.unparam\r\n将url字符串解析成对象，与`common.param`使用相反\r\n###### 参数\r\n- `urlString`地址，带url参数的地址\r\n- `unDecodeURI`不使用解码，默认使用解码`decodeURIComponent`\r\n###### 使用\r\n```javascript\r\nimport common from '../../assets/js/common';\r\n\r\n// common.unparam([urlString], [unDecodeURI])\r\n\r\nlet str = '?name=weapp\u0026uid=8\u0026age=24';\r\n\r\nlet obj = common.unparam(str);\r\n```\r\n\r\n\r\n### common.navigateTo\r\n### common.redirectTo\r\n### common.switchTab\r\n### common.reLaunch\r\n页面跳转，优化防止快速点击打开两个页面，支持对象形式传url参数，分别对应小程序的wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch\r\n###### 参数\r\n- `url`页面地址\r\n- `params`页面参数对象\r\n###### 使用\r\n```javascript\r\nimport common from '../../assets/js/common';\r\n\r\n// common.navigateTo([url], [params])\r\n\r\nPage({\r\n  onTapElem(){\r\n    common.navigateTo('/pages/weapp/popover/popover', {\r\n      userid: 123,\r\n      info: 'Hello,weapp'\r\n    });\r\n  }\r\n});\r\n```\r\n\r\n\r\n## 第三方UI库使用到\r\n字体图标使用FontAwesome，CSS组件样式使用WeUI\r\n\r\n* font-awesome (4.7) \u003chttps://github.com/FortAwesome/Font-Awesome\u003e\r\n* weui-wxss \u003chttps://github.com/Tencent/weui-wxss\u003e\r\n\r\n\r\n## 项目截图\r\n![weapp组件](./assets/images/desc/components.png)\r\n\r\n\r\n## License\r\n[![](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/mit-license.php) \r\n\r\n[MIT](https://opensource.org/licenses/MIT)，享受开源的乐趣。","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanceyu%2Fweapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanceyu%2Fweapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanceyu%2Fweapp/lists"}