Introduction
This program is my front-end engineering homework in my junior year. I wrote a program after learning the front-end three-piece set (HTML, CSS, JavaScript) and Vue. interface and functionality.
This program is a QQ single-page application imitating mobile phones. It is designed and developed using the Vue3 framework and built using the Vue project scaffolding (@vue/cli). The code editor uses Visual Studio Code, and Vue-related plug-ins are also used in the project, such as : Vue-Router, etc. In addition, two UI libraries, Vant and FrozenUI, are used.
The graphic materials of this program are all taken from mobile phone QQ screenshots and cutouts, so the interface is very similar. The program realizes the basic interface of mobile QQ and some basic functions, but due to time problems, it is actually lazy, so it does not implement the backend Function, only the front-end interface is realized, and the functions are also realized by the front-end.
This article mainly shows various interfaces and functions, detailed codes and details, please download the program to understand, after the program is downloaded, please enter the cmd command line terminal and switch to the root directory of the program, enter "npm install" to install related dependencies, and then enter "npm run serve" to run the program.
The program source code and program design manual can be downloaded by clicking the link below for your reference.
Download link: imitation mobile phone QQ
Table of contents
page introduction
There are 8 main pages in this project, including: welcome page, login page, message page, contact page, dynamic page, session page, personalized business card page, and side function page. The overview of each page is as follows.
- Welcome page: used to "welcome" the user, it is actually the startup page of the APP, and jump to the login page after 3 seconds.
- Login page: Enter the QQ number and password to log in. Since this project has not implemented the back-end function yet, only the front-end page function is implemented, so the account password is written in the program code to simulate the login function.
- Message page: display a list of messages, click any one to enter the session page for chatting with friends.
- Contact page: display the friend list, group chat list, etc., and click on any friend to view the friend's personalized business card.
- Dynamic page: display various functions in QQ, such as: friend dynamics, game center, etc.
- Conversation page: A page for chatting with a friend, where you can enter messages. Since the backend is not involved, the specific chat function has not yet been implemented.
- Personalized business card page: display the user's business card, which includes the user's avatar, nickname, QQ number and other information. You can also click on the picture to view a larger image.
- Side function page: After clicking the avatar on the top bar of the main page, you can open the side function page, displaying some QQ function lists and some QQ information. After clicking the avatar here, you can view "My Personalized Business Card".
page display
There are 8 main pages in this project. The running test results of each page are shown next. Only the main functions are shown here. For other details, please download the program at the beginning of the article and experience it.
Welcome page (startup page)
When you start the project, the first thing you come to is the welcome page, that is, the startup page. After the page is displayed for 3 seconds, it will automatically jump to the login page.
log in page
After jumping to the login page, you need to enter the QQ number and password (both "123456") and click the button below to log in. If you do not enter the QQ number or password, you will be prompted at the bottom of the text box. If you have an incorrect QQ number or password, you will be prompted in the An error message is displayed at the top, and if the login is successful, it will jump to the main page-message page.
message page
The message page displays a list of messages. Click any one to enter the session page for chatting with friends. Pull down the messages, contacts, and dynamic pages to refresh. Click the "+" button on the top bar to display a bubble pop-up box. Click the label on the bottom bar You can switch to other pages, and each item in the message list can be slid to the left to display the "Top" and "Delete" buttons
session page
After clicking any message on the message page, you can enter the session page for chatting with friends, or you can click the "send message" button in the friend's personalized business card to enter.
contact page
There are four tabs in the contact page, friends, group, group chat, device, and there are foldable panels in group and group chat, which can be expanded to view friends or group chat, and click on a friend to view the friend's personalized business card.
Personalized business card page
The personalized business card page displays the detailed information of friends. On this page, click on the avatar or a photo in the selected photos to view a larger image, and click the "Send Message" button to initiate a chat with a friend.
dynamic page
The dynamic page simply displays various functions in QQ, such as friend dynamics, game center, etc.
side function page
After clicking the avatar on the top bar on the main page (messages, contacts, dynamics), it will jump to the side function page, displaying some QQ function lists and some QQ information. After clicking the avatar, you can view "My Personalized Business Card" .
code display
This program has a lot of code and has detailed notes. Only some important codes are shown here. For the complete code, please download the program at the beginning of the article to learn more.
Project entry file index.html
index.html is the entry file of the project, which mainly declares the header information of the website, imports corresponding resources, etc. The body is just a div, which mounts the Vue application instance.
<!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>
Program entry file main.js
main.js is the entry file of the program, which mainly completes the import of UI library components and routes, creates application instances, and mounts them.
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');
Component entry file App.vue
App.vue is the entry file of the component. It is a root component. This component is used as the starting point of rendering, and all other components will be rendered here.
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</style>
router
This project uses Vue-Router technology to render different components according to different routes. First, define the route and store it in routes, then use the createRouter method to create the route instance router and pass the routes configuration, and finally export the route instance router for the main.js file use.
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
other
A total of 11 custom components have been written in this project, including: TopBar, BottomBar, MessageCom, FriendsCom, DiscoverCom, WelcomeView, LoginView, HomeView, DialogView, CardView, and SideView. The view component belongs to the page-level component and constitutes each page. This part has a lot of content, and the code is not displayed here. Please download the complete program code at the beginning of the article to understand it.
postscript
This program is for learning and reference only, please do not plagiarize or use it for other purposes.
Thank you for watching. If you have any questions, please comment in the comment area below. If you think this article is well written, please like it.
Follow me, watch more exciting! ( • ̀ω•́ )✧Like, comment, bookmark, follow