微信小程序开发案例 | 幸运转盘抽奖小程序（上）
阶段案例-幸运转盘抽奖小程序
01、准备工作
1 导入代码包
为了节约时间，这里我们直接把完成的小程序空白模板代码包templateDemo复制一份并重命名为demo11_luckyTurntable, 导入开发工具等待改造。
2 新增页面
在app.json文件的pages属性中追加“pages/result/result”，然后按快捷键Ctrl+S保存修改后会在pages文件夹下自动生成result目录以及里面的页面文件。计划index页面作为首页，result页面作为结果页。
更新后的app.json文件pages属性相关代码如下：
1. {
2. "pages":[
3. "pages/index/index",
4. "pages/result/result"
5. ],
6. …7. }3 新增图片素材
在根目录中新建文件夹images然后在其内部分别创建文件夹rewards和turntable，分别用于放置中奖结果图片和转盘皮肤样式。
rewards目录下的中奖结果图片的相关素材如下：
■ 图11-15 rewards目录下的图片素材
turntable目录下转盘皮肤样式图片的相关素材如下：
■ 图11-16 turntable目录下的图片素材
以上这些图片均为png格式，支持透明背景显示效果。
4 新增公共JS文件
在小程序项目的根目录下新建utils文件夹，并在其中新建data.js文件，代码如下：
1. …待补充…
2.
3. // 导出公共函数和数据
4. module.exports = {
5. …待补充…6. }最终目录结构如下图所示。
■ 图11-17 项目目录结构
02、视图设计
1 导航栏设计
在app.json文件中可以自由修改window属性来实现导航栏的颜色、文字显示。更新后的app.json文件window属性相关代码如下：
1. {
2. "pages":[…],
3. "window":{
4. "navigationBarBackgroundColor": "#E86734",
5. "navigationBarTitleText": "幸运大转盘",
6. "navigationBarTextStyle":"white"
7. },
8. "style": "v2",
9. …10. }上述代码可以更改导航栏背景色为橙红色、字体为白色，效果如图11-18所示。
■ 图11-18 自定义导航栏效果
2 公共样式配置
将每个页面都用到的基础样式写到公共样式表app.wxss中，参考代码如下：
1. /* 整体容器样式 */
2. .container {
3. width: 100%;/* 宽度 */
4. height: 100vh;/* 高度 */
5. display: flex;/* flex弹性布局 */
6. flex-direction: column;/* 垂直布局 */
7. align-items: center;/* 水平方向居中对齐 */
8. justify-content: space-evenly;/* 内部组件垂直方向等间距 */
9. background: linear-gradient(to bottom, #E86734, rebeccapurple);/* 渐变背景色，从上往下渐变 */
10. }
11.
12. /* 按钮样式 */
13. button{
14. font-size: 50rpx !important;/* 字体大小，优先执行 */
15. color: white;/* 文字颜色 */
16. background: linear-gradient(to bottom, orange, red);/* 渐变背景色，从上往下渐变 */
17. }然后请给首页以及结果页都加上最外层整体容器，index.wxml和result.wxml代码如下：
1. <!-- 1 整体容器 -->
2. <view class="container">
3. …
4. </view>
■ 图11-19 整体容器设计完成图
3 首页设计
首页主要是一个垂直排列、水平方向居中的布局，上方是大转盘、下方是按钮。页面设计图如图11-20所示。
■ 图11-20 首页设计图
计划使用组件如下：
● 整体容器：<view>组件；
● 大转盘区域：<view>组件；
〇 圆形大转盘：<image>组件；
〇 转盘中间的指针：<image>组件。
● 按钮：<button>组件。
index.wxml代码如下：
1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 转盘区域 -->
4. <view class="turntableBox">
5. <!-- 2-1 转盘 -->
6. <image class="turntable" src="/images/turntable/turntable.png"></image>
7. <!-- 2-2 指针 -->
8. <image class="arrow" src="/images/turntable/go.png"></image>
9. </view>
10.
11. <!-- 3 按钮 -->
12. <button>Start</button>
13. </view>1. /**index.wxss**/
2. /* 大转盘区域 */
3. .turntableBox {
4. width: 650rpx;/* 宽度 */
5. height: 650rpx;/* 高度 */
6. position: relative;/* 相对位置 */
7. }
8. /* 转盘图片 */
9. .turntable {
10. width: 100%;/* 宽度 */
11. height: 100%;/* 高度 */
12. }
13. /* 转盘中心箭头 */
14. .arrow {
15. width: 120rpx;/* 宽度 */
16. height: 140rpx;/* 高度 */
17. position: absolute;/* 绝对位置 */
18. top: 245rpx;/* 距外层容器顶部的距离 */
19. left: 265rpx;/* 距外层容器左侧的距离 */20. }此时可以看到首页效果图如图11-21所示。
■ 图11-21 首页设计完成图
此时已经可以看到首页的最终效果了，下一节我们将对抽奖结果页面进行设计。
4 结果页设计
结果页也是一个垂直排列、水平方向居中的布局，主要包含上方是抽奖结果的图片、文字描述，下方是“重新开始”按钮。页面设计图如图11-22所示。
■ 图11-22 结果页设计图
计划使用组件如下：
● 整体容器：<view>组件；
● 中奖图片：<image>组件；
● 中奖文字：<text>组件；
● 按钮：<button>组件。
result.wxml代码如下：
1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 中奖图片 -->
4. <image src="/images/rewards/xiexie.png" mode="widthFix"></image>
5. <!-- 3 中奖文字 -->
6. <text>谢谢参与</text>
7. <!-- 4 返回按钮 -->
8. <button>重新抽奖</button>
9. </view>result.wxss样式代码如下：
1. /* pages/result/result.wxss */
2. /* 文本样式 */
3. text {
4. font-size: 60rpx;/* 字体大小 */
5. font-weight: bold;/* 字体加粗 */
6. color: white;/* 文字颜色 */
7. text-shadow: 7rpx 7rpx 7rpx chocolate;/* 文字阴影效果 */
8. }
9.
10. /* 图片样式 */
11. image {
12. width: 400rpx;/* 宽度 */13. }
■ 图11-23 结果页设计完成图
此时视图设计就全部完成了，下一节将进行页面的逻辑实现。
- 点赞
- 收藏
- 关注作者
评论（0）