脱单盲盒源码（交友盲盒源码）程序开发

标签：盲盒 App 程序开发应用程序 js Header 源码 import css

　交友盲盒程序是通过手机操作的约会应用程序。通过访问智能手机的 GPS 位置以及轻松访问数字照片库和移动钱包，它通常会升级约会的传统性质。它不仅简化了，而且还加快了选择潜在合作伙伴的过程。通过这些应用程序，年轻人变得更加浪漫。这些应用程序变得如此流行，以至于人们可以轻松完成诸如人际关系之类的大任务。

演示：m.ymzan.top

交友盲盒源码搭建

打开你的终端并创建一个约会应用程序文件夹。在其中，使用create-react-app创建一个名为blind-boxes-frontend的新应用程序。以下是执行此操作的命令。

blind-boxes-mern
cd blind-boxes-mern
npm create-react-app blind-boxes-frontend

返回到 React 项目并 cd 到 blind-boxes-frontend 目录。

使用 npm start 启动React应用程序。

cd blind-boxes-frontend
npm start

接下来，让我们删除一些我们不需要的文件。导航到约会应用程序前端> Src并删除以下文件

App.test.js ，reportWebVitas.js ， setupTests.js

让我们删除所有不必要的样板代码。index.js文件应如下所示。

#index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>,
 document.getElementById('root')
);

App.js仅包含文本Dating App MERN。App.css文件中的所有内容均已删除。

#App.js
import './App.css';
function App() {
 return (
  <div className="app">
   <h1>Dating App MERN </h1>
  </div>
 );
}
export default App;

在index.css中，更新 CSS 以在顶部设置 margin: 0。

*{
  margin: 0;
}

创建一个标题组件

让我们创建一个标题组件。首先，您必须安装提供图标的Material-UI。根据 Material- UI 文档，您需要进行两次 npm 安装。

通过 blind-boxesfrontend文件夹中的集成终端安装核心。

npm i @material-ui/core @material-ui/icons

接下来，在src文件夹中创建一个components文件夹。在 components 文件夹中创建两个文件Header.js 和Header.css 以下是Header.js文件的内容。

#Header.js
import React from 'react'
import './Header.css'
import PersonIcon from '@material-ui/icons/Person'
import IconButton from '@material-ui/core/IconButton'
import ForumIcon from '@material-ui/icons/Forum'
const Header = () => {
 return (
  <div className="header">
   <IconButton>
    <PersonIcon fontSize="large" 
    className="header__icon" />
   </IconButton>
   <img className="header__logo" 
   src="logo192.png" 
   alt="header" />
   <IconButton>
     <ForumIcon fontSize="large" 
     className="header__icon" />
   </IconButton>
  </div>
 )
}
export default Header

在App.js文件和 localhost中包含 Header 组件。更新的代码以粗体标记。

脱单盲盒源码（交友盲盒源码）程序开发_ico

Header.css文件包含以下内容，包括简单的样式，它完成了标题。

脱单盲盒源码（交友盲盒源码）程序开发_css_02

现在让我们处理第二个组件。在 components 文件夹中创建两个文件 - DatingCards.js和DatingCards.css 。

App.js的更新代码如下

#App.js
import './App.css';
import Header from './components/Header';
function App() {
 return (
  <div className="app">
   <Header />
  </div>
 );
}
export default App;

在继续之前，让我们安装这个包有一个提供滑动效果的功能。

npm i react-tinder-card

接下来，将内容放入DatingCards.js

