零基础快速搭建抽奖小程序，一切尽在掌握中

作为商家最重要就是提高会员的复购率和粘性了，抽奖无疑是一种很好的营销手段，那有没有一款工具能让商家自己就定制自己的营销活动呢？如设置抽奖率，选择抽中的商品，然后还可以收集中奖顾客的信息呢？答案是肯定的，微搭就是你的不二选择，零基础只需简单的拖拽一个小时你就可以打造自己的抽奖小程序，从此你的地盘你做主。

一 创建应用

打开低码的控制台，我们创建一个抽奖的应用

二 业务逻辑分析

我们一共需要两个页面，首页显示抽奖机，点击开始图片开始滚动，奖品被抽中后页面停止，提示抽奖成功，页面跳转到信息登记页面。信息登记页面采集用户的手机和邮箱，便于商家和用户进行联系。

三 数据源搭建

抽奖页面不需要存储信息，我们主要设计一下用户采集的数据源，字段比较简单就采集电话和邮箱就可以

四 页面搭建

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 信息采集页

信息采集页就是一个普通的表单页面，用表单容器和表单组件实现就好了

具体可以参照我以前的公众号文章，对表单这块有详细的讲解

五 预览发布

页面开发好后就可以预览了，现在提供了实时预览的功能，可以秒级构建，还是非常强大的

看完之后有没有心动的感觉，用了低码之后我发现我又可以重新投入到开发工作中了，别观望了，赶紧加入到低码的开发中吧。