微信小程序开发案例 | 幸运抽签小程序（上）
阶段案例-幸运抽签小程序
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 新增图片素材
在根目录中新建文件夹images然后将”摇一摇“图标素材shake.png放置其中，相关图片素材如下：
■ 图10-13 图标素材展示
为了图片素材分类更明确，还可以在images中继续新建cards文件夹把幸运签图片单独放置。相关图片素材如下：
最终目录结构如下图所示：
■ 图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 自定义导航栏效果
2 首页设计
首页主要是一个垂直排列、水平方向居中的布局，上方是“摇一摇”图标、下方是文字提示。页面设计图如10-17所示。
■ 图10-17 首页设计图
计划使用组件如下：
● 整体容器：<view>组件；
● 图标：<image>组件；
● 文字：<text>组件。
index.wxml代码如下：
1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 图标 -->
4. <image src="/images/shake.png" mode="widthFix"></image>
5. <!-- 3 文字 -->
6. <text>摇一摇 抽个好运签</text>
7. </view>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样式代码如下：
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 首页设计图
此时已经可以看到首页的最终效果了，下一节我们将对抽签结果页面进行设计。
3 结果页设计
结果页也是一个垂直排列、水平方向居中的布局，主要包含上方是抽签结果的幸运签图片、下方是“再来一次”按钮。页面设计图如10-19所示。
■ 图10-19 结果页设计图
计划使用组件如下：
● 整体容器：view组件；
● 幸运签图片：image组件；
● 按钮：button组件。
result.wxml代码如下：
1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 抽签结果卡片 -->
4. <image src="/images/cards/xingfu.jpg" mode="widthFix"></image>
5. <!-- 3 按钮 -->
6. <button>再来一次</button>
7. </view>result.wxss样式代码如下：
1. /* 1 抽签结果图片 */
2. image{
3. width: 500rpx;
4. }
5. /* 2 按钮 */
6. button{
7. color: white;
8. background-color: #C40816;9. }此时可以看到效果图如10-20所示。
■ 图10-20 结果页效果图
此时视图设计就全部完成了，下一节将进行页面的逻辑实现。
- 点赞
- 收藏
- 关注作者
评论（0）