實踐：給女友個性化定製應用-體重記錄（一）

實踐：給女友個性化定製應用-體重記錄（一）

這是我參與更文挑戰的第14天，活動詳情查看：更文挑戰

此係列的目的是幫助前端新人，熟悉現代前端工程化開發方式與相關技術的使用，普及一些通識內容

本文涉及內容

爲提高閱讀體驗，文章將會分爲多節發佈，本節主要闡述前端部分

• 初始化Vue3+Vite+TS項目
• VantUI組件庫引入
• 移動端適配
• 自定義組件開發
• @vue/compiler-sfc
• 彩色字體圖標的使用

背景

女友每天都在念叨:"我又胖了,怎麼不吃東西也沒見輕"

爲了記錄每次體重數據的變化，就下載了記錄體重的App，用了幾個都不太滿意（主要是不滿意數據反映出的圖表內容）

因而乎咱就拿出鍵盤⌨🖰就給她打造一個獨一無二的

需求

長話短說：

• 基本的體重記錄（CRUD）
• 多樣化的數據統計報表
  • 反應每一次的變化
  • 最後一次與當天的第一次的比較
  • 指定時間區間裏的變化
  • ...more

技術方案

明確了目標用戶與用戶訴求後，接下來直接定技術方案

應用形式：H5（移動到Web應用）

前端

• 框架：Vue3
• 語言：TypeScript
• 構建工具：Vite2
• 組件：Vant UI
• 網絡：Axios
• CSS預處理：Sass

後端

• Node.js + TypeScript
• 數據庫：菲關係型數據庫（MongoDB或雲開發用文檔數據庫）

部署

均使用Serverless服務部署，性能好又便宜

• 後端：騰訊雲Serverless應用
• 前端：騰訊雲開發-靜態資源託管，這部分教程戳此查看

概覽

開發準備

項目初始化

直接使用搭建的ATQQ/vite-vue3-template模板初始化項目

引入Vant UI

添加依賴

yarn add vant@next
複製代碼

