微信小程序开发案例 | 幸运抽签小工具（上）

阶段案例-幸运抽签小程序

01、准备工作

1 导入代码包

为了节约时间，这里我们直接把完成的小程序空白模板代码包templateDemo复制一份并重命名为demo10_shakeLuck, 导入开发工具等待改造。

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行index页面的路径描述末尾要追加逗号。

3 新增图片素材

在根目录中新建文件夹images然后将”摇一摇“图标素材shake.png放置其中，相关图片素材如下：

■ 图10-13  图标素材展示

为了图片素材分类更明确，还可以在images中继续新建cards文件夹把幸运签图片单独放置。相关图片素材如下：

■ 图10-14  幸运签图片素材展示

最终目录结构如下图所示：

■ 图10-15  项目目录结构

02、视图设计

1 导航栏设计

在app.json文件中可以自由修改window属性来实现导航栏的颜色、文字显示。更新后的app.json文件window属性相关代码如下：

8. {
9. "pages":[…],
10. "window":{
11. "navigationBarBackgroundColor": "#C40816",
12. "navigationBarTitleText": "幸运抽签",
13. "navigationBarTextStyle":"white"
14. },
15. …16. }

上述代码可以更改导航栏背景色为红色、字体为白色，效果如图10-16所示。

■ 图10-16  自定义导航栏效果

2 首页设计

首页主要是一个垂直排列、水平方向居中的布局，上方是“摇一摇”图标、下方是文字提示。页面设计图如10-17所示。

■ 图10-17  首页设计图

计划使用组件如下：

● 整体容器：<view>组件；

● 图标：<image>组件；

● 文字：<text>组件。

index.wxml代码如下：

1. 
2. 
3. 
4. 
5. 
6. 摇一摇 抽个好运签
7. 

注：第4行的图标素材与第6行的文字内容可以由开发者自行更改。

index.wxss样式代码如下：

1. /* 1 图标 */
2. image{
3. width: 400rpx;/* 宽度 */
4. }
5. /* 2 文字 */
6. text{
7. font-size: 50rpx;/* 字体大小 */
8. font-weight: bold;/* 字体加粗 */
9. color: #C40816;/* 文字颜色 */10. }

由于整体容器样式可以和结果页共用，因此写到公共样式文件app.wxss中。

app.wxss样式代码如下：

1. /* 公共样式-容器布局 */
2. .container {
3. /* 宽高尺寸 */
4. width: 100%;
5. height: 100vh;
6. /* 垂直布局 */
7. display: flex;
8. flex-direction: column;
9. align-items: center;/* 水平居中 */
10. justify-content: space-evenly;/* 垂直方向均匀分布 */11. }

此时可以看到首页效果图如10-18所示。

■ 图10-18  首页设计图

此时已经可以看到首页的最终效果了，下一节我们将对抽签结果页面进行设计。

3 结果页设计

结果页也是一个垂直排列、水平方向居中的布局，主要包含上方是抽签结果的幸运签图片、下方是“再来一次”按钮。页面设计图如10-19所示。

■ 图10-19  结果页设计图

计划使用组件如下：

● 整体容器：view组件；

● 幸运签图片：image组件；

● 按钮：button组件。

result.wxml代码如下：

1. 
2. 
3. 
4. 
5. 
6. 再来一次
7. 

这里暂时使用了“幸福”签图片来达成预览效果，开发者也可以自由更换其它幸运签。

result.wxss样式代码如下：

1. /* 1 抽签结果图片 */
2. image{
3. width: 500rpx;
4. }
5. /* 2 按钮 */
6. button{
7. color: white;
8. background-color: #C40816;9. }

注意：整体容器样式已经在制作首页时放在了app.wxss文件中，因此可以直接应用。

此时可以看到效果图如10-20所示。

■ 图10-20  结果页效果图

此时视图设计就全部完成了，下一节将进行页面的逻辑实现。