作为商家最重要就是提高会员的复购率和粘性了,抽奖无疑是一种很好的营销手段,那有没有一款工具能让商家自己就定制自己的营销活动呢?如设置抽奖率,选择抽中的商品,然后还可以收集中奖顾客的信息呢?答案是肯定的,微搭就是你的不二选择,零基础只需简单的拖拽一个小时你就可以打造自己的抽奖小程序,从此你的地盘你做主。
一 创建应用
打开低码的控制台,我们创建一个抽奖的应用
二 业务逻辑分析
我们一共需要两个页面,首页显示抽奖机,点击开始图片开始滚动,奖品被抽中后页面停止,提示抽奖成功,页面跳转到信息登记页面。信息登记页面采集用户的手机和邮箱,便于商家和用户进行联系。
三 数据源搭建
抽奖页面不需要存储信息,我们主要设计一下用户采集的数据源,字段比较简单就采集电话和邮箱就可以
四 页面搭建
4.1 首页
首页我们选择了垂直布局,组件主要用了抽奖机组件和按钮
重点说一下抽奖机组件如何使用,我们先看一下抽奖机的组件
candidates这个属性主要设置待抽的商品,我们可以选择我们自己图片上传,组件会自动进行图片缩放,按照合适的比例显示
items这个属性决定抽奖机默认是几个格子,每个格子显示啥图片
除了属性外还需要关注抽奖机的事件,我们需要定义当抽奖结束后需要做的动作,我们这里让结束后跳转到信息采集页
除了抽奖机外,我们就需要考虑抽奖机是如何开始的,我们这里用按钮进行了触发,点击按钮的时候开始抽奖,如果抽中就结束滚动触发抽奖结束的事件,抽奖的代码如下
/*
* 可通过 $page.handler.xxx 访问这里定义的方法
* 注意:该方法仅在所属的页面有效
* 如果需要 async-await,请修改成 export default async function() {}
*/
export default async function() {
if($page.dataset.state.lotteryLoading){
return
}
$page.dataset.state.lotteryLoading = true
try {
let isWinner = true
$page.dataset.state.lotteryText = isWinner ? '恭喜中奖!':'再接再厉~'
$page.dataset.state.items = $page.dataset.state.items.map(item=>{
item.value = isWinner? 7: 6;
return item
})
}catch(e){
console.error(e)
$page.dataset.state.lotteryText = '再接再厉~'
}
$page.dataset.state.start = true;
$page.dataset.state.reset = false;
}
这里使用了几个变量,我们依次在变量管理定义一下
变量解释
items变量是用来定义抽奖机默认显示的图片,而数组的长度决定了抽奖机显示几个格子
start来设置抽奖机是否启动
lotteryLoading用来模拟网络的延时
变量设置好后,需要把变量绑定到抽奖机组件上
然后将按钮的点击事件选择我们定义好的低代码
这样我们的抽奖页面就做好啦
4.2 信息采集页
信息采集页就是一个普通的表单页面,用表单容器和表单组件实现就好了
具体可以参照我以前的公众号文章,对表单这块有详细的讲解
五 预览发布
页面开发好后就可以预览了,现在提供了实时预览的功能,可以秒级构建,还是非常强大的
看完之后有没有心动的感觉,用了低码之后我发现我又可以重新投入到开发工作中了,别观望了,赶紧加入到低码的开发中吧。
联系客服