从零实现一个单词对战游戏 (六) 实战篇2: 首页的样式开发和交互实现

麦喵单词卡丨麦一
1,566 阅读5分钟

本篇你将能学习到flex布局、小程序背景图片设置、用户信息获取、组件化、动画、打赏、用户反馈等知识点

知识点

flex布局

flex布局学习教程：A Complete Guide to Flexbox

背景图片

微信小程序样式文件wxss中设置background，不支持直接设置本地图片路径，可以使用以下形式

  • 将图片上传至云，使用远程链接的形式设置background
  • 小图片可以转换为base64，然后使用base64设置背景
 background: url(data:image/png;base64, code)
  • 使用image标签，配合绝对定位使用

<style>
page {
  position: relative;
}

.bg {
  position: absolute;
  width: 750rpx;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: -1;
}
</style>

<!-- .bg 为page(页面默认)的子节点 -->
<image class="bg" src="../../images/home-bg.jpg" />
  • 注：使用style标签设置属性，模拟器生效但真机失效
<!-- 模拟器生效但真机失效 -->
<view style="background: url('../../images/home-bg.jpg')"></view>

动画引入

微信小程序端使用animate库，可以使用wxapp-animatenpm包，在animate.css基础上删除了多余的浏览器前缀，压缩代码

npm install wxapp-animate -S
# 安装成功后，在小程序开发者工具构建npm

/* 然后在app.css中引入动画库，接下来要实现一些酷炫效果就不需要自己写动画了 ~ */
@import './miniprogram_npm/wxapp-animate/animate.wxss';

组件化

  • 将组件分为业务组件和基础组件
  • 基础组件(功能组件)：跨页面、组件多处复用的样式模块
  • 业务组件(页面组件)：复用性较低，或仅在一个页面中有使用

单词天天斗中，将基础组件放在了小程序根目录下的components目录，将业务组件放在了每一个页面目录下的components目录中

|  ├── components # 全局组件
|  |  ├── header
|  |  ├── loading
|  |  └── message
|  ├── pages # 页面
|  |  ├── combat
|  |  |  ├── components # 业务组件

原则：可复用、可组合

  • 通过props将父中的data传递到子组件，子组件想要改变父中的值，通过emit触发父中的事件，然后再改变父中data

更多自定义组件教程，custom-component

单词天天斗首页实现

动画例子

  • 首页好友对战按钮
<!-- 按上述接入动画库后，直接在需要有动画的节点上加入对应css类名即可 -->
<!-- animated infinite slow pulse -->
<button class="btn-oneline shadow-lg btn-pk animated infinite slow pulse" hover-class="btn-hover" open-type="getUserInfo" bindgetuserinfo="onChallengeFriend">
  <image class="btn-oneline__icon" src="./../../../../images/home-btn-pk.png" />
  <image class="btn-oneline__tag" src="./../../../../images/home-btn-ai.png" />
  <view class="btn-oneline__text">
    <text class="oneline-text__title">好 友 对 战</text>
    <text class="oneline-text__desc">Challenge a friend</text>
  </view>
</button>
  • 弹出选择单词书列表
<!-- animated faster fadeIn -->
<view wx:if="{{show}}" class="wrap animated faster fadeIn" catchtap="hide">
<!-- animated faster slideInUp -->
  <view class="wrap-window animated faster slideInUp">
    <scroll-view class="wrap-window__scroll" scroll-y="{{true}}">
      <view class="book" wx:for="{{bookList}}" wx:key="index" wx:for-index="index" wx:for-item="book"
      data-desc="{{book.desc}}" data-name="{{book.name}}" data-book-id="{{book._id}}" catchtap="onChangeBook">
        <image class="book-img" src="{{book.image}}" />
        <view class="book-info">
          <text class="book-info__title">{{book.title}}</text>
          <text class="book-info__words">词汇数量： {{book.wordsNumber}}</text>
          <text class="book-info__people">选择人数： {{book.peopleNumber}}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

组件化

业务方面不做解释，感觉学不到太多东西，希望分享更多的是思路、实践


<!-- 首页主要由以下几大模块构成 -->
<!-- header: 顶部标题，基础组件 -->
<!-- userinfo: 用户信息及战绩，业务组件 -->
<!-- bar: 提示卡数目 + 当前选择的单词书 -->
<!-- book-select: 选择单词书的列表弹出框 -->
<!-- buttons: 好友对战 + 随机匹配 + 单词挑战 + 生词本的入口 -->
<!-- footer: 排行榜 + 打赏 + 用户反馈的入口 -->

<header><text slot="content" class="header-title">单词天天斗</text></header>

<userinfo grade="{{userInfo.grade}}" pvpNumber="{{userInfo.pvpNumber}}" winNumber="{{userInfo.winNumber}}" />

<bar tipNumber="{{userInfo.tipNumber}}" bookList="{{bookList}}" bookDesc="{{userInfo.bookDesc}}" bind:onSelectBook="onSelectBook" bind:onTip="onTip" bind:onCreateVideoAd="onShowVideoAd" videoAdState="videoAdState" />

<book-select id="book-select" bookList="{{bookList}}" bind:onChangeBook="onChangeBook" />

<buttons bind:onChallengeFriend="onChallengeFriend" bind:onRandomMatch="onRandomMatch" />

<footer />

其他小程序功能

  • 获取用户信息

微信小程序在后序版本，获取用户头像、昵称、性别等信息，需要使用button来实现

<!-- onChallengeFriend 用户信息的回调函数 -->
<button open-type="getUserInfo" bindgetuserinfo="onChallengeFriend">
  • 用户反馈

小程序中可以直接使用button组件，唤起微信提供的用户反馈H5，可以在微信后台查看用户反馈

<!-- 设置open-type为feedback即可 -->
  <button open-type='feedback' class="footer-item" hover-class="btn-hover">
    <image class="footer-icon" src="./../../../../images/home-issue.png" />
    <text class="footer-text">建议反馈</text>
  </button>
  • 打赏作者

可以在微信个人中心的支付->收付款->赞赏码生成自己的打赏码，然后放到小程序中收钱即可

wx.previewImage({
  urls: ['打赏码地址'] // 支持长按扫码赞赏
})

总结

  • flex布局学习教程：A Complete Guide to Flexbox
  • 背景图片的设置推荐使用image标签实现
  • 简易动画可以使用animate.css，使用npm包wxapp-animate更加方便
  • 组件化可以分一下组件类型，根据业务、样式是否被复用做一下归类，不然项目大了就很乱，组件化也切忌什么都提成一个组件，过度冗余

本书是一个实战系列的分享，会持续更新、修正，感谢同学们来一起学习 ~

项目开源

由于本项目参加了大学的比赛，所以暂时不做开源，比赛结束在微信公众号：Join-FE进行开源（代码 + 设计图），关注不要错过哦 ~

公众号

同系列文章，可以到老包同学的掘金主页食用

avatar
文章
阅读
粉丝