{"id":13602450,"url":"https://github.com/o2team/wxapp-market","last_synced_at":"2025-05-15T10:01:58.203Z","repository":{"id":44424115,"uuid":"102470633","full_name":"o2team/wxapp-market","owner":"o2team","description":" 小程序营销组件，Marketing components for WeChatApp","archived":false,"fork":false,"pushed_at":"2022-09-25T07:29:20.000Z","size":871,"stargazers_count":2669,"open_issues_count":2,"forks_count":564,"subscribers_count":109,"default_branch":"master","last_synced_at":"2025-04-14T16:53:42.991Z","etag":null,"topics":["wechatapp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/o2team.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-05T11:00:21.000Z","updated_at":"2025-03-26T02:33:53.000Z","dependencies_parsed_at":"2023-01-18T16:31:46.434Z","dependency_job_id":null,"html_url":"https://github.com/o2team/wxapp-market","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o2team%2Fwxapp-market","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o2team%2Fwxapp-market/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o2team%2Fwxapp-market/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o2team%2Fwxapp-market/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/o2team","download_url":"https://codeload.github.com/o2team/wxapp-market/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319717,"owners_count":22051072,"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":["wechatapp"],"created_at":"2024-08-01T18:01:23.740Z","updated_at":"2025-05-15T10:01:57.274Z","avatar_url":"https://github.com/o2team.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","小程序","UI Kits"],"sub_categories":["组件","WeChat"],"readme":"## wxapp-market\n\n小程序营销组件， Marketing components for WeChatApp\n\n\n## 支持营销玩法\n\n- 大转盘\n- 刮刮乐 \n- 老虎机 \n- 水果机 \n- 九宫格翻纸牌 \n- 摇一摇 \n- 手势解锁\n\n\n## 如何使用\n\n### 1.拉取仓库\n\n```\ngit clone git@github.com:o2team/wxapp-market.git\n```\n\n### 2.查看组件文件\n\n- 大转盘 (Big wheel) : `/components/wheel/`\n- 刮刮乐 (Scratch tickets) : `/components/scratch/`\n- 老虎机 (Slot machine) : `/components/slotMachine/`\n- 水果机 (Fruit machine) : `/components/fruitMachine/`\n- 九宫格翻纸牌 (Grid card) : `/components/card/`\n- 摇一摇 (Shake) : `/components/shake/`\n- 手势解锁 (Gesture lock) : `/components/lock/`\n\n### 3.使用引入方式\n\n#### ➀ 使用大转盘组件\n\n- WXSS中引用样式：`@import \"../../components/wheel/wheel.wxss\"`\n\n- WXML中引用结构：`\u003cimport src=\"../../components/wheel/wheel.wxml\"/\u003e`\n\n- JS中引用：`import Wheel from \"../../components/wheel/wheel.js\"`\n\n- JS中实例调用：\n\n```js\n  new Wheel(this,{\n    areaNumber: 8,   //抽奖间隔\n    speed: 16,       //转动速度\n    awardNumer: 2,   //中奖区域从1开始\n    mode: 1,         //1是指针旋转，2为转盘旋转\n    callback: (idx, award) =\u003e {\n      //结束回调， 参数对应宫格索引，对应奖项    \n    }\n  })\n```\n\n#### ➁ 使用刮刮乐组件\n\n- WXML中引用结构：`\u003cimport src=\"../../components/scratch/scratch.wxml\"/\u003e`\n\n- JS中引用：`import Scratch from \"../../components/scratch/scratch.js\"`\n\n- JS中实例调用：\n\n```js\n  new Scratch(this,{\n    canvasWidth: 197,   //画布宽带\n    canvasHeight: 72,  //画布高度\n    imageResource: \"./images/placeholder.png\", //遮罩层图片\n    r: 4, //笔触半径\n    awardTxt: '中大奖', //底部抽奖文字奖项\n    awardTxtColor: \"#1AAD16\", //底部抽奖文字颜色\n    awardTxtFontSize: \"24px\", //底部抽奖文字大小\n    maskColor: \"red\",  //没有图片遮罩层颜色\n    callback: () =\u003e {\n      //清除画布回调\n    }\n  })\n```\n\n\u003e 注意：小程序无 globalCompositeOperation = \"destination-out\" 属性，所以采用 `clearRect` 做擦除处理\n\n\n#### ➂ 使用老虎机组件\n\n- WXSS中引用样式：`@import \"../../components/slotMachine/slotMachine.wxss\"`\n\n- WXML中引用结构：`\u003cimport src=\"../../components/slotMachine/slotMachine.wxml\"/\u003e`\n\n- JS中引用：`import SlotMachine from \"../../components/slotMachine/slotMachine.js\"`\n\n- JS中实例调用：\n\n```js\n  new SlotMachine(this,{\n     height: 40,  //单个数字高度\n     len: 10,     //单个项目数字个数\n     transY1: 0,  //第一列初始位置\n     num1: 3,     //第一列结束数字\n     transY2: 0,  //第二列初始位置\n     num2: 0,     //第二列结束数字\n     transY3: 0,  //第三列初始位置\n     num3: 0,     //第三列结束数字\n     transY4: 0,  //第四列结束数字\n     num4: 1,     //第四列结束数字\n     speed: 24,   //速度\n     callback: (idx, award) =\u003e {\n      //结束回调， 参数对应宫格索引，对应奖项    \n    }\n  })\n```\n\n#### ➃ 使用水果机组件\n\n- WXSS中引用样式：`@import \"../../components/fruitMachine/fruitMachine.wxss\"`\n\n- WXML中引用结构：`\u003cimport src=\"../../components/fruitMachine/fruitMachine.wxml\"/\u003e`\n\n- JS中引用：`import FruitMachine from \"../../components/fruitMachine/fruitMachine.js\"`\n\n- JS中实例调用：\n\n```js \n  new FruitMachine(this,{\n    len: 9, //宫格个数\n    ret: 9, //抽奖结果对应值1～9   \n    speed: 100,  // 速度值\n    callback: (idx, award) =\u003e {\n      //结束回调， 参数对应宫格索引，对应奖项    \n    }\n  })\n``` \n\n#### ➄ 使用九宫格翻纸牌组件\n\n- WXSS中引用样式：`@import \"../../components/card/card.wxss\"`\n\n- WXML中引用结构：`\u003cimport src=\"../../components/card/card.wxml\"/\u003e`\n\n- JS中引用：`import Card from \"../../components/card/card.js\"`\n\n- JS中实例调用：\n\n```js \n  new Card(this,{\n    data: [   //宫格信息，内联样式、是否是反面、是否运动、对应奖项\n      {isBack: false, isMove: false, award: \"一等奖\"},    \n      {isBack: false, isMove: false, award: \"二等奖\"},\n      {isBack: false, isMove: false, award: \"三等奖\"},\n      {isBack: false, isMove: false, award: \"四等奖\"},\n      {isBack: false, isMove: false, award: \"五等奖\"},\n      {isBack: false, isMove: false, award: \"六等奖\"},\n      {isBack: false, isMove: false, award: \"七等奖\"},\n      {isBack: false, isMove: false, award: \"八等奖\"},\n      {isBack: false, isMove: false, award: \"九等奖\"}\n    ],\n    callback: (idx, award) =\u003e {\n      //结束回调， 参数对应宫格索引，对应奖项    \n    }\n  })\n```\n\n#### ➅ 使用摇一摇组件\n\n- WXSS中引用样式：`@import \"../../components/shake/shake.wxss\"`\n\n- WXML中引用结构：`\u003cimport src=\"../../components/shake/shake.wxml\"/\u003e`\n\n- JS中引用：`import Shake from \"../../components/shake/shake.js\"`\n\n- JS中实例调用：\n\n```js \n  new Shake(this,{\n    shakeThreshold: 70, //阈值\n    callback: (idx, award) =\u003e {\n      //结束回调， 参数对应宫格索引，对应奖项    \n    }\n  })\n```\n\n#### ➆ 使用手势解锁组件\n\n - WXSS中引用样式：`@import \"../../components/lock/lock.wxss\"`\n\n- WXML中引用结构：`\u003cimport src=\"../../components/lock/lock.wxml\"/\u003e`\n\n- JS中引用：`import Lock from \"../../components/lock/lock.js\"`\n\n- JS中实例调用：\n\n```js \n  new Lock(this,{\n    canvasWidth: 300,   //canvas画布宽度 px\n    canvasHeight: 300,  //canvas画布高度 px \n    canvasId: \"canvasLock\", //canvas画布id\n    drawColor: \"#3985ff\"  //绘制颜色\n  })\n```  \n\n文档详情，请[查阅](https://o2team.github.io/wxapp-market/index.html)\n\n## 件体验二维码\n\n![营销组件体验二维码](https://img.pfan123.com/qrcode.jpg)\n\n## 效果图展示\n\n![支持营销](https://img.pfan123.com/wx_market_0.gif?t=1112\u0026imageView2/1/w/356/h/634)\n![大转盘组件](https://img.pfan123.com/wx_market_1.gif?t=1112\u0026imageView2/1/w/356/h/634)\n![刮刮乐组件](https://img.pfan123.com/wx_market_2.gif?t=1112\u0026imageView2/1/w/356/h/634) \n![老虎机组件](https://img.pfan123.com/wx_market_3.gif?t=1112\u0026imageView2/1/w/356/h/634) \n![水果机组件](https://img.pfan123.com/wx_market_4.gif?t=11122\u0026imageView2/1/w/356/h/634) \n![九宫格翻纸组件](https://img.pfan123.com/wx_market_5.gif?t=1221112\u0026imageView2/1/w/356/h/634) \n![摇一摇组件](https://img.pfan123.com/wx_market_6.gif?t=1112\u0026imageView2/1/w/356/h/634)  \n![手势解锁组件](https://img.pfan123.com/wx_market_7.gif?t=11112\u0026imageView2/1/w/356/h/634) \n\n## 更新记录\n\n- [x] 优化文件目录结构                 2017-09-18\n- [x] 手势解锁组件                    2017-09-17\n- [x] 摇一摇组件                     2017-09-16\n- [x] 九宫格翻纸组件                  2017-09-16\n- [x] 增加老虎机组件、水果机组件         2017-09-02\n- [x] 增加刮刮乐组件                  2017-08-29\n- [x] 增加大转盘组件                  2017-08-27\n- [x] create wx-market repository  2017-08-26\n\n## 开源协议\n\n本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。\n\n\n## 贡献\n\n如果你有好的意见或建议，欢迎给我们提 [Issue](https://github.com/o2team/wxapp-market/issues) 或 [PR](https://github.com/o2team/wxapp-market/compare)，为优化 [wxapp-market](https://github.com/o2team/wxapp-market) 贡献力量。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fo2team%2Fwxapp-market","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fo2team%2Fwxapp-market","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fo2team%2Fwxapp-market/lists"}