皮皮网

1.React组件设计-仿网易有道翻译主页
2.求大神指导，源码有没有前端学习视频，笔记自己找了好多，源码感觉有点乱，笔记觉得学的源码路线会错
3.2022年全网最全web前端项目实战课程(含项目实战+源码)
4.微信小程序实现狼人杀小游戏的示例详解
5.巧用 overflow-scroll 实现丝滑轮播图

React组件设计-仿网易有道翻译主页

       前言

       React组件化开发非常有利于搭建项目，也提高了组件的笔记inux服务器源码复用性。由于频繁使用网易有道翻译这个软件，源码让我萌生出想要征服ta的笔记冲动。开发过程中遇到了些许问题，源码页面还有很多功能还未完善，笔记现在只有一个首页，源码后续功能持续完善中。笔记

前期准备

       在组件页面成型之初需要几个开源组件库：

       axios：它是源码一个基于promise的网络请求库，用于获取后端数据（fastmock网站可以让你在没有后端程序的笔记情况下能真实地在线模拟ajax请求），是源码前端常用的数据请求工具；

       antd-mobile：由蚂蚁金融团队推出的一个开源的react组件库,这个组件库拥有很多使用的组件；

       swiper：能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。

       styled-compenonts：真正的cssinjs，增强CSS以对React组件系统进行样式设置的结果，具有简单的动态样式、轻松维护等优点。

正文

       组件展示?

组件设计思路

       顶部：用flex布局，方便快捷（一切皆可flex）

       搜索栏：使用antd-mobile组件库的SearchBar，点击转跳到搜索页面

       图标轮播和轮播图：主要使用swiper进行设计，实现自动轮播效果

       底部栏：用fixed固定住

组件封装

       先对项目进行脚手架的建构（使用vite脚手架，使用起来快速方便）

npminit@viteja/app

       src下的目录内容

       api：存放与数据相关的链接，组件所有的数据将会在这一个文件夹下的request.js中使用ajax进行数据请求

       assets：存放静态资源，font、image等

       components：放置重复使用的组件

       config：存放页面标题配置

       modules：配置页面自适应横竖屏

       pages：各个页面

       routes：页面的路由

搜索栏

       直接使用antd-mobile的SearchBar

importReactfrom'react'import{ SearchBar}from'antd-mobile'import{ Link}from'react-router-dom'import{ Wrapper}from'./style'

       exportdefaultfunctionSearch(){ return(

{ /*点击搜索框跳转搜索页面*/}

       )}```

数据请求

       前端页面数据的展示不能写死在代码里面，需要数据请求，fastmock则走入了我的视野，在线接口Mock工具fastmock?在线模拟ajax请求（fastmock在没有后端程序的情况下可以实现ajax请求，有需要的小伙伴可以去尝试）

       api文件夹下的request.js进行axios数据请求

importaxiosfrom'axios'exportconstgetBanners=()=>axios.get('/post/

求大神指导，有没有前端学习视频，自己找了好多，感觉有点乱，觉得学的玩主源码路线会错

            1.首先零基础学习前端先要有一个计划，了解前端要学习哪些技术。

       2.做好自己的时间规划，如何快速入门前端那肯定是需要不断的提高自己的学习效率，学习过程中尽量把手机调至静音给自己一个安静的学习环境和氛围。

       3.快速入门顾名思义肯定是少走弯路，在学习过程中看下自己身边有没有前端这方面的大神尽量多问，多交流，如果是没有的话，可以多去找一些前端的交流群，学习肯定是不能闭门造车。

       学习是一个循序渐进的过程，前端的学习也是如此。

       不论前端开发还是后端开发的学习都要求我们多动手，既要反复的看书，也把学习到的知识点第一时间去实践。前端的学习入门快要三个月，慢的要 5-6 个月左右，看个人的理解速度来评估，只要入门了不论理解能力，还是学习的速度都会有明显的提升。

       在学习前端的过程中，除了要把学到的知识点第一时间去实践，也要在学习的每个阶段自己创建课题，用所学到的知识去实现课题的内容。这样可以更好有助于理解和累计一定的项目经验。

       前端的学习从来不是孤军奋战，需要一个前辈的领路，也需要一个平台不断交流和思维碰撞。这样可以快速入门和少走弯路，也能让自己发现问题的根本所在。

       阶段一

       在学习前端之前呢，你需要一个编辑器，在网上你可以看到很多编辑器用来编写前端，甚至 Windows 系统默认的文本文档也可以作为前端代码的编辑器。俗话说，没有金刚钻怎么揽瓷器活，象限图源码所以一个好的编辑器很重要，我在这里推荐给大家的编辑器是 VSCode。

       思维导图

       前端开发工具

       一、HTML+CSS

       前端的入门门槛是极低的，主要体现在 HTML 和 CSS 部分，运行环境就是浏览器，不像如 Java 需要配置开发/运行环境。

       HTML 和 CSS 不是编程语言，HTML 是结构标签，CSS 是结构标签的样式配置。

       HTML

       属性

       事件

       标签

       字符集

       CSS

       CSS基础教程

       CSS样式

       CSS框模型

       CSS定位

       CSS选择器

       CSS高级

       思维导图

       HTML+CSS以上内容的学习用时 天左右，再花 2 天的时间项目实践，这部分总花费时间在 天左右。

       二、HTML5+CSS3

       HTML5 作为 HTML 的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。

       HTML5 可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为 HTML5 技术的主要优点之一。

       CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。

       CSS3的改变有很多，增加了文字特效，乐赞源码丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。

       CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。

       HTML5

       HTML5视频

       HTML5音频

       HTML5拖放

       HTML5画布

       HTML5 SVG

       HTML5地理定位

       HTML5 Web存储

       HTML5 应用缓存

       HTML5表单

       CSS3

       CSS3边框

       CSS3背景

       CSS3文本效果

       CSS3字体

       CSS3 2D转换

       CSS3 3D 转换

       CSS3 过渡

       CSS3 动画

       CSS3 多列

       思维导图

       HTML5+CSS以上内容用时  天左右，这部分内容是在 HTML+CSS 做的升级改进，只需要了解他们的一些特性即可，再结合这些特性做一些小项目加深学习。

       请点击输入描述

       四、JavaScript

       JavaScript 是 web 开发者必学的三种语言之一，这里我们需要区别 JavaScript 和 Java 他们是完全不同的语言，不论是概念还是设计。javascript 部分需要我们学习的知识点如下所示：

       认识JavaScript

       基本语法

       变量

       数据类型

       字符串

       数字

       布尔

       数组

       对象

       Null

       Undefined

       5. 函数

       内置函数

       自定义哈数

       6. 运算符

       7. 流程控制

       8. DOM对象

       String

       Array

       Date

       Boolean

       Math

       Number

       9. BOM对象

       WIndow

       Navigator

       Screen

       History

       Location

       . 综合实例

       思维导图

       javascript以上内容的学习用时 天 左右，这里推荐几本 Javascript 的书籍，如下：

       《JavaScript 高级程序设计（第3版）》，俗称红宝书。前七章讲的是语言特性，是重点学习的部分，必须需要反复阅读，直至完全理解为止。DOM、事件流、表单、JSON、Ajax 与最后几章也需要重点学习，这是一些常用的 Web API。至于本书的其余部分大致读一下就可以，不做重点要求。

       《JavaScript 语言精粹》，云快递源码俗称蝴蝶书。很薄的一本书总页数就 页，花一天时间就能看完，快的话半天就能看完。这本书虽然很薄，但是承载的内容却非常的丰厚和深入。JavaScript是一门有很多坑的语言，所以这本书”取其精华，去其糟粕“就是精粹了。

       《你不知道的 JS》非常精彩的一本书，将 JavaScript 的细节一网打尽。

       阶段二

       这部分内容是对 JavaScript 的补充学习

       四、 Jquery学习

       1. 基础语法

       2. 选择器

       基本选择器

       层次选择器

       过滤选择器

       表单选择器

       3. DOM操作

       查找节点

       创建节点

       插入节点

       删除节点

       复制节点

       替换节点

       包裹节点

       属性操作

       样式操作

       4. 事件

       事件绑定

       事件冒泡

       5. 动画

       show、hide

       fadeIn、fadeOut

       slideUp、slideDown

       自定义动画animate

       动画回调以及停止动画

       6. 常用工具

       浏览器及特性检测

       数组和对象操作

       Layer UI，主要学习栅格布局，图标，动画，按钮，表单，导航，选项卡，进度条，面板，表格，时间线等

       7. Ajax

       8. Jquery插件编写

       思维导图

       请点击输入描述

       二、其他

       JavaScript 进阶

       DOM+BOM综合演练

       网页特效

       ES6 进阶

       bootstrap

       animate.css学习

       请点击输入描述

       以上内容的学习用时 天左右

       阶段三

       这部分是框架和前后端交互技术的学习

       一、Vue

       Vue基础

       模版语法

       计算属性侦听器

       Class与Style绑定

       条件/列表渲染

       事件处理

       表单输入绑定

       组件基础、注册

       Prop

       自定义事件

       2. Vuex

       State

       Getter

       Mutation

       Action

       Module

       3. Vue-router

       认识路由

       动态路由

       嵌套路由

       编程式导航

       路由组件传参

       4. axios

       认识axios

       全局配置

       发送POST、GET请求等

       思维导图

       请点击输入描述

       二、React

       认识React

       React元素渲染

       JSX

       组件

       State

       Props

       事件处理

       条件渲染

       列表

       组件API

       组件声明周期

       思维导图

       三、Node

       基础

       console（控制台）

       crypto（加密）

       debugger（调试器）

       fs（文件系统）

       http（网络）

       os（操作系统）

       path（路径）

       2. 高级

       NPM介绍及使用

       MVC模式简介

       Express框架学习

       链接Mysql

       链接Redis

       项目实战

       思维导图

Node

       四、webpack

       概念

       主要讲什么是入口，出口，loader，插件等

       2. 入口

       单个入口语法

       对象语法

       常见场景

       3. 输出

       用法

       多个入口起点

       高级进阶

       4. 模式

       development

       production

       5. loader

       实例

       配置

       6. 插件

       剖析

       用法

       配置

       7. 配置

       基本配置

       多个Target

       使用其他语言配置

       8. 模块

       思维导图

webpack

       以上内容用时 两个月 左右

       阶段四（扩展部分，了解即可）

       一、Mysql

       阶段一

       认识mysql

       安装mysql

       创建数据库、数据表

       学习常用的SQL命令，完成增删查改

       2. 阶段二

       学习Mysql关联查询，子查询等

       学习Mysql常用函数

       学习Mysql分组、分页、排序等

       3. 阶段三

       学习Mysql高级查询

       了解存储过程，自定义函数等

       了解Mysql配置文件

       二、Redis

       认识Redis

       学习redis的数据类型

       redis常用操作

       redis事务

       思维导图

数据库

       以上内容用时 7 天左右

       阶段五

       一、项目管理篇

       SVN使用

       认识svn

       安装

       生命周期

       启动模式

       创建版本库

       检出操作

       解决冲突

       提交操作

       版本回退

       查看历史

       分支

       标签

       2. GIT使用

       认识git

       安装配置

       工作流程

       工作区、暂存区和版本库

       创建仓库

       基本操作

       分支管理

       查看历史等

       标签

       github

       二、扩展部分

       小程序

       1. 了解小程序开发流程

       2. 视图容器

       view

       scroll-view

       movable-view

       cover-view

       cover-image

       3. 基础内容

       icon

       text

       rich-text

       progress

       4. 表单组件

       button

       checkbox

       form

       input

       label

       picker

       picker-view

       radio

       slider

       switch

       textarea

       5. 导航

       navigator

       function-page-navigator

       6. 媒体组件

       audio

       image

       video

       camera

       live-player

       live-pusher

       7. 地图（map）

       8. 画布（canvas）

       9. 开放能力

       open-data

       web-view

       ad

       official-account

       apicloud（移动app开发）

       认识apicloud

       开发工具讲解

       端API

       API对象

       设备访问

       功能扩展

       界面布局

       导航菜单

       小程序模块

       云服务对接

       4. 云API

       数据云API

       统计云API

       推送云API

       云API SDK

       5. 小程序模块使用

       三、常用框架使用篇

       iview （vue框架）

       element ui （vue框架）

       echarts (百度图标库)

       阿里巴巴开源图标使用

       Sass学习

       Swiper学习

       zoom.js 学习

       四、综合项目实战

       教务管理系统（node+express+mysql）实现

       思维导图

扩展学习部分       

参考资料：

前端学习路线，如何学习前端

年全网最全web前端项目实战课程(含项目实战+源码)

       今天，我向大家推荐一套全网最全的web前端项目实战课程，旨在帮助前端学习者提升实战经验。课程内容丰富，涵盖了多个项目实战，旨在满足不同阶段学习者的需求。以下是课程中的精选项目，帮助你构建全面的前端技能。

       项目一：小米官网

       选取小米官网作为实战案例，旨在为初学者提供一个实践目标，学习如何构建类似布局。通过模仿其设计，练习div+css布局，掌握网页结构与视觉设计的基础。

       项目二：响应式设计

       本项目包含多种特效，旨在通过实践增强学生对CSS3过渡、动画等新功能的理解与运用。通过构建子站点，进一步巩固div+css布局技能。

       项目三：米课网

       作为响应式站点，米课网的实践有助于学习者了解响应式设计的过程和实现方法，适用于需要支持响应式布局的现代站点。

       项目四：美食网(移动端)

       专注于移动设备布局的项目，涉及店铺展示、餐饮列表、视频详情等页面，通过此项目学习如何构建移动端网站，掌握M站布局技巧。

       项目五：IMMERSE音乐播放器

       音乐播放器项目集中练习Vue框架的应用，包括主Vue应用程序、组件构建、项目测试等，帮助学习者熟悉Vue生态。

       项目六：登录注册认证系统

       作为每个项目的基础组件，登录系统提供独立实践机会，熟悉react、redux、react-router等技术栈，为项目整合打下基础。

       项目七：Ego商城后台管理系统

       深入后台管理领域，学习添加、删除、查看等功能的实现，涉及Vue、Vuex、Vue-Router等技术栈，强化管理系统开发能力。

       项目八：微信小程序-蓝莓派社区

       微信小程序阶段，基于前期学习成果，实践项目功能开发，掌握微信小程序技术，实现项目需求。

       项目九：推广类移动端页面

       专注于分析与展示运势结果，利用Swiper、jQuery、REM、Less等技术，实现场景化应用，增强移动端用户体验。

       项目十：蓝莓派社区

       音乐社区项目，包括交互功能如滑动门、精灵贴图、模态框架等，通过JavaScript、jQuery、REM等技术实现，提升前端交互能力。

       项目十一：宜居租房类WebApp

       租房类WebApp项目，涵盖登录注册、城市选择、搜索等功能，使用React、React-Router、Redux、Fetch等技术栈，实现全面功能。

       以上项目为前端学习者提供了全面的实战经验，涵盖从基础到进阶的技能培养。赶快加入学习，提升你的web前端实战能力吧！

微信小程序实现狼人杀小游戏的示例详解

       狼人杀是一款多人参与的策略类桌面游戏，适合4至人玩。游戏中有多种角色，包括狼人、预言家、平民、女巫、猎人、白痴、守卫、骑士等。每个角色都有其独特功能。游戏人数决定了角色数量，如人数达到人时，将出现丘比特角色。

       首页是选择游戏人数的页面，不同人数分配不同角色数量。常驻角色有狼人、村民、预言家、女巫、猎人。当游戏人数达到人时，会出现丘比特。UI代码如下：

       index.wxml：

       <view class="container">

        <view class="setting">

        <image class="logo" src="{ { logo}}"/>

        </view>

        <form action="">

        <picker range="{ { array}}" value="{ { index}}" bindchange="gameNumberChange">

        <text class="picker">选择游戏人数:</text>

        <text wx:if="{ { array[index] < }}">{ { array[index]}}</text>

        <text wx:else>{ { array[index]}}</text>

        </picker>

        <view class="role-config">

        <view wx:for="{ { config}}">

        <image class="role-logo" src="{ { item.role.logo}}"/>

        { { item.role.name}} x { { item.count}}

        </view>

        </view>

        </form>

       </view>

       <button type="primary" bindtap="startGame">开始游戏</button>

       游戏开始后，玩家需抽取角色牌，随后跳转至游戏界面。角色选取界面的部分代码如下：

       <view class="container" wx:if="{ { isChoosing}}">

        <view class="inner-container">

        <view class="swiper-indicator">{ { swiperCurrent}}/{ { roles.length}}</view>

        <swiper bindchange="swiperCurrentChange">

        <swiper-item wx:for="{ { roles}}">

        <view class="item-container">

        <view class="side-space"/>

        <image src="{ { cover}}" class="cover"/>

        <view class="side-space"/>

        </view>

        </swiper-item>

        </swiper>

        <button type="primary" bindtap="chooseRole">选择这张牌</button>

        </view>

       </view>

       <view class="inner-container" wx:else>

        <view class="role-logo-container">

        <image src="{ { choosedRole.logo}}" class="role-logo" animation="{ { roleLogoAnimationData}}"/>

        </view>

        <view class="role-name">你的角色是: { { choosedRole.name}}</view>

        <view class="role-description">{ { choosedRole.description}}</view>

        <button type="primary" bindtap="setReady">准备好了</button>

       </view>

       游戏中有多个白天与黑夜的转换环节，狼人可以在黑夜中淘汰选手。神职人员有着不同的技能。女巫有两瓶药，一瓶救命一瓶杀人；猎人可以在每轮猎杀一名玩家。这些角色和技能让游戏充满变数和乐趣。

       特殊角色的介绍就到这里，是不是很有趣呢？

       源码获取链接：提取码

巧用 overflow-scroll 实现丝滑轮播图

       实现轮播图组件，我选择了自定义方式，而非直接使用“Swiper”等开源库，以解决项目中遇到的移动端测试环境问题。尽管代码量不多，仅为行，但完美满足了需求。

       轮播图组件的实现，考验前端基本功，本文旨在逐步解析细节，为有需求的读者提供深入理解。

       **一、基础框架构建

**

       首先，我们基于`overflow-scroll`技术构建轮播图的基础框架。效果如下所示。

       **二、自动切换功能实现

**

       理解`scroll-type`属性对于实现自动切换至关重要。它影响滚动容器的滚动行为，需置于设置有`overflow-auto`等属性的元素上。

       `x`属性指明在横轴方向的滚动位置，而`y`属性则对应竖轴。通过调整`scroll-type`，实现子元素相对于滚动容器的对齐方式。

       下面是自动切换功能的实现效果。

       **三、上下切换功能

**

       通过`e.target`获取滚动容器，利用其`scrollLeft`属性追踪滚动位置变化。下面展示`scrollLeft`值的变化。

       实际效果如下所示。

       **四、源码示例

**

       完整的源代码涵盖了基本框架、自动切换、上下切换功能，确保了轮播图的流畅体验。不过，为了保持文章简洁，本文仅展示了核心部分。

       **五、结语

**

       在实际项目中，我进一步实现了从最后一张到第一张，或从第一张到最后一张的无缝切换。但为保持本文的聚焦性，未在此详述。如有读者对后续实现感兴趣，我计划在后续文章中分享更多细节。