微信小程序 摇一摇抽奖简单实例实现代码
微信小程序 摇一摇抽奖 微信小程序目录为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录。 首先看下根目录下的app.json的文件,可以看到在”pages”的数组里,里面配置了每个界面,且包含了每个界面文件的目录
我们接下来看一下page文件夹,可以看到每个页面需要包含两个文件,一个是js文件,是每个界面的入口,wxml的文件是每个界面的布局文件,wxss是样式文件。
接下来看一下logs文件夹,在logs文件夹中比index文件夹中多出了一个logs.json的文件,logs.json这个文件配置了一个界面的title的信息。 为了更好的理解项目的结构,我们来一张gif图。 摇一摇项目实例我们首先看一下测试效果 添加图片资源 index.js 之前说过这个文件中监听并处理小程序的生命周期函数、声明全局变量,调用框架提供的丰富的 API,相当于我们写移动端时候的逻辑代码。 1000) {
//去除循环
clearInterval(timer)
//获奖提示
} index.json这个文件是配置文件。这里我们不需要配置。 index.wxssindex.wxss 是整个小程序的样式表,如这个摇奖对应得摇一摇样式。对css熟悉的肯定不会陌生。 .container-out {
height: 600rpx; width: 650rpx; background-color: #b136b9; margin: 100rpx auto; border-radius: 40rpx; box-shadow: 0 10px 0 #871a8e; position: relative; } .container-in { /*小圆球 .circle { .content-out { /*居中 加粗/ .start-btn { .award-image { index.wxmlindex.wxml 是页面的结构文件,如果有需要就需要配置。这里大家可以参照项目的文档说明 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |