序章

このプログラムは3年生のフロントエンドエンジニアリングの宿題で、フロントエンド3点セット（HTML、CSS、JavaScript）とVue.のインターフェースと機能を学んだ後にプログラムを書きました。

このプログラムは、携帯電話を模倣した QQ シングルページアプリケーションです。Vue3 フレームワークを使用して設計および開発され、Vue プロジェクトスキャフォールディング (@vue/cli) を使用して構築されています。コードエディターは、Visual Studio Code と Vue 関連のプラグインを使用します。このプロジェクトでは、Vue-Router などの ins も使用されます。さらに、Vant と FrozenUI という 2 つの UI ライブラリが使用されます。

このプログラムのグラフィック素材はすべて携帯電話 QQ のスクリーンショットと切り抜きから取得されているため、インターフェイスは非常によく似ています。プログラムはモバイル QQ の基本インターフェイスといくつかの基本機能を実現しますが、時間の問題により、実際には怠惰です。~~バック~~エンド機能は実装せず、フロントエンドインターフェースのみを実現し、フロントエンドでも機能を実現します。

この記事では、主にさまざまなインターフェイスと機能、詳細なコードと詳細を示します。プログラムをダウンロードして理解してください。プログラムをダウンロードした後、cmd コマンドラインターミナルを入力してプログラムのルートディレクトリに切り替え、「npm install」と入力してください。関連する依存関係をインストールし、「npm runserve」と入力してプログラムを実行します。

プログラムのソースコードとプログラム設計マニュアルは、以下のリンクをクリックしてダウンロードできますので、ご参照ください。

ダウンロードリンク：模造携帯電話QQ

ページ紹介

このプロジェクトには、ウェルカムページ、ログインページ、メッセージページ、コンタクトページ、ダイナミックページ、セッションページ、パーソナライズ名刺ページ、サイドファンクションページの8つのメインページがあり、各ページの概要は以下の通りです。

ウェルカムページ: ユーザーを「ようこそ」するために使用されます。実際には APP の起動ページで、3 秒後にログインページにジャンプします。
ログインページ: QQ番号とパスワードを入力してログインします。このプロジェクトではバックエンド機能がまだ実装されていないため、フロントエンドページ機能のみが実装されているため、ログインをシミュレートするためにアカウントのパスワードをプログラムコードに記述します。関数。
メッセージページ: メッセージのリストを表示し、メッセージのいずれかをクリックすると、友人とチャットするためのセッションページに入ります。
連絡先ページ: 友人リスト、グループチャットリストなどを表示し、任意の友人をクリックすると、その友人の個人化された名刺が表示されます。
ダイナミックページ: フレンドダイナミクス、ゲームセンターなど、QQ のさまざまな機能を表示します。
会話ページ: 友人とチャットするためのメッセージを入力できるページバックエンドが関与していないため、具体的なチャット機能はまだ実装されていません。
パーソナライズされた名刺ページ: ユーザーのアバター、ニックネーム、QQ 番号、その他の情報が含まれるユーザーの名刺を表示します。画像をクリックして拡大画像を表示することもできます。
サイド機能ページ: メインページのトップバーにあるアバターをクリックすると、サイド機能ページが開き、QQ 機能リストと QQ 情報が表示されます。ここでアバターをクリックすると、「My Personalized Business Card」を表示できます。。

ページ表示

このプロジェクトにはメインページが 8 つあります。各ページの実行テスト結果は次のとおりです。ここでは主な機能のみを示します。その他の詳細については、記事冒頭のプログラムをダウンロードして体験してください。

ウェルカムページ（スタートアップページ）

プロジェクトを開始すると、最初にウェルカムページ、つまりスタートアップページが表示され、3秒間表示された後、自動的にログインページにジャンプします。

ログインページ

ログインページに飛んだ後、QQ番号とパスワード（どちらも「123456」）を入力し、下のボタンをクリックしてログインしてください。QQ番号またはパスワードを入力しないと、画面下部に入力を求めるメッセージが表示されます。 QQ 番号またはパスワードが間違っている場合は、上部にエラーメッセージが表示され、ログインに成功するとメインページのメッセージページにジャンプします。

メッセージページ

メッセージページにはメッセージのリストが表示されます。メッセージのいずれかをクリックすると、友人とチャットするためのセッションページに入ります。メッセージ、連絡先、および動的ページをプルダウンして更新します。トップバーの「+」ボタンをクリックすると、バブルポップが表示されます下のバーのラベルをクリックすると他のページに切り替わり、メッセージ一覧の各項目を左にスライドすると「トップ」ボタンと「削除」ボタンが表示されます

セッションページ

メッセージページのメッセージをクリックすると、友達とチャットするためのセッションページに入ることができます。または、友達の個人名刺の「メッセージを送信」ボタンをクリックしてセッションページに入ることができます。

お問い合わせページ

連絡先ページには、友達、グループ、グループチャット、デバイスの 4 つのタブがあり、グループとグループチャットには折りたたみ可能なパネルがあり、展開して友達またはグループチャットを表示でき、友達をクリックするとその友達のパーソナライズされたメッセージが表示されます。名刺。

パーソナライズされた名刺ページ

カスタマイズされた名刺ページには友人の詳細情報が表示されます。このページでは、アバターまたは選択した写真内の写真をクリックすると大きな画像が表示され、「メッセージを送信」ボタンをクリックすると友人とチャットが開始されます。

動的ページ