　#DatingCards.js
import React, { useState } from 'react'
import DatingCard from 'react-tinder-card'
import './DatingCards.css'
const DatingCards = () => {
    const [people, setPeople] = useState([
        { name: "Random Girl", imgUrl: "https://images.unsplash.com/photo-1599842057874-37393e9342df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGdpcmx8ZW58MHx8MHx8&auto=format&fit=crop&w=634&q=80" },
        { name: "Another Girl", imgUrl: "https://images.unsplash.com/photo-1602693130555-a1a37fda607b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGJsYWNrJTIwZ2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=634&q=80" },
        { name: "Random Guy", imgUrl: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80" },
        { name: "Another Guy", imgUrl: "https://images.unsplash.com/photo-1601576084861-5de423553c0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MzF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=634&q=80" }
        ])
    const swiped = (direction, nameToDelete) => {
        console.log("receiving " + nameToDelete)
    }
    const outOfFrame = (name) => {
        console.log(name + " left the screen!!")
    }
    return (
        <div className="datingCards">
        <div className="datingCards__container">
        {people.map((person) => (
            <DatingCard
            className="swipe"
            key={person.name}
            preventSwipe={['up', 'down']}
            onSwipe={(dir) => swiped(dir, person.name)}
            onCardLeftScreen={() => outOfFrame(person.name)} >
            <div style={{ backgroundImage: `url(${person.
                imgUrl})`}} className="card">
                <h3>{person.name}</h3>  
                </div>
                </DatingCard>
                ))}
        </div>
        </div>
        )
}
export default DatingCards

在DatingCards.css文件中添加第一个样式。

#DatingCards.css
.datingCards__container{
display: flex;
justify-content: center;
margin-top: 10vh;
}
.card{
position: relative;
background-color: white;
width: 600px;
padding: 20px;
max-width: 85vw;
height: 70vh;
box-shadow: 0px 18px 53px 0px rgba(0, 0, 0, 0.3);
border-radius: 20px;
background-size: cover;
background-position: center;
}
.swipe{
position: absolute;
}
.cardContent{
width: 100%;
height: 100%;
}
.card h3{
position: absolute;
bottom: 0;
margin: 10px;
color: white;
}

创建 Swipe Buttons 组件在 components文件夹中创建两个文件 - SwipeButtons.js和SwipeButtons.css。

　　#App.js
import './App.css';
import Header from './components/Header';
import DatingCards from './components/DatingCards';
import SwipeButtons from './components/SwipeButtons';
function App() {
 return (
  <div className="app">
   <Header />
   < DatingCards />
   < SwipeButtons />
  </div>
 );
}
export default App;

SwipeButtons.js的内容

　　#SwipeButtons.js
import React from 'react'
import './SwipeButtons.css'
import ReplayIcon from '@material-ui/icons/Replay'
import CloseIcon from '@material-ui/icons/Close'
import StarRateIcon from '@material-ui/icons/StarRate'
import FavoriteIcon from '@material-ui/icons/Favorite'
import FlashOnIcon from '@material-ui/icons/FlashOn'
import IconButton from '@material-ui/core/IconButton'
const SwipeButtons = () => {
    return (
        <div className="swipeButtons">
        <IconButton className="swipeButtons__repeat">
                <ReplayIcon fontSize="large" />
        </IconButton>
        <IconButton className="swipeButtons__left">
                <CloseIcon fontSize="large" />
        </IconButton>
        <IconButton className="swipeButtons__star">
                <StarRateIcon fontSize="large" />
        </IconButton>
        <IconButton className="swipeButtons__right">
                <FavoriteIcon fontSize="large" />
        </IconButton>
        <IconButton className="swipeButtons__lightning">
                <FlashOnIcon fontSize="large" />
        </IconButton>
        </div>
        )
}
export default SwipeButtons

接下来，为SwipeButtons.css文件中的按钮设置样式。

#SwipeButtons.css
.swipeButtons{
position: fixed;
bottom: 10vh;
display: flex;
width: 100%;
justify-content: space-evenly;
}
.swipeButtons .MuiIconButton-root{
background-color: white;
box-shadow: 0px 10px 53px 0px rgba(0, 0, 0, 0.3) !important;
}
.swipeButtons__repeat{
padding: 3vw !important;
color: #f5b748 !important;
}
.swipeButtons__left{
padding: 3vw !important;
color: #ec5e6f !important;
}
.swipeButtons__star{
padding: 3vw !important;
color: #62b4f9 !important;
}
.swipeButtons__right{
padding: 3vw !important;
color: #76e2b3 !important;
}
.swipeButtons__lightning{
padding: 3vw !important;
color: #915dd1 !important;
}

交友盲盒程序的功能

用户配置文件的功能-通过配置文件将用户介绍给潜在的匹配项，因此必须具有有吸引力的配置文件。

地理位置——这提高了用户的参与度。不是每个人都愿意与远方的人互动，因为他们不太可能亲自见到他们。因此，交友盲盒程序为用户提供了选择区域或首选位置的选项。

匹配 - 这是任何约会应用程序提供的最重要的功能之一。客户为了方便和灵活需要快速匹配。匹配倾向于用户的偏好。数据由约会应用程序的机器算法仔细处理。它为用户提供个性化的体验。

聊天 - 交友盲盒程序具有各种聊天功能，例如 GIF、表情符号、贴纸。它对任何约会平台都起着同样重要的作用。用户只能与也喜欢他们的人发起对话。GIF、表情符号、贴纸等各种选项都受到用户的高度评价。为了客户的方便，约会解决方案具有推送通知选项。

内置设置——用户可以轻松访问通知、声音、私人档案、其他过滤器（性别、位置、偏好、年龄）。这使得访问应用程序非常容易。

约会应用程序

流行：从开发人员和用户的角度来看，这是优势之一。交友盲盒程序因其简单方便的访问而广受欢迎。也因为人们现在更喜欢在线约会解决方案而不是传统约会。客户达到了广泛的兴趣水平，并在社区中获得了良好的知名度。

易于使用：交友盲盒程序易于访问并且配置文件很简洁。也因为它们的便携性，用户可以随时随地访问它们。由于它们非常易于使用，用户可以随身携带。它们确实可以节省大量时间，高效且灵活。

增强和改进的功能：约会解决方案往往具有无数增强和改进的功能，以提高用户的灵活性和便利性。应用程序中新增的功能使用户深入而有趣地参与其中。

快速访问：对于那些日程安排非常忙碌、难以处理个人关系或寻找知己的人来说，交友盲盒程序非常适合他们。他们前来救援并为他们提供触手可及的快速访问。

范围广：由于庞大的网络，用户可以与大量的配置文件进行交互，并可以根据自己的好恶进行选择。

经济实惠：交友盲盒程序具有成本效益。这意味着您没有线下约会可能产生的优步费用、晚餐费用或电影票等费用。

接近的努力更少：对于性格内向的人来说，在线约会解决方案是一个很好的平台，他们可以毫不犹豫或付出太多努力找到他们的匹配对象。

总结

交友盲盒程序为用户提供了一个方便的平台来与他们的比赛进行互动。大多数忙碌的人都使用约会应用程序来减轻他们的任务并实现他们的目标。它建立了他们的创造力并为他们提供了灵活性。这些应用程序价格实惠，易于访问，并通过让他们有机会在各自的比赛中表达自己的方式来建立个人的个性和受欢迎程度。

标签：盲盒,App,程序开发,应用程序,js,Header,源码,import,css
From： https://blog.51cto.com/u_15752717/5801365

脱单盲盒源码（交友盲盒源码）程序开发

相关文章

赞助商

阅读排行