抽奖是一种常见的应用,本文就带着大家利用微搭的组件来快速实现一款抽奖小程序。整体的逻辑是先是抽奖页面,抽中之后跳转到信息登记页面,录入个人的信息。
登录低码控制台,点击应用管理,创建抽奖的应用
编辑应用,进入编辑器,默认会创建首页,我们在首页中放置一个垂直布局
我们在头部插槽里放置容器组件来显示抽奖机的信息
在容器里放置标题组件,将标题的信息修改为需要的
在垂直布局的中间的插槽放置抽奖机组件
抽奖机属性介绍
/*
* 可通过 $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;
}
然后将按钮的点击事件选择我们定义好的低代码
这样抽奖页面就设置好了
信息采集页就是一个普通的表单页面,用表单容器和表单组件实现就好了
页面开发好后就可以预览了,现在提供了实时预览的功能,可以秒级构建,还是非常强大的
看完之后有没有心动的感觉,用了低码之后我发现我又可以重新投入到开发工作中了,别观望了,赶紧加入到低码的开发中吧。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。