feat: 首页 UI 设计稿还原

.eslintignore

@@ -1 +1 @@
-typings/
+typings/types/wx/

miniprogram/app.json

@@ -3,10 +3,13 @@
     "pages/home/home"
   ],
   "window": {
+    "backgroundColor": "#FFFFFF",
     "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "Weixin",
-    "navigationBarTextStyle": "black"
+    "navigationBarTitleText": "单词天天斗",
+    "navigationStyle": "custom"
+  },
+  "usingComponents": {
+    "header": "/components/header/header"
   },
   "style": "v2",
   "sitemapLocation": "sitemap.json"

miniprogram/app.ts

@@ -1,5 +1,47 @@
+import config from './utils/config'
+import Store from 'wxministore'
+
+import state, { State } from './utils/state'
+
+export const store = new Store<State>({ state })
+
+export interface IAppOption {
+  store: Store<State>
+  initEnv: () => void
+  initUiGlobal: () => void
+}
+
 App<IAppOption>({
-  globalData: {},
+  store,
   onLaunch () {
+    this.initUiGlobal()
+    this.initEnv()
+  },
+
+  initUiGlobal () {
+    const { statusBarHeight, screenHeight, windowWidth } = wx.getSystemInfoSync()
+    const capsule = wx.getMenuButtonBoundingClientRect()
+
+    // 计算胶囊按钮的高度，作为头部内容区高度
+    const CustomBarHeight = capsule.bottom + capsule.top - statusBarHeight
+
+    store.setState({
+      ui: {
+        statusBarHeight,
+        screenHeight,
+        windowWidth,
+        CustomBarHeight
+      }
+    })
+  },
+
+  initEnv () {
+    const envVersion = __wxConfig.envVersion
+
+    // 开发环境 (develop)：编辑器环境
+    // 正式环境 (release)：小程序体验版 和 正式版
+    const env = envVersion === 'develop' ? config.cloudEnv.develop : config.cloudEnv.release
+    wx.cloud.init({ env, traceUser: true })
+    store.setState({ cloudEnv: env })
   }
 })

miniprogram/app.wxss

@@ -0,0 +1,73 @@
+@import './miniprogram_npm/wxapp-animate/animate.wxss';
+
+/* 按钮阴影 */
+.shadow-lg {
+  box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0, 102, 204, 0.2);
+}
+
+/* 主题色按钮点击变色 */
+.btn-hover {
+  background: rgb(131, 203, 241)!important;
+}
+
+/** 点击放大 10% */
+.touch:active {
+  transform: scale(1.1);
+}
+
+/** 点击放大 1% */
+.touch-s:active {
+  transform: scale(1.01);
+}
+
+/** 点击放大 2% */
+.touch-m:active {
+  transform: scale(1.02);
+}
+
+/* ↓↓↓↓↓↓ 旋转动画，首页设置入口 和 匹配页面公用 ↓↓↓↓↓↓ */
+@keyframes rotate {
+  from {
+    transform-origin: center;
+    transform: rotate(0);
+  }
+
+  to {
+    transform-origin: center;
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes rotate-reverse {
+  from {
+    transform-origin: center;
+    transform: rotate(0);
+  }
+
+  to {
+    transform-origin: center;
+    transform: rotate(-360deg);
+  }
+}
+
+.rotate-reverse {
+  animation-name: rotate-reverse;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.rotate {
+  animation-name: rotate;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.time-36s {
+  animation-duration: 36s;
+}
+
+.time-2s {
+  animation-duration: 2s;
+}
+
+/* ↑↑↑↑↑↑ 旋转动画，首页设置入口 和 匹配页面公用 ↑↑↑↑↑↑ */

miniprogram/components/header/header.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/components/header/header.ts

@@ -0,0 +1,12 @@
+import { IAppOption } from './../../app'
+
+App.Component({
+  options: {
+    addGlobalClass: true,
+    multipleSlots: true
+  },
+  data: {
+    CustomBarHeight: getApp<IAppOption>().store.$state.ui.CustomBarHeight,
+    StatusBarHeight: getApp<IAppOption>().store.$state.ui.statusBarHeight
+  }
+})

miniprogram/components/header/header.wxml

@@ -0,0 +1,5 @@
+<view class="header" style="height:{{CustomBarHeight}}px;padding-top:{{StatusBarHeight}}px;">
+  <view class="content" style="top:{{StatusBarHeight}}px;">
+    <slot name="content"></slot>
+  </view>
+</view>

miniprogram/components/header/header.wxss

@@ -0,0 +1,11 @@
+.header {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}