## wxapp-market
小程序营销组件, Marketing components for WeChatApp
## 支持营销玩法
- 大转盘
- 刮刮乐
- 老虎机
- 水果机
- 九宫格翻纸牌
- 摇一摇
- 手势解锁
## 如何使用
### 1.拉取仓库
```
git clone git@github.com:o2team/wxapp-market.git
```
### 2.查看组件文件
- 大转盘 (Big wheel) : `/components/wheel/`
- 刮刮乐 (Scratch tickets) : `/components/scratch/`
- 老虎机 (Slot machine) : `/components/slotMachine/`
- 水果机 (Fruit machine) : `/components/fruitMachine/`
- 九宫格翻纸牌 (Grid card) : `/components/card/`
- 摇一摇 (Shake) : `/components/shake/`
- 手势解锁 (Gesture lock) : `/components/lock/`
### 3.使用引入方式
#### ➀ 使用大转盘组件
- WXSS中引用样式:`@import "../../components/wheel/wheel.wxss"`
- WXML中引用结构:`<import src="../../components/wheel/wheel.wxml"/>`
- JS中引用:`import Wheel from "../../components/wheel/wheel.js"`
- JS中实例调用:
```js
new Wheel(this,{
areaNumber: 8, //抽奖间隔
speed: 16, //转动速度
awardNumer: 2, //中奖区域从1开始
mode: 1, //1是指针旋转,2为转盘旋转
callback: (idx, award) => {
//结束回调, 参数对应宫格索引,对应奖项
}
})
```
#### ➁ 使用刮刮乐组件
- WXML中引用结构:`<import src="../../components/scratch/scratch.wxml"/>`
- JS中引用:`import Scratch from "../../components/scratch/scratch.js"`
- JS中实例调用:
```js
new Scratch(this,{
canvasWidth: 197, //画布宽带
canvasHeight: 72, //画布高度
imageResource: "./images/placeholder.png", //遮罩层图片
r: 4, //笔触半径
awardTxt: '中大奖', //底部抽奖文字奖项
awardTxtColor: "#1AAD16", //底部抽奖文字颜色
awardTxtFontSize: "24px", //底部抽奖文字大小
maskColor: "red", //没有图片遮罩层颜色
callback: () => {
//清除画布回调
}
})
```
> 注意:小程序无 globalCompositeOperation = "destination-out" 属性,所以采用 `clearRect` 做擦除处理
#### ➂ 使用老虎机组件
- WXSS中引用样式:`@import "../../components/slotMachine/slotMachine.wxss"`
- WXML中引用结构:`<import src="../../components/slotMachine/slotMachine.wxml"/>`
- JS中引用:`import SlotMachine from "../../components/slotMachine/slotMachine.js"`
- JS中实例调用:
```js
new SlotMachine(this,{
height: 40, //单个数字高度
len: 10, //单个项目数字个数
transY1: 0, //第一列初始位置
num1: 3, //第一列结束数字
transY2: 0, //第二列初始位置
num2: 0, //第二列结束数字
transY3: 0, //第三列初始位置
num3: 0, //第三列结束数字
transY4: 0, //第四列结束数字
num4: 1, //第四列结束数字
speed: 24, //速度
callback: (idx, award) => {
//结束回调, 参数对应宫格索引,对应奖项
}
})
```
#### ➃ 使用水果机组件
- WXSS中引用样式:`@import "../../components/fruitMachine/fruitMachine.wxss"`
- WXML中引用结构:`<import src="../../components/fruitMachine/fruitMachine.wxml"/>`
- JS中引用:`import FruitMachine from "../../components/fruitMachine/fruitMachine.js"`
- JS中实例调用:
```js
new FruitMachine(this,{
len: 9, //宫格个数
ret: 9, //抽奖结果对应值1~9
speed: 100, // 速度值
callback: (idx, award) => {
//结束回调, 参数对应宫格索引,对应奖项
}
})
```
#### ➄ 使用九宫格翻纸牌组件
- WXSS中引用样式:`@import "../../components/card/card.wxss"`
- WXML中引用结构:`<import src="../../components/card/card.wxml"/>`
- JS中引用:`import Card from "../../components/card/card.js"`
- JS中实例调用:
```js
new Card(this,{
data: [ //宫格信息,内联样式、是否是反面、是否运动、对应奖项
{isBack: false, isMove: false, award: "一等奖"},
{isBack: false, isMove: false, award: "二等奖"},
{isBack: false, isMove: false, award: "三等奖"},
{isBack: false, isMove: false, award: "四等奖"},
{isBack: false, isMove: false, award: "五等奖"},
{isBack: false, isMove: false, award: "六等奖"},
{isBack: false, isMove: false, award: "七等奖"},
{isBack: false, isMove: false, award: "八等奖"},
{isBack: false, isMove: false, award: "九等奖"}
],
callback: (idx, award) => {
//结束回调, 参数对应宫格索引,对应奖项
}
})
```
#### ➅ 使用摇一摇组件
- WXSS中引用样式:`@import "../../components/shake/shake.wxss"`
- WXML中引用结构:`<import src="../../components/shake/shake.wxml"/>`
- JS中引用:`import Shake from "../../components/shake/shake.js"`
- JS中实例调用:
```js
new Shake(this,{
shakeThreshold: 70, //阈值
callback: (idx, award) => {
//结束回调, 参数对应宫格索引,对应奖项
}
})
```
#### ➆ 使用手势解锁组件
- WXSS中引用样式:`@import "../../components/lock/lock.wxss"`
- WXML中引用结构:`<import src="../../components/lock/lock.wxml"/>`
- JS中引用:`import Lock from "../../components/lock/lock.js"`
- JS中实例调用:
```js
new Lock(this,{
canvasWidth: 300, //canvas画布宽度 px
canvasHeight: 300, //canvas画布高度 px
canvasId: "canvasLock", //canvas画布id
drawColor: "#3985ff" //绘制颜色
})
```
文档详情,请[查阅](https://o2team.github.io/wxapp-market/index.html)
## 效果图展示
![支持营销](http://img.pfan123.com/wx_market_0.gif?t=1112&imageView2/1/w/356/h/634)
![大转盘组件](http://img.pfan123.com/wx_market_1.gif?t=1112&imageView2/1/w/356/h/634)
![刮刮乐组件](http://img.pfan123.com/wx_market_2.gif?t=1112&imageView2/1/w/356/h/634)
![老虎机组件](http://img.pfan123.com/wx_market_3.gif?t=1112&imageView2/1/w/356/h/634)
![水果机组件](http://img.pfan123.com/wx_market_4.gif?t=11122&imageView2/1/w/356/h/634)
![九宫格翻纸组件](http://img.pfan123.com/wx_market_5.gif?t=1221112&imageView2/1/w/356/h/634)
![摇一摇组件](http://img.pfan123.com/wx_market_6.gif?t=1112&imageView2/1/w/356/h/634) ![手势解锁组件](http://img.pfan123.com/wx_market_7.gif?t=11112&imageView2/1/w/356/h/634)
## 更新记录
- [x] 优化文件目录结构 2017-09-18
- [x] 手势解锁组件 2017-09-17
- [x] 摇一摇组件 2017-09-16
- [x] 九宫格翻纸组件 2017-09-16
- [x] 增加老虎机组件、水果机组件 2017-09-02
- [x] 增加刮刮乐组件 2017-08-29
- [x] 增加大转盘组件 2017-08-27
- [x] create wx-market repository 2017-08-26
## 开源协议
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议,请自由地享受和参与开源。
## 贡献
如果你有好的意见或建议,欢迎给我们提 [Issue](https://github.com/o2team/wxapp-market/issues) 或 [PR](https://github.com/o2team/wxapp-market/compare),为优化 [wxapp-market](https://github.com/o2team/wxapp-market) 贡献力量。
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序 wxapp-market-master(截图+代码).zip
共120个文件
js:20个
png:18个
html:17个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 77 浏览量
2023-02-01
09:37:31
上传
评论
收藏 877KB ZIP 举报
温馨提示
免责声明:资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方,资料版权归原作者或出版方所有,本人不对所涉及的版权问题或内容负法律责任。如有侵权,请举报或通知本人删除。
资源推荐
资源详情
资源评论
收起资源包目录
微信小程序 wxapp-market-master(截图+代码).zip (120个子文件)
app.js.bak 1KB
jsdoc-default.css 6KB
prettify-tomorrow.css 2KB
prettify-jsdoc.css 1KB
OpenSans-LightItalic-webfont.eot 20KB
OpenSans-Italic-webfont.eot 20KB
OpenSans-BoldItalic-webfont.eot 20KB
OpenSans-Regular-webfont.eot 19KB
OpenSans-Bold-webfont.eot 19KB
OpenSans-Light-webfont.eot 19KB
.gitignore 244B
.gitkeep 0B
lock_lock.js.html 10KB
Machine.html 8KB
slotMachine_slotMachine.js.html 8KB
Scratch.html 8KB
scratch_scratch.js.html 6KB
Card.html 6KB
Wheel.html 6KB
FruitMachine.html 5KB
Lock.html 5KB
card_card.js.html 5KB
global.html 5KB
Shake.html 5KB
wheel_wheel.js.html 4KB
fruitMachine_fruitMachine.js.html 3KB
shake_shake.js.html 3KB
module.exports.html 3KB
index.html 1KB
prettify.js 13KB
lock.js 9KB
slotMachine.js 6KB
scratch.js 5KB
card.js 4KB
wheel.js 3KB
promise.min.js 3KB
shake.js 2KB
fruitMachine.js 2KB
gridcard.js 1KB
app.js 1KB
scratch.js 1KB
slotMachine.js 922B
lang-css.js 861B
wheel.js 857B
index.js 722B
fruitMachine.js 717B
shake.js 716B
linenumber.js 674B
gestureLock.js 309B
app.json 453B
gridcard.json 53B
index.json 47B
gestureLock.json 47B
shake.json 44B
slotMachine.json 44B
wheel.json 44B
scratch.json 44B
fruitMachine.json 44B
README.md 7KB
shake_sound.mp3 42KB
dial_bg.png 115KB
marquee_lottery1.png 40KB
marquee_lottery3.png 39KB
placeholder.png 38KB
marquee_lottery2.png 27KB
dial_pointer.png 21KB
shake_box.png 19KB
card_front.png 16KB
marquee_btn.png 15KB
shake_smile.png 9KB
wheel.png 3KB
shake.png 2KB
gestureLock.png 2KB
slotMachine.png 1KB
fruitMachine.png 1KB
logo.png 1KB
gridcard.png 1KB
scratch.png 767B
OpenSans-LightItalic-webfont.svg 120KB
OpenSans-Italic-webfont.svg 120KB
OpenSans-BoldItalic-webfont.svg 118KB
OpenSans-Regular-webfont.svg 117KB
OpenSans-Bold-webfont.svg 115KB
OpenSans-Light-webfont.svg 115KB
Apache-License-2.0.txt 11KB
OpenSans-LightItalic-webfont.woff 23KB
OpenSans-Italic-webfont.woff 23KB
OpenSans-BoldItalic-webfont.woff 23KB
OpenSans-Regular-webfont.woff 22KB
OpenSans-Bold-webfont.woff 22KB
OpenSans-Light-webfont.woff 22KB
slotMachine.wxml 3KB
fruitMachine.wxml 1KB
index.wxml 894B
wheel.wxml 748B
wheel.wxml 738B
scratch.wxml 718B
card.wxml 558B
lock.wxml 491B
slotMachine.wxml 440B
共 120 条
- 1
- 2
资源评论
大富大贵7
- 粉丝: 302
- 资源: 8869
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功