ダイナミックページには、フレンドダイナミクス、ゲームセンターなど、QQ のさまざまな機能が表示されます。

サイド機能ページ

メインページ (メッセージ、連絡先、ダイナミクス) の上部バーにあるアバターをクリックすると、サイド機能ページにジャンプし、いくつかの QQ 機能リストといくつかの QQ 情報が表示されます。アバターをクリックすると、「私のパーソナライズされた」を表示できます。名刺」。

コード表示

このプログラムには多くのコードが含まれており、詳細なメモが記載されています。ここでは重要なコードのみを示します。完全なコードについては、記事の冒頭でプログラムをダウンロードして詳細を確認してください。

プロジェクトエントリーファイルindex.html

index.html はプロジェクトのエントリファイルで、主に Web サイトのヘッダー情報の宣言、対応するリソースのインポートなどを記述します。本体は、Vue アプリケーションインスタンスをマウントする単なる div です。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Mobile_QQ</title>
    <link rel="icon" href="favicon.ico">
    <!-- 引入 FrozenUI -->
    <link rel="stylesheet" href="./css/FrozenUI.css"/>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

プログラムエントリーファイル main.js

main.js はプログラムのエントリファイルで、主に UI ライブラリコンポーネントとルートのインポートを完了し、アプリケーションインスタンスを作成し、それらをマウントします。

import {
    
     createApp } from 'vue'
import {
    
     Toast, Button, Form, Field, CellGroup, NavBar, Icon, Image as VanImage,
    Tabbar, TabbarItem, Popover, SwipeCell, Cell, Tag, Search, PullRefresh, Tab, Tabs,
    Collapse, CollapseItem, IndexBar, IndexAnchor, Row, Col } from 'vant'
import App from './App.vue'
import router from './router'

const app = createApp(App);
app.use(Toast);
app.use(Button);
app.use(Form);
app.use(Field);
app.use(CellGroup);
app.use(NavBar);
app.use(Icon);
app.use(VanImage);
app.use(Tabbar);
app.use(TabbarItem);
app.use(Popover);
app.use(SwipeCell);
app.use(Cell);
app.use(Tag);
app.use(Search);
app.use(PullRefresh);
app.use(Tab);
app.use(Tabs);
app.use(Collapse);
app.use(CollapseItem);
app.use(IndexBar);
app.use(IndexAnchor);
app.use(Row);
app.use(Col);
app.use(router);
app.mount('#app');

コンポーネントエントリファイル App.vue

App.vue はコンポーネントのエントリファイルです。これはルートコンポーネントです。このコンポーネントはレンダリングの開始点として使用され、他のすべてのコンポーネントはここでレンダリングされます。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
      
      
  name: 'app'
}
</script>

<style>

</style>

ルーター

このプロジェクトでは、Vue-Router テクノロジーを使用して、さまざまなルートに従ってさまざまなコンポーネントをレンダリングします。まず、ルートを定義してルートに保存し、次に createRouter メソッドを使用してルートインスタンスルーターを作成し、ルート設定を渡し、最後にルートインスタンスをエクスポートします。 main.js ファイルを使用するルーター。

import {
    
     createRouter, createWebHashHistory } from 'vue-router'
import WelcomeView from '../views/WelcomeView.vue'
import LoginView from '../views/LoginView.vue'
import HomeView from '../views/HomeView.vue'
import MessageCom from '../components/MessageCom.vue'
import FriendsCom from '../components/FriendsCom.vue'
import DiscoverCom from '../components/DiscoverCom.vue'
import CardView from '../views/CardView.vue'
import DialogView from '../views/DialogView.vue'
import SideView from '../views/SideView.vue'

const routes = [
  {
    
     path: '/', redirect: '/welcome' },
  {
    
     path: '/welcome', name: 'welcome', component: WelcomeView },
  {
    
     path: '/login', name: 'login', component: LoginView },
  {
    
     path: '/home', name: 'home', component: HomeView, 
    children: [
      {
    
     path: 'message', component: MessageCom, meta: {
    
    keepAlive: true} },
      {
    
     path: 'friends', component: FriendsCom, meta: {
    
    keepAlive: true} },
      {
    
     path: 'discover', component: DiscoverCom }
    ]
  },
  {
    
     path: '/card', name: 'card', component: CardView },
  {
    
     path: '/dialog/:name', name: 'dialog', component: DialogView },
  {
    
     path: '/side', name: 'side', component: SideView }
]

const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes
})

export default router

他の

このプロジェクトでは、TopBar、BottomBar、MessageCom、FriendsCom、DiscoverCom、WelcomeView、LoginView、HomeView、DialogView、CardView、SideView など、合計 11 個のカスタムコンポーネントが記述されています。ビューコンポーネントはページレベルのコンポーネントに属し、次のコンポーネントを構成します。各ページ。この部分には多くの内容が含まれているため、コードはここには表示されません。内容を理解するには、記事の冒頭にある完全なプログラムコードをダウンロードしてください。

追記

このプログラムは学習と参考のみを目的としていますので、盗用したり、他の目的に使用したりしないでください。

ご覧いただきありがとうございます。ご質問がございましたら、下のコメント欄にコメントしてください。この記事がよく書かれていると思われる場合は、「いいね！」をお願いします。

フォローして、もっと面白いものを見てください！( •̀ω•́ )✧いいね、コメント、ブックマーク、フォロー

フロントエンドの大きな宿題 - 模造携帯電話 QQ

序章

目次