配置按需引入

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style`,
        },
      ],
    }),
  ]
})

複製代碼

// src/utils/vantUI.ts
import { App } from '@vue/runtime-core'

// 按需引入
import { Button } from 'vant'

const conponents = [Button]

export default function mountVantUI(app: App<Element>) {
  conponents.forEach((c) => {
    app.component(c.name, c)
  })
}
複製代碼

頁面

一期預計4個頁面：

• 首頁
• 登陸
• 功能面板
• 體重記錄

快速創建好4個頁面的模板

# src/pages/
├── 404           # 404
|  └── index.vue
├── dashboard     # 功能面板
|  └── index.vue
├── funcs
|  └── weight     # 體重記錄
|     └── index.vue
├── home          # 首頁
|  └── index.vue
└── login         # 登陸頁
   └── index.vue

directory: 6 file: 5
複製代碼

路由配置

頁面肯定後，配置一下頁面路由

src/router/routes/index.ts

import { RouteRecordRaw } from 'vue-router'
import Home from '../../pages/home/index.vue'

const NotFind = () => import('../../pages/404/index.vue')
const Login = () => import('../../pages/login/index.vue')
const DashBoard = () => import('../../pages/dashboard/index.vue')
const Weight = () => import('../../pages/funcs/weight/index.vue')

const routes: RouteRecordRaw[] = [
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFind },
  {
    path: '/',
    name: 'index',
    component: Home,
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
  },
  {
    path: '/dashboard',
    name: 'dashboard',
    component: DashBoard,
  },
  {
    path: '/funs/weight',
    name: 'weight',
    component: Weight,
  },
]

export default routes
複製代碼

將頂層的router-view組件放在App.vue中

src/App.vue

<template>
  <div class="app">
    <router-view></router-view>
  </div>
</template>
複製代碼

移動端適配

首先在html模板中添加一句

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
複製代碼

尺寸單位使用rem方案，設計稿按375來定

經過調研現有的響應式網站與模擬器中實測，尺寸主要由320,360,375,414四種，得出如下結果：

• html根元素字體大小
  • 320：12px
  • 360：13.5px = 360/320*12
  • 375：14.0625px = 375/320*12
  • 414：沿用375方案

因而乎能夠直接使用 媒體查詢 處理單位的設置

在App.vue中加入得出的以下代碼：

<style> @media screen and (min-width: 320px) { html { font-size: 12px; } } @media screen and (min-width: 360px) { html { font-size: 13.5px; } } @media screen and (min-width: 375px) { html { font-size: 14.0625px; } } </style>
複製代碼

注意：因爲樣式權重同樣的狀況下，會採用後定義的內容，因此大尺寸媒體查詢代碼的放在後面

TODO：補樣式權重計算文章

不排除用戶電腦訪問應用的狀況，爲提高用戶體驗，將頂層容器標籤固定爲414px

在App.vue中加入以下代碼：

<style scoped> .app { max-width: 414px; margin: 0 auto; } </style>
複製代碼

頁面開發

準備工做基本完成後就開始糊頁面

因爲糊頁面是個體力活兒，沒有養分，文中只貼一些關鍵代碼，完成代碼，去倉庫探索

頁面使用@vue/compiler-sfc方案，開發提效，代碼更直觀

使用的漸變色來源：webgradients

首頁

• 完整源碼

頁面總體上只包含應用名，簡介，導航登陸3部分

<template>
  <div class="home">
    <h1 class="title">時光戀人</h1>
    <!-- 簡介 -->
    <section class="introduce">
      <p v-for="(item, index) in introduces" :key="index">{{ item }}</p>
    </section>
    <section class="introduce">
      <p>
        <router-link to="/login">
          <van-button size="small" round :color="loginColor">點擊體驗</van-button>
        </router-link>
      </p>
    </section>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'

const introduces: string[] = reactive(['記錄情侶之間', '平常生活趣事,生活足跡'])
const loginColor = 'linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%)'
</script>
複製代碼

登陸頁

• 完整源碼

避免繁瑣的註冊流程，直接使用短信驗證碼登陸方案

這個頁面開發了一個自定義的 Input 組件

效果以下，包含icon，輸入區域，輸入提示，注意提示4部份內容

• 組件的完整源碼

Dom結構以下

<template>
  <div class="under-input">
    <van-icon class="icon" v-if="icon" :name="icon" />
    <input
      :maxlength="maxLength"
      :placeholder="placeholder"
      :type="type"
      :value="modelValue"
      @input="handleInput"
    />
  </div>
  <p v-if="tips" class="tips">
    {{ tips }}
  </p>
</template>
複製代碼

輸入內容使用簡單的正則進行校驗

// 手機號
export const rMobile = /^[1]\d{10}$/
// 驗證碼
export const rCode = /\d{4}/
複製代碼

功能頁

• 完整源碼

調研了一些相似的應用，最終選擇採用卡片的形式展示各個功能入口

卡片組件主要包含功能介紹與彩色圖標兩部分，效果以下

Dom結構以下：

<template>
  <div
    class="fun-card"
    :class="{
      disabled,
    }"
  >
    <div>
      <h1 class="title">{{ title }}</h1>
    </div>
    <span v-if="icon" :class="[icon]" class="iconfont icon"></span>
    <!-- lock -->
    <div v-if="disabled" class="lock">
      <span class="icon-lockclosed iconfont"> </span>
    </div>
  </div>
</template>
複製代碼

彩色字體圖標

• 彩色圖標使用iconfont
• 項目中引入步驟

只須要簡單的在模板中引入css資源，使用的時候直接書寫class便可

<!-- index.html -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_2609471_9womj4g1e15.css">
複製代碼

<!-- 使用圖標 -->
<span class="icon-lockclosed iconfont"> </span>
複製代碼

本期效果

• 線上預覽地址

資料彙總

• 倉庫源代碼
• 項目模板：vite-vue3-template
• 使用模板初始化項目
• iconfont:《彩色字體圖標的介紹文章》
• 彩色圖標引入步驟
• 漸變色：webgradients
• @vue/compiler-sfc使用
• 在線帶殼截圖生成