从构思到上线的全过程，开发中遇到一些未知问题，也都通过查阅资料和源码一一解决，小记一下望对正在使用或即将使用Nextjs开发的你们有所帮助。

那些年我开发过的博客

就挺有意思，域名，技术栈和平台的折腾史

• 2018年使用hexo搭建了个静态博客，部署在github pages


• 2020年重新写了博客，vue，nodejs，mongodb三件套，使用nginx部署在云服务器上


• 2023年云服务器过期了，再一次重写了博客，nextjs为基础框架，部署在vercel上

背景

因为日常开发离不开终端，正好也有重写博客的想法，打算开发一个不只是看的博客网站，所以模仿终端风格开发了Yucihent。

技术栈

nextjs 更多技术栈

选用nextjs是因为next13更新且稳定了App Router和一些其他新特性。

设计

简约为主，首页为类终端风格，prompt样式参考了starship，也参考过ohmyzsh themes，选用starship因为觉得更好看。

交互

通过手动输入或点击列出的命令进行交互，目前可交互的命令有：

• help 查看更多


• list和ls 列出可用命令


• clear 清空所有输出


• posts 列出所有文章


• about 关于我

后续会新增一些命令，增加交互的趣味。

暗黑模式

基于tailwind的dark mode和next-themes

首先将tailwind的dark mode设置为class，目的是将暗黑模式的切换设置为手动，而不是跟随系统。

// tailwind.config.js



module.exports = {

  darkMode: 'class'

}

新建ThemeProvider组件，用到next-themes提供的ThemeProvider，需要在文件顶部使用use client，因为createContext只在客户端组件使用。

'use client'



import { ThemeProvider as NextThemeProvider } from 'next-themes'

import type { ThemeProviderProps } from 'next-themes/dist/types'



export default function ThemeProvider({

  children,

  ...props

}: ThemeProviderProps) {

  return <NextThemeProvider {...props}>{children}</NextThemeProvider>

}

在app/layout.tsx中使用ThemeProvider，设置attribute为class，这是必要的。

<ThemeProvider attribute="class">{children}</ThemeProvider>

next-themes提供了useTheme，解构出theme和setTheme用于手动设置主题。

综上基本实现暗黑模式切换，但你会在控制台看到此报错信息：Warning: Extra attributes from the server: class,style，虽然它并不影响功能，但终究是个报错。
作为第三方包，可能存在水合不匹配的问题，经查阅资料，禁用ThemeProvider组件预渲染消除报错。

资料：

• Warning: Extra attributes from the server: style


• Disabling SSR on specific components

const NoSSRThemeProvider =

  dynamic(() => import('@/components/ThemeProvider'), {

    ssr: false

  })



<NoSSRThemeProvider attribute="class">{children}</NoSSRThemeProvider>

类终端

由输入和输出组件组成，输入的结果添加到输出list中

命令输入的打字效果

定义打字间隔100ms，对键入的命令for处理，定时器中根据遍历的索引延迟赋值。

const autoTyping = (cmd: string) => {

  const interval = 100 // ms

  for (let i = 0; i < cmd.length; i++) {

    setTimeout(

      () => {

        setCmd((prev) => prev + cmd.charAt(i))

      },

      interval * (i + 1)

    )

  }

}

滚动到底部

定义外层容器ref为containerRef，键入命令后都自动滚动到页面底部，使用了scrollIntoViewapi，作用是让调用这个api的容器始终在页面可见，block参数设置为end表示垂直方向末端对其即最底端。

const containerRef = useRef<HTMLDivElement>(null)

useEffect(() => {

  containerRef.current?.scrollIntoView({

    behavior: 'smooth',

    block: 'end'

  })

}, [typedCmds])

MDX

何为mdx？即给md添加了jsx支持，功能更强大的md，在nextjs中通过@next/mdx解析.mdx文件，它会将md和react components转成html

安装相关包，后两者作为@next/mdx的peerDependencies

• @next/mdx


• @mdx-js/loader


• @mdx-js/react

在next.config.js新增createMDX配置

// next.config.js



import createMDX from '@next/mdx'



const nextConfig = {}



const withMDX = createMDX()

export default withMDX(nextConfig)

接着在应用根目录下新建mdx-components.tsx

// mdx-components.tsx



import type { MDXComponents } from 'mdx/types'



export function useMDXComponents(components: MDXComponents): MDXComponents {

  return {

    ...components

  }

}

在app目录下使用.mdx文件，useMDXComponents组件是必要的，

需要注意的是此文件命名上有一定规范只能命名为mdx-components，不能为其他名称，也不可为MdxComponents，从@next/mdx源码中可以看出会去应用根目录查找mdx-components。

// @next/mdx部分源码



config.resolve.alias['next-mdx-import-source-file'] = [

  'private-next-root-dir/src/mdx-components',

  'private-next-root-dir/mdx-components',

  '@mdx-js/react'

]

至此就可以在app中使用mdx。

排版

为mdx解析成的html添加样式

解析mdx为html，但并没有样式，所以我们借助@tailwindcss/typography来为其添加样式，在tailwind.config.js使用该插件。

// tailwind.config.js



module.exports = {

  plugins: [require('@tailwindcss/typography')]

}

在外层标签上添加prose的className，prose-invert用于暗黑模式。

<article className="prose dark:prose-invert">{mdx}</article>

综上我们实现了对mdx的样式支持，然而有一点是@tailwindcss/typography并不会对mdx代码块中代码进行高亮。

代码高亮

写文章或多或少都有代码，高亮是必不可少，那么react-syntax-highlighter该上场了

定义一个CodeHighligher组件

// CodeHighligher.tsx



import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'

import {

  oneDark,

  oneLight

} from 'react-syntax-highlighter/dist/cjs/styles/prism'

import { useTheme } from 'next-themes'



export default function CodeHighligher({

  lang,

  code

}: {

  lang: string

  code: string

}) {

  const { theme } = useTheme()

  return (

    <SyntaxHighlighter

      language={lang?.replace(/\language-/, '') || 'javascript'}

      style={theme === 'light' ? oneLight : oneDark}

      customStyle={{

        padding: 20,

        fontSize: 15,

        fontFamily: 'var(--font-family)'

      }}

    >

      {code}

    </SyntaxHighlighter>

  )

}

react-syntax-highlighter高亮代码可用hljs和prism，我在这使用的prism，两者都有众多代码高亮主题可供选择，lang如果没标注则默认设置为javascript也可以简写为js，值得注意的是如果是使用hljs，则必须写javascript，不可简写为js，否则代码高亮失败，这一点prism更加友好。

同时可通过useTheme实现亮色，暗色模式下使用不同代码高亮主题。

组件写好了，该如何使用？上面讲到过mdx的解析，在useMDXComponents重新渲染pre标签。

// mdx-components.tsx



import type { MDXComponents } from 'mdx/types'

import CodeHighligher from '@/components/CodeHighligher'



export function useMDXComponents(components: MDXComponents): MDXComponents {

  return {

    pre: ({ children }) => {

      const { className, children: code } = props

      return <CodeHighligher lang={className} code={code} />

    }

  }

}

mdx文件中代码块会被解析成pre标签，可以对pre标签返回值作进一步处理，即返回高亮组件，这样可实现对代码高亮，当然高亮主题很多，选自己喜欢的。

文章

元数据

文章一些信息如标题，描述，日期，作者等都作为文章的元数据，使用yaml语法定义

---

title: '文章标题'

description: '文章描述'

date: '2020-01-01'

---

@next/mdx默认不会按照yaml语法解析，这会被解析成h2标签，然而我们并不希望元数据被解析成h2标签作为内容展示，更希望拿这类数据做其他处理，
为了正确解析yaml，需要借助remark-frontmatter来实现。

使用该插件，注意需要修改next配置文件名为next.config.mjs，因为remark-frontmatter只支持ESM规范。

// next.config.mjs



import createMDX from '@next/mdx'

import frontmatter from 'remark-frontmatter'



const nextConfig = {}



const withMDX = createMDX({

  options: {

    remarkPlugins: [frontmatter]

  }

})

export default withMDX(nextConfig)

yaml被正确解析了那么我们可以使用gray-matter来获取文章元数据

列表

由于app目录是运行在nodejs runtime下，基本思路是用nodejs的fs模块去读取文章目录即mdxs/posts，读取该目录下的所有文章放在一个list中。

使用fs.readdirSync读取文章目录内容，但是这仅仅是拿到文章名称的集合。

const POST_PATH = path.join(process.cwd(), 'mdxs/posts')



// 文章名称集合

export function getPostList() {

  return fs.readdirSync(POST_PATH).map((name) => name.replace(/\.mdx/, ''))

}

文章列表中展示的是标题而不是名称，标题作为文章的元数据，通过gray-matter的readapi读取文件可获取（也可以使用fs.readFileSync） read返回data和content的对象，
data是元数据信息，content则是文章内容。

export function getPostMetaList() {

  const posts = getPostList()



  return posts.map((post) => {

    const {

      data: { title, description, date }

    } = matter.read(path.join(POST_PATH, `${post}.mdx`))



    // 使用fs.readFileSync

    // const post = fs.readFileSync(path.join(POST_PATH, `${post}.mdx`), 'utf-8')

    // const {

    //   data: { title, description, date }

    // } = matter(post)



    return {

      slug: post,

      title,

      description,

      date

    }

  })

}

上述方法中我们拿到了所有文章标题，描述信息，日期的list，根据list渲染文章列表。

详情

文章列表中使用Link跳转到详情，通过dynamic动态加载文章对应的mdx文件

export default function LoadMDX(props: Omit<PostMetaType, 'description'>) {

  const { slug, title, date } = props



  const DynamicMDX = dynamic(() => import(`@/mdxs/posts/${slug}.mdx`), {

    loading: () => <p>loading...</p>

  })



  return (

    <>

      <div className="mb-12">

        <h1 className="mb-5 font-[600]">{title}</h1>

        <time className="my-0">{date}</time>

      </div>

      <DynamicMDX />

    </>

  )

}

generateStaticParams

优化文章列表跳转详情的速度

在文章详情组件导出generateStaticParams方法，这个方法在构建时静态生成路由，而不是在请求时按需生成路由，一定程度上提高了访问详情页速度

export async function generateStaticParams() {

  const posts = await fetch('https://.../posts').then((res) => res.json())



  return posts.map((post) => ({

    slug: post.slug

  }))

}

部署

项目是部署在vercel，使用github登录后我们新建一个项目，点进去后会看到Import Git Repository，导入对应仓库即可，也可使用vercel提供的模版新建一个，后续我们每次提交代码都会自动化部署。

有自己域名的可以在Domains中添加，然后去到你买域名的地方添加对应DNS解析即可。

总结

开发中遇到了一些坑：

module.exports = withMDX({

  experimental: {

    mdxRs: true

  }

})

后续更新：

06-汽车动态换肤的案列

课程内容

一、环境的搭建

(1)搭建项目

threejs的每个版本都有一些差异，在api和threejs项目文件夹下面，本案列使用的版本

npm i three@0.153.0

项目的目录结构如下：

03-fulldemo

└───css

    │───main.css

    │

└───draco

    │───gltf——存放Google Draco解码器插件

    │

└───models——存放模型

    │───ferrari.glb——模型文件，可以是glb也可以是gltf格式

		│───ferrari_ao.png——模型贴图，这个图片是阴影效果

    │

└───textures——纹理材质

    │───venice_sunset_1k.hdr——将其用作场景的环境映射或者用来创建基于物理的材质

    │

(2)代码基础结构搭建

创建对应的html文件并引入相应的环境

<!DOCTYPE html>

<html lang="en">

	<head>

		<title>three.js webgl - materials - car</title>

		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

		<link type="text/css" rel="stylesheet" href="./css/main.css">

		<style>

			body {

				color: #bbbbbb;

				background: #333333;

			}

			a {

				color: #08f;

			}

			.colorPicker {

				display: inline-block;

				margin: 0 10px

			}

		</style>

	</head>



	<body>

    <!--设置三个按钮，用于切换车身、轮毂、玻璃的颜色-->

		<div id="info">

			<span class="colorPicker"><input id="body-color" type="color" value="#ff0000"></input><br/>Body</span>

			<span class="colorPicker"><input id="details-color" type="color" value="#ffffff"></input><br/>Details</span>

			<span class="colorPicker"><input id="glass-color" type="color" value="#ffffff"></input><br/>Glass</span>

		</div>

		<!--要渲染3D的容器-->

		<div id="container"></div>

		<script type="importmap">

			{

				"imports": {

					"three": "./node_modules/three/build/three.module.js",

					"three/addons/": "./node_modules/three/examples/jsm/"

				}

			}

		</script>

		<script type="module">

			import * as THREE from 'three';

      //用于显示屏幕渲染帧率的面板

			import Stats from 'three/addons/libs/stats.module.js';

      //相机控件OrbitControls实现旋转缩放预览效果。

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

      //加载GLTF文件格式的加载器，用于加载外部为gltf的文件

			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

      //Draco是一个用于压缩和解压缩 3D 网格和点云的开源库

			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

      //RGBELoader可以将HDR图像加载到Three.js应用程序中

			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';    

      

      //下面的代码就是JS渲染逻辑代码

		</script>

	</body>

</html>

在css/main.css文件中我们的代码如下

body {

	margin: 0;

	background-color: #000;

	color: #fff;

	font-family: Monospace;

	font-size: 13px;

	line-height: 24px;

	overscroll-behavior: none;

}



a {

	color: #ff0;

	text-decoration: none;

}



a:hover {

	text-decoration: underline;

}



button {

	cursor: pointer;

	text-transform: uppercase;

}



#info {

	position: absolute;

	top: 0px;

	width: 100%;

	padding: 10px;

	box-sizing: border-box;

	text-align: center;

	-moz-user-select: none;

	-webkit-user-select: none;

	-ms-user-select: none;

	user-select: none;

	pointer-events: none;

	z-index: 1; /* TODO Solve this in HTML */

}



a, button, input, select {

	pointer-events: auto;

}



.lil-gui {

	z-index: 2 !important; /* TODO Solve this in HTML */

}



@media all and ( max-width: 640px ) {

	.lil-gui.root { 

		right: auto;

		top: auto;

		max-height: 50%;

		max-width: 80%;

		bottom: 0;

		left: 0;

	}

}



#overlay {

	position: absolute;

	font-size: 16px;

	z-index: 2;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	flex-direction: column;

	background: rgba(0,0,0,0.7);

}



#overlay button {

  background: transparent;

  border: 0;

  border: 1px solid rgb(255, 255, 255);

  border-radius: 4px;

  color: #ffffff;

  padding: 12px 18px;

  text-transform: uppercase;

  cursor: pointer;

}



#notSupported {

	width: 50%;

	margin: auto;

	background-color: #f00;

	margin-top: 20px;

	padding: 10px;

}

效果如下图：

二、进行3D场景的渲染

(1)进行初始化函数设计

在项目中我们添加一个carInit函数进行动画的初始化

...省略之前代码

//下面的代码就是JS渲染逻辑代码

let scene, renderer, grid, camera;

function initCar(){

  //里面就开始进行3D场景的搭建

}



//执行初始化函数

initCar()

上面的函数设计用于执行我们所有3d业务代码。

(2)创建场景

/**

 * (1)获取要渲染的容器

 */

const container = document.getElementById('container');



/**

 * (2)创建场景对象Scene

 */

//创建一个场景对象，用来模拟3d世界

scene = new THREE.Scene();

//设置一个场景的背景颜色

scene.background = new THREE.Color(0x333333);

//这个类中的参数定义了线性雾。也就是说，雾的密度是随着距离线性增大的

scene.fog = new THREE.Fog("red", 10, 15);

background:这个属性用于设置我们场景的背景颜色，0x333333默认采用深灰来作为我们初始颜色

fog:定义了线性雾，类似于在背景指定位置设置雾化的效果，让背景看起来更加模糊，凸显空旷效果。

(3)坐标格辅助对象

/**

* (3)坐标格辅助对象. 坐标格实际上是2维线数组.

*/

//创建网格对象，参数1:大小，参数2:网格细分次数,参数3:网格中线颜色，参数4:网格线条颜色

grid = new THREE.GridHelper(40, 40, 0xffffff, 0xffffff);

//网格透明度

grid.material.opacity = 1;

grid.material.depthWrite = false;

grid.material.transparent = true;

scene.add(grid);

坐标格辅助对象GridHelper可以在3D场景中定义坐标格出现。后续我们会在坐标格上面放我们的模型进行展示

代码编写完毕后，最终渲染出来的坐标格效果如下：

(4) 创建相机对象

/**

* (4)创建透视相机

* 参数一：摄像机视锥体垂直视野角度

* 参数二：摄像机视锥体长宽比

* 参数三：摄像机视锥体近端面

* 参数四：摄像机视锥体远端面

*/

camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.3, 100);

camera.position.set(0, 1.4, - 4.5);

任何一个3D渲染效果都需要相机来成像

这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式

透视相机最大的特点就是满足近大远小的效果。

(5)创建一个渲染器

/**

 *  (5)创建一个渲染器

 */

renderer = new THREE.WebGLRenderer({ antialias: true });

renderer = new THREE.WebGLRenderer({ antialias: true });

//设置设备像素比。通常用于避免HiDPI设备上绘图模糊

renderer.setPixelRatio(window.devicePixelRatio);

//设置渲染出来的画布范围

renderer.setSize(window.innerWidth, window.innerHeight);

container.appendChild(renderer.domElement);

renderer.render(scene, camera);

有了场景、相机、坐标格辅助，我们想要让画面能够呈现出来，那就得有渲染器。

相当于你拍照需要将画面呈现到交卷上面。

其中renderer.render(scene, camera); 这段代码就是在进行渲染器的渲染。

如果render在指定频率内不断被调用，那就意味着可以不断拍照，不断渲染。可以实现动态切换效果

(6)效果渲染

当执行完上面的代码后，你需要确保调用了carInit这个函数，页面就可以渲染出对应的效果了

说明：

对应的各种参数，当你在学习的时候都都可以进行调整。一遍调整就能看懂参数和最终渲染的效果差异。

当你把fog的颜色调整为跟背景一样的时候，你会发现画面上就类似产生了迷雾效果，让3D背景更加立体

scene.fog = new THREE.Fog(0x333333, 10, 15);

效果如下：

你也可以继续设置网格线条的透明度，让网格线不那么抢眼

grid.material.opacity = 0.3;

效果如下：

是不是整个画面看起来3D立体效果会更强一些，背景看起来更深邃一些。

三、加载外部模型进行渲染

(1)添加轨道控制器

threejs官方给我们提供了一个类，OrbitControls（轨道控制器）可以使得相机围绕目标进行轨道运动。

换句话说，引入了OrbitControls后，我们可以操作鼠标来控制页面上动态效果。

比如：鼠标滚动、鼠标点击、鼠标左右滑动效果。

代码如下：

...省略了 【(5)创建一个渲染器】

/**

 *  (6)开启OrbitControls控件，可以支持鼠标操作图像

 */

controls = new OrbitControls(camera, container);

//你能够将相机向外移动多少（仅适用于PerspectiveCamera），其默认值为Infinity

controls.maxDistance = 9;

//你能够垂直旋转的角度的上限，范围是0到Math.PI，其默认值为Math.PI

controls.maxPolarAngle = THREE.MathUtils.degToRad(90);

controls.target.set(0, 0.5, 0);

controls.update();

加入上面代码后，我们还要继续优化代码

在carInit函数后面在添加一个render函数，用于执行渲染

function initCar(){

  

  /**

 *  (5)创建一个渲染器

 */

  renderer = new THREE.WebGLRenderer({ antialias: true });

  renderer = new THREE.WebGLRenderer({ antialias: true });

  renderer.setPixelRatio(window.devicePixelRatio);

  renderer.setSize(window.innerWidth, window.innerHeight);

  container.appendChild(renderer.domElement);

  //注释掉这句话

  //renderer.render(scene, camera);

  //调用一次render函数进行渲染

  render()

}

function render(){

  renderer.render(scene, camera);

  requestAnimationFrame(render)

}

效果实现如下：

(2)加载汽车模型

既然要加载外部模型，那我们肯定需要通过模型软件来设计对应的模型。本案列不讲解如何设计模型，我使用threejs官方提供的模型来进行展示。

我们常用的模型格式如下：

本案列采用glb格式来加载外部模型。

因为案列中使用glb模型数据采用了Draco来进行压缩，所以我们需要引入DRACOLoader来解析我们的模型

(1)引入DRACOLoader加载模型

/**

*  (7)汽车模型相关的内容

*  DRACOLoader 主要用于解析使用 Draco 压缩的 GLB 模型，而不是所有的 GLB 模型都使用了 Draco 压缩

*/

const dracoLoader = new DRACOLoader();

//配置加载器的位置，这个需要提前下载到项目中

dracoLoader.setDecoderPath('./draco/gltf/');

const loader = new GLTFLoader();

//设置GLTFLoader加载器使用DRACO来解析我们的模型数据

loader.setDRACOLoader(dracoLoader);

并不是所有的模型都需要Draco来进行加载，取决于你的模型在设计导出的时候是否用了Draco来进行压缩。

./draco/gltf/目录下面的文件如下：代码可以从gitee上面下载

(3)加载glb模型数据

当你已经创建了`const loader = new GLTFLoader();这个类实例后，我们就可以加载模型了

/**

 * (8)加载glb模型

*/

loader.load('./models/gltf/ferrari.glb', function (gltf) {

  //获取到模型的数据

  const carModel = gltf.scene.children[0];

  //将模型添加到3D场景中

  scene.add(carModel);

});

render()

加载的效果如下：

模型已经加载成功了，但是你会发现他在整个背景中是黑色的。当然模型本身是有材质贴图的，车身默认是红色的。

之所以产生这个效果那是因为我们现在缺少一个非常重要的元素，那就是光照。

你试想一下，一个物体在没有任何光源的情况下，呈现出来的就是黑色的效果。如果你的场景背景也是黑色，那根本看不到效果。

(4)加载光影效果

我们设置光源的时候主要有两个部分

设置环境光

/**

 * (9)添加光影效果

 */

       

//创建环境光

var ambient = new THREE.AmbientLight("blue");

scene.add(ambient);

环境光的颜色为blue，效果如下：

环境光为blue的情况下，模型表面反射出来的颜色就是蓝色，一般金属材质和玻璃材质反射的效果更佳明显。所以轮毂和车辆挡风玻璃效果会更强烈一些。

设置点光源

/**

 * (9)添加光影效果

*/



//创建环境光

var ambient = new THREE.AmbientLight("blue");

scene.add(ambient);



//创建点光源

var point = new THREE.PointLight("#fff");

//设置点光源位置

point.position.set(0, 300, 0); 

//点光源添加到场景中

scene.add(point); 

效果如下：

此刻我们基本上完成了模型的渲染，环境光蓝色默认替换为黑色，这样车辆立体感会更强一些

//环境光

var ambient = new THREE.AmbientLight("#000");

效果如下：

(5)加载hdr文件设置环境渲染

HDR（High Dynamic Range）文件是一种存储图像高动态范围信息的文件格式。

HDR可以理解成一张真实世界的图片或者设计者想要的灯光效果。

他的作用主要如下：

也就说在本案列中如果我们想要获取更加真实的照明效果，我们可以使用设计师导出的hdr文件。将这个文件作为3D场景（Scene）的环境贴图

/**

 * (2)创建场景对象Scene

 */

scene = new THREE.Scene();

scene.background = new THREE.Color(0x333333);

//通过RGBELoader加载hdr文件，它是一种图像格式，将其用作场景的环境映射或者用来创建基于物理的材质

scene.environment = new 

RGBELoader().load('textures/equirectangular/venice_sunset_1k.hdr');

scene.environment.mapping = THREE.EquirectangularReflectionMapping;

scene.fog = new THREE.Fog(0x333333, 10, 15);

删除我们(9)添加光影效果中我们自己的光影效果

/**

 * (9)添加光影效果

*/



//创建环境光

//var ambient = new THREE.AmbientLight("blue");

//scene.add(ambient);



//创建点光源

//var point = new THREE.PointLight("#fff");

//设置点光源位置

//point.position.set(0, 300, 0); 

//点光源添加到场景中

//scene.add(point); 

这样渲染下来我们物体在场景中显示的会更加自然

不管你用hdr文件来作为环境贴图，还是采用光源设置来设计，我们都可以让模型在3D场景中更方便的显示出来。

四、汽车材质贴图

目前我们已经将模型渲染出来了，但是你会发现不管是车身、轮毂、还是玻璃材质跟我们想要的真实车辆材质是有区别的。比如你希望玻璃透明的、反光的。车身的漆面是可以反光的。模型在设计的时候使用默认材质。我们想要进行材质的替换。

(1)在步骤8中继续优化代码

/**

 * (8)加载glb模型

 * 并设置不同部位的材质。

*/

//物理网格材质(MeshPhysicalMaterial)

//车漆，碳纤，被水打湿的表面的材质需要在面上再增加一个透明的

const bodyMaterial = new THREE.MeshPhysicalMaterial({

  color: 0xff0000, metalness: 1.0, roughness: 0.5, clearcoat: 1.0, clearcoatRoughness: 0.03

});



//汽车轮毂的材质，采用了标准网格材质，threejs解析gltf模型，会用两种材质PBR材质去解析

const detailsMaterial = new THREE.MeshStandardMaterial({

  color: 0xffffff, metalness: 1.0, roughness: 0.5

});



//汽车玻璃的材质

const glassMaterial = new THREE.MeshPhysicalMaterial({

  color: 0xffffff, metalness: 0.25, roughness: 0, transmission: 1.0

});



loader.load('./models/gltf/ferrari.glb', function (gltf) {

  //获取到模型的数据

  const carModel = gltf.scene.children[0];

  //将模型添加到3D场景中

  scene.add(carModel);

});

材质创建了过后，接下来我们就可以将材质加载了到模型中了。

loader.load('./models/gltf/ferrari.glb', function (gltf) {

  //获取到模型的数据

  const carModel = gltf.scene.children[0];



  //获取模型中指定的模块，将默认材质替换为我们自定义材质

  carModel.getObjectByName('body').material = bodyMaterial;

  //轮毂的材质替换

  carModel.getObjectByName('rim_fl').material = detailsMaterial;

  carModel.getObjectByName('rim_fr').material = detailsMaterial;

  carModel.getObjectByName('rim_rr').material = detailsMaterial;

  carModel.getObjectByName('rim_rl').material = detailsMaterial;

  ////座椅的材质

  carModel.getObjectByName('trim').material = detailsMaterial;

  //玻璃的材质替换

  carModel.getObjectByName('glass').material = glassMaterial;



  scene.add(carModel);

});

上面的代码分别是获取模型中车身区域（body），获取轮毂区域（rim_fl、rim_fr、rim_rr、rim_rl）、座椅区域（trim）、玻璃区域（glass）

将我们自己创建的材质拿去替换默认材质实现加载渲染。

效果如下：

替换过后的模型，更有金属质感和玻璃质感。材质对应的颜色你们都可以自己进行替换。

(2)给车底盘添加阴影效果

车底盘是没有阴影效果的，我们可以使用图片来进行模型贴图，让底盘有阴影效果会更加立体。

贴图的图片为png，图片由设计师出的

效果如下：

创建一个材质对象，并使用这张图片作为贴图

loader.load('./models/gltf/ferrari.glb', function (gltf) {

  //获取到模型的数据

  const carModel = gltf.scene.children[0];



  //获取模型中指定的模块，将默认材质替换为我们自定义材质

  carModel.getObjectByName('body').material = bodyMaterial;

  //轮毂的材质替换

  carModel.getObjectByName('rim_fl').material = detailsMaterial;

  carModel.getObjectByName('rim_fr').material = detailsMaterial;

  carModel.getObjectByName('rim_rr').material = detailsMaterial;

  carModel.getObjectByName('rim_rl').material = detailsMaterial;

  //座椅的材质

  carModel.getObjectByName('trim').material = detailsMaterial;

  //玻璃的材质替换

  carModel.getObjectByName('glass').material = glassMaterial;

  

	// shadow阴影效果图片

  const shadow = new THREE.TextureLoader().load( './models/gltf/ferrari_ao.png' );

  // 创建一个材质模型

  const mesh = new THREE.Mesh(

    new THREE.PlaneGeometry(0.655 * 4, 1.3 * 4),

    new THREE.MeshBasicMaterial({

      map: shadow, blending: THREE.MultiplyBlending, toneMapped: false, transparent: true

    })

  );

  mesh.rotation.x = - Math.PI / 2;

  mesh.renderOrder = 2;

  carModel.add(mesh);



  scene.add(carModel);

});

效果如下：

通过效果图能看出，车辆底部是有阴影效果的，让整个3D效果渲染更加立体。

五、设置动画效果

(1)获取轮毂的材质对象

轮毂和网格地板我们都要动画加载

网格需要进行平移，按照z的反方向进行移动。

轮毂需要按照x轴的方向进行旋转

代码如下：

let wheels = []

function initCar(){

  loader.load('./models/gltf/ferrari.glb', function (gltf) {

    //获取到模型的数据

    const carModel = gltf.scene.children[0];



    ...省略代码

    //将车轮的模块保存到数组中，后面可以设置动画效果

    wheels.push(

      carModel.getObjectByName('wheel_fl'),

      carModel.getObjectByName('wheel_fr'),

      carModel.getObjectByName('wheel_rl'),

      carModel.getObjectByName('wheel_rr')

    );

		

    scene.add(carModel);

  });

}

上面的代码将轮毂模块获取到过后，放入到wheels数组中。

(2)设置轮毂的动画效果

接下来在render函数中进行动画控制

function render() {

  controls.update();

  //performance.now()是一个用于测量代码执行时间的方法。它返回一个高精度的时间戳，表示自页面加载以来的毫秒数

  const time = - performance.now() / 1000;

  //控制车轮的动画效果

  for (let i = 0; i < wheels.length; i++) {

    wheels[i].rotation.x = time * Math.PI * 2;

  }

  //控制网格的z轴移动

  grid.position.z = - (time) % 1;



  renderer.render(scene, camera);

  requestAnimationFrame(render)

}

通过上面的代码我们已经能够实现轮毂和网格的动画效果了

六、切换颜色

实现颜色切换就必须绑定js的事件。

三个按钮，我们都绑定点击事件，并获取对应的颜色

function initCar(){

  ...省略代码

  /**

 		* (10)切换车身颜色

		* 获取到指定的按钮，得到你选中的颜色，并将颜色设置给我们自己的模型对象

		*/

  const bodyColorInput = document.getElementById('body-color');

  bodyColorInput.addEventListener('input', function () {

    bodyMaterial.color.set(this.value);

  });



  const detailsColorInput = document.getElementById('details-color');

  detailsColorInput.addEventListener('input', function () {

    detailsMaterial.color.set(this.value);

  });



  const glassColorInput = document.getElementById('glass-color');

  glassColorInput.addEventListener('input', function () {

    glassMaterial.color.set(this.value);

  });

}

当我们将上面的代码实现后，切换颜色就完成分了。

只要修改bodyMaterial材质对象的颜色，页面刷新的时候就可以应用成功。

课程小结

背景

今天逛掘金，发现了一个有意思的web view效果，想着Android能不能实现一下捏。

原文链接：juejin.cn/post/724435…

具体实现分析请看上文原文链接，那我们开始吧！

容器

val space = 10f //上下半间隔

val bgBorderR = 10f //背景圆角

//上半部分

val upperHalfBottom = height.toFloat() / 2 - space / 2

canvas.drawRoundRect(

    0f,

    0f,

    width.toFloat(),

    upperHalfBottom,

    bgBorderR,

    bgBorderR,

    bgPaint

)

//下半部分

val lowerHalfTop = height.toFloat() / 2 + space / 2

canvas.drawRoundRect(

    0f,

    lowerHalfTop,

    width.toFloat(),

    height.toFloat(),

    bgBorderR,

    bgBorderR,

    bgPaint

)

绘制数字

我们首先居中绘制数字4

val number4 = "4"

textPaint.getTextBounds(number4, 0, number4.length, textBounds)

//居中显示

val x = (width - textBounds.width()) / 2f - textBounds.left

val y = (height + textBounds.height()) / 2f - textBounds.bottom

canvas.drawText(number4, x, y, textPaint)

接下来我们将数字切分为上下两部分，分别绘制。

val number4 = "4"

textPaint.getTextBounds(number4, 0, number4.length, textBounds)

val x = (width - textBounds.width()) / 2f - textBounds.left

val y = (height + textBounds.height()) / 2f - textBounds.bottom

// 上半部分裁剪

canvas.save()

canvas.clipRect(

    0f,

    0f,

    width.toFloat(),

    upperHalfBottom

)

canvas.drawText(number4, x, y, textPaint)

canvas.restore()

// 下半部分裁剪

canvas.save()

canvas.clipRect(

    0f,

    lowerHalfTop,

    width.toFloat(),

    height.toFloat()

)

canvas.drawText(number4, x, y, textPaint)

canvas.restore()

翻转卡片

如何实现让其旋转呢？
而且还得是3d的效果了。我们选择Camera来实现。
我们先让数字'4'旋转起来。

准备工作，通过属性动画来改变旋转的角度。

private var degree = 0f //翻转角度

private val camera = Camera()

private var flipping = false //是否处于翻转状态

...

//动画

val animator = ValueAnimator.ofFloat(0f, 360f)

animator.addUpdateListener { animation ->

    val animatedValue = animation.animatedValue as Float

    setDegree(animatedValue)

}

animator.doOnStart {

    flipping = true 

}

animator.doOnEnd {

    flipping = false

}

animator.duration = 1000

animator.interpolator = LinearInterpolator()

animator.start()

...



private fun setDegree(degree: Float) {

    this.degree = degree

    invalidate()

}

让数字'4'旋转起来：

  override fun onDraw(canvas: Canvas) {

      super.onDraw(canvas)

      // 居中绘制数字4

      val number4 = "4"

      textPaint.getTextBounds(number4, 0, number4.length, textBounds)

      val x = (width - textBounds.width()) / 2f - textBounds.left

      val y = (height + textBounds.height()) / 2f - textBounds.bottom



      if (!flipping) {

          canvas.drawText(number4, x, y, textPaint)

      } else {

          camera.save()

          canvas.translate(width / 2f, height / 2f)

          camera.rotateX(-degree)

          camera.applyToCanvas(canvas)

          canvas.translate(-width / 2f, -height / 2f)

          camera.restore()

          canvas.drawText(number4, x, y, textPaint)

      }

  }

我们再来看一边效果图：
我们希望将卡片旋转180度，并且0度-90度由上半部分完成，90度-180度由下半部分完成。

我们调整一下代码，先处理一下上半部分:

...

val animator = ValueAnimator.ofFloat(0f, 180f)

...

override fun onDraw(canvas: Canvas) {

    super.onDraw(canvas)

    val space = 10f //上下半间隔

    //上半部分

    val upperHalfBottom = height.toFloat() / 2 - space / 2

    ...

    // 居中绘制数字4

    val number4 = "4"

    textPaint.getTextBounds(number4, 0, number4.length, textBounds)

    val x = (width - textBounds.width()) / 2f - textBounds.left

    val y = (height + textBounds.height()) / 2f - textBounds.bottom

    

    if (!flipping) {

        //上半部分裁剪

        canvas.save()

        canvas.clipRect(

            0f,

            0f,

            width.toFloat(),

            upperHalfBottom

        )

        canvas.drawText(number4, x, y, textPaint)

        canvas.restore()

    } else {

        if (degree < 90) {

            //上半部分裁剪

            canvas.save()

            canvas.clipRect(

                0f,

                0f,

                width.toFloat(),

                upperHalfBottom

            )

            camera.save()

            canvas.translate(width / 2f, height / 2f)

            camera.rotateX(-degree)

            camera.applyToCanvas(canvas)

            canvas.translate(-width / 2f, -height / 2f)

            camera.restore()

            canvas.drawText(number4, x, y, textPaint)

            canvas.restore()

        }

    }

}

效果如下：

接下来我们再来看一下下半部分：

override fun onDraw(canvas: Canvas) {

    super.onDraw(canvas)

    val space = 10f //上下半间隔

    //下半部分

    val lowerHalfTop = height.toFloat() / 2 + space / 2



    // 居中绘制数字4

    val number4 = "4"

    textPaint.getTextBounds(number4, 0, number4.length, textBounds)

    val x = (width - textBounds.width()) / 2f - textBounds.left

    val y = (height + textBounds.height()) / 2f - textBounds.bottom



    if (!flipping) {

        // 下半部分裁剪

        canvas.save()

        canvas.clipRect(

            0f,

            lowerHalfTop,

            width.toFloat(),

            height.toFloat()

        )

        canvas.drawText(number4, x, y, textPaint)

        canvas.restore()

    } else {

        if (degree > 90) {

            canvas.save()

            canvas.clipRect(

                0f,

                lowerHalfTop,

                width.toFloat(),

                height.toFloat()

            )

            camera.save()

            canvas.translate(width / 2f, height / 2f)

            val bottomDegree = 180 - degree

            camera.rotateX(bottomDegree)

            camera.applyToCanvas(canvas)

            canvas.translate(-width / 2f, -height / 2f)

            camera.restore()

            canvas.drawText(number4, x, y, textPaint)

            canvas.restore()

        }

    }

}

那我们将上下部分结合起来,效果如下：

数字变化

好！我们完成了翻转部分，现在需要在翻转的过程中将数字改变：

我们还是举例说明：数字由'4'变为'5'的情况。我们思考个问题，什么时候需要改变数字？

上半部分在翻转开始的时候，上半部分底部显示的数字就应该由'4'变为'5'，但是旋转的部分还是应该为'4'，
下半部分开始旋转的时候底部显示的数字还是应该为'4',而旋转的部分该为'5'。

canvas.save()

canvas.clipRect(

    0f,

    0f,

    width.toFloat(),

    upperHalfBottom

)

canvas.drawText(number5, x, y, textPaint)

canvas.restore()

// 下半部分裁剪

canvas.save()

canvas.clipRect(

    0f,

    lowerHalfTop,

    width.toFloat(),

    height.toFloat()

)

canvas.drawText(number4, x, y, textPaint)

canvas.restore()

//=====⬆️=====上述的代码显示的上下底部显示的内容，即上半部分地步显示5，下半部分显示4

if (degree < 90) {

    //上半部分裁剪

    canvas.save()

    canvas.clipRect(

        0f,

        0f,

        width.toFloat(),

        upperHalfBottom

    )

    camera.save()

    canvas.translate(width / 2f, height / 2f)

    camera.rotateX(-degree)

    camera.applyToCanvas(canvas)

    canvas.translate(-width / 2f, -height / 2f)

    camera.restore()

    canvas.drawText(number4, x, y, textPaint)

    canvas.restore()

    //=====⬆️=====上述的代码表示上半部分旋转显示的内容，即数字4

} else {

    canvas.save()

    canvas.clipRect(

        0f,

        lowerHalfTop,

        width.toFloat(),

        height.toFloat()

    )

    camera.save()

    canvas.translate(width / 2f, height / 2f)

    val bottomDegree = 180 - degree

    camera.rotateX(bottomDegree)

    camera.applyToCanvas(canvas)

    canvas.translate(-width / 2f, -height / 2f)

    camera.restore()

    canvas.drawText(number5, x, y, textPaint)

    canvas.restore()

    //=====⬆️=====上述的代码表示下半部分旋转显示的内容，即数字5

}

效果图如下：大伙可以在去理一下上面数字的变化的逻辑。

最后我们加上背景再看一下效果：

小结

上述代码仅仅提供个思路，仅为测试code，正式代码可不能这么写哦 >..<

Android 15 可能最终修复了底部黑色导航栏问题

长期以来, Android 系统一直存在一个问题: 手势栏/药丸/三键导航下面有一个可笑的黑条. 我曾找过相关的截图, 但要么截图太旧, 要么截图不清晰. 因为我一直在使用各种方法来隐藏它.

这就是手势栏, 它并不那么碍事. Android 系统也有三键导航功能, 如果你打开它, 黑条就会变得非常大.

这是因为在早期的 Android 系统中, 屏幕上的导航按钮是用来取代实体按键的. 但老实说, 由于屏幕与静态按键不同, 效果并不理想. 这感觉更像是一个噱头. 当他们最终推出允许用户在'沉浸模式'下隐藏按键的 API 时, 我真的很不喜欢, 因为这意味着你必须做这个愚蠢的轻扫手势才能按到按键.

总之, 随着屏幕边框越来越小, 我们需要更大的显示屏, 屏幕底部的黑条开始变得有些碍眼和不必要. 最初, 在定制的 Roms 中, 有一种叫做"派控制 器"(Pie Controll)的东西. 那是一段美好时光. 你只需在屏幕边缘轻扫, 就会跳出一堆按钮. 虽然我用得不多, 因为我的手机大多是电容按键.

我确实改用了手势导航, 也正是从那时起, 我才真正开始讨厌黑条. 因为它看起来太多余了. iOS 系统没有黑条, 而 iPhone 却运行得非常好. 所以这些年来我一直在尝试禁用这个黑条. 最初, 我使用的是 Xposed 模块. 后来, 我用了带电容按键的手机, 这样我就再也不用看到这个栏了. 这样做的好处是, Android 系统不会在你轻扫之前隐藏按钮.

后来, 我发现了一款名为"流体导航手势"(Fluid Navigation Gestures)的应用, 它曾在一段时间内起过作用. 但我目前的解决方案是只使用 iOS, 因为 Android 手机现在太难root了.

但据 Android Authority 报道, 这个问题可能最终会消失.

有鉴于此, 当我翻阅 Android 14 QPR2 Beta 3 时, 我发现了一个名为 EDGE_TO_EDGE_BY_DEFAULT的新应用兼容性更改, 其描述如下: "如果目标 SDK 为 VANILLA_ICE_CREAM或更高版本, 则应用默认为Edge-to-Edge. Vanilla Ice Cream恰好是 Android 15 的内部甜点名称, 这意味着这一兼容性变更将适用于以今年即将发布的版本为目标的应用. 鉴于Google每年都会强制开发者更新他们的应用, 以适应更新的 API 级别, 因此 Play Store 上的大多数应用都会以 Android 15 为目标, 这只是时间问题. 除非Google再次修改政策, 否则新应用和应用更新将被迫以 Android 15 为目标的截止日期将是 2025 年 8 月 31 日.

我不确定Google是否强迫你每年更新应用. 我不认为他们会这样做, 因为 Google Play 上有一些非常老旧的应用, 我敢肯定它们已经不再被维护了. 现在, 如果你不按照新规定更新应用, 他们可以把你的应用踢出去, 但并没有那么多规定. 我想作者的意思是, 当你更新应用时, 你必须使用最新的 SDK, 也就是香草冰淇淋的 SDK, 很可能是 SDK 35 级.

总之, Edge-to-Edge模式是一种允许应用在整个屏幕上绘图的方式. 目前, 默认情况下 Android 应用无法在状态栏和导航栏上绘图. 除此之外, 状态栏和导航栏还会变成半透明状态, 这意味着你可以看到它们下方的内容.

现在, 无论出于何种原因, 有些人并不喜欢这一变化. 可能是因为这意味着内容被手势区域或按钮遮住了. 是的, 这种情况偶尔会发生. 我最近就遇到了这种情况.

正如你在上面的片段中看到的, 在过渡到放大视图时, 页面指示器的位置太低了. 在 iOS 上使用手势导航时问题不大, 但在使用三键导航时就会出现问题. 虽然在这个特定的例子中, 页面指示器不是可点击的, 所以问题不大.

但 iOS 这样做已经有很长一段时间了, 好像自己 iPhone X 就这样了. 他们有一个非常简单的方法来实现这一功能, 叫做安全区域 API. 我不太清楚它在本地是如何实现的, 但在 Flutter 中却很容易实现. 你只需使用 SafeArea() 对象或调用 MediaQuery.of(context).padding. 尽管 MediaQuery 有 3 个 padding 值. 这有点令人困惑.

总之, 我的所有应用都使用了专门的代码, 以确保 Android 应用从 Edge-to-Edge 显示. 这是因为我希望 iOS 和 Android 版本看起来一样. 此外, 我也更喜欢'Edge-to-Edge'的外观.

await SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

SystemChrome.setSystemUIOverlayStyle(

  const SystemUiOverlayStyle(

    systemNavigationBarColor: Colors.transparent,

    statusBarColor: Colors.transparent,

  ),

);

这也使得状态栏和导航栏完全透明, 而不仅仅是半透明. 不过有一个小问题: 你必须确保状态栏图标的颜色正确, 否则它们将无法显示. 实际上, 这有点困难, 因为你必须根据你所处的屏幕来改变它们的颜色, 但这并不难.

要在 Flutter 中实现这一点, 你必须将Scaffold包裹在AnnotatedRegion<SystemUiOverlayStyle>中, 其值就是此函数的结果:

SystemUiOverlayStyle makeUiOverlayStyle(bool whiteIcons) {

  return SystemUiOverlayStyle(

    statusBarBrightness: whiteIcons ? Brightness.dark : Brightness.light,

    statusBarIconBrightness: whiteIcons ? Brightness.light : Brightness.dark,

  );

}

就是这样. 改变并不难, 我很高兴 Google 终于做到了. 俗话说, 迟到总比不到好.

虽然有些人认为这种改变还不够. 他们希望取消手势"提示". 这样, 你在使用手势时就不会看到屏幕底部的白条了. 要知道, 早在root很容易的时候, 我就在我的 Android 手机上这样做了. 以及最近的流畅导航手势(Fluid Navigation Gestures). 它是一种更简约的UI, 但我不认为它能给用户体验带来多少好处. 我认为强制应用采用 'Edge-to-Edge' 的设计已经足够好了.

前言

什么是安全区域？

自从苹果推出了惊艳的iPhone X，智能手机界就正式步入了全面屏的新纪元。然而，这一革新也带来了一个特别的问题——那就是屏幕顶部的“刘海”和底部的“黑条”区域。这些区域犹如手机的“神秘面纱”，遮挡了一部分屏幕，给开发者带来了新的挑战。

Android似乎对iPhone的设计情有独钟，纷纷效仿这种全面屏的潮流。于是，越来越多的Android手机也开始有了这个安全区域的概念。

在这个背景下，移动端安全区域适配变得尤为重要。开发者们需要巧妙地调整应用的布局和界面，确保内容不会被这些特殊区域遮挡，同时保持应用的美观和易用性。

安全区域(safe area)

安全区域定义为视图中未被导航栏、选项卡栏、工具栏或视图控制器可能提供的其他视图覆盖的区域。

如上图所示，安全区域为中间蓝色部分，也就是说我们在页面布局时应该保证页面内容在蓝色安全区域内。

所以对于这类机型，你如果不特殊处理，那么它将会是这样的：

这样就会导致底部输入框的交互受影响

网页布局方式(viewport-fit)

在处理安全区域之前，我们需要先来了解viewport-fit属性，这是解决问题的关键。

iOS带来问题的同时也带来了解决问题的方法，为了适配 iPhoneX等全面屏机型 对现有 viewport meta 标签进行了扩展，用于设置视觉视口的大小来控制裁剪区域。

用法

<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=0, viewport-fit=cover">

属性值

该属性包含三个值：

• auto：该值不会影响初始布局视口，并且整个网页都是可见的。 UA 在视口之外绘制的内容是未定义的。它可以是画布的背景颜色，或者 UA 认为合适的任何其他颜色。（默认值，与contain表现一致）


• contain：初始布局视口和视觉视口设置为设备显示屏中内接的最大矩形。 UA 在视口之外绘制的内容是未定义的。它可以是画布的背景颜色，或者 UA 认为合适的任何其他颜色。


• cover：初始布局视口和视觉视口设置为设备物理屏幕的外接矩形。

区别

在非矩形显示器上（比如手表）设置视口边界框的大小时，我们必须考虑以下因素：

• 由于视口边界框的面积大于显示器的面积而导致的剪切区域


• 视口边界框与显示区域之间的间隙

contain

当使用viewport-fit: contain时，初始视口将应用于显示器的最大内接矩形。

cover

当使用viewport-fit: cover时，初始视口将应用于显示器的外接矩形。

env

为了解决安全区域问题，iOS 11 新增了一个新的 CSS 函数env()和四个预定义的环境变量

• safe-area-inset-left：安全区域距离左边边界距离


• safe-area-inset-right：安全区域距离右边边界距离


• safe-area-inset-top：安全区域距离顶部边界距离


• safe-area-inset-bottom：安全区域距离底部边界距离

iOS 11 中提供的 env() 函数名为 constant()。从 Safari 技术预览版 41 和 iOS 11.2 beta 开始，constant() 已被删除并替换为 env()。如有必要，您可以使用 CSS 后备机制来支持这两个版本，但以后应该更喜欢使用 env()。 —— 来自webkit文档

上面的意思是从iOS12开始不再支持使用constant函数，所以为了兼容处理，我们应该这样写：

body {

  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */

  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

}

使用该函数的前提是必须设置meta标签viewport-fit=cover ，并且对于不支持 env() 的浏览器，浏览器将会忽略它。

适配安全区域

第一步：

修改页面布局方式

<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=0, viewport-fit=cover">

第二步：

底部适配

.keyboard_foot {

    padding-bottom: constant(safe-area-inset-bottom);

    padding-bottom: env(safe-area-inset-bottom);

}

这样安全区域问题就解决了！

《前端暴走团》，喜欢请抱走~大家好，我是团长林语冰。

当当当当~惊不惊喜，意不意外，相信大家已经注意到 Node 官网的偷偷变帅了！

Node 最近可谓意气风发，不仅重新设计了新官网，还有新设计的吉祥物助阵。

今天，让我们一起来深度学习 Node 官方博客，携手 Node 团队一起回顾重新设计官网的这段旅程。

免责声明

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 Diving int0 the Node.js Website Redesign。

规模和限制

Node 官方网站诞生已经超过 14 岁了。下载和文档主页的设计首次在 2011 年底崭露头角。这是 Node 0.6 的陈年旧事。

从那时起，Node 官网的规模随着项目需要与日俱增，包含了 1600 多页。在巅峰时期，它拥有大约 20 种国际化语言。Node 的域名（nodejs.org）每月处理 30 亿个请求，传输的数据量为 2 千兆字节。

错误的尝试

Node 官网首次尝试重新设计于 2019 年开始。工作从新的域名（nodejs.dev）和新存储库起步。蓦然回首，这可能从一开始就冥冥之中注定了该项目的失败。

简而言之，这个代码库不是社区或贡献者的常驻之地，也不存在已建立的贡献者工作流程。为生活奔走忙碌的人们自愿贡奉献自己的时间，但并不想学习第二套工具。该项目无法维持蒸蒸日上所需的领导力。

一边开飞机，一边修飞机

2022 年，团队回归现有的存储库，考虑如何重建站点。Node 的旧版代码库开始在各个维度上显示出它的老龄化。Node 旧版官网的设计已经 out 了。Node 旧版网站的内部结构很难扩展，而且文档也很少。

Node 团队仔细考虑了技术堆栈。正在进行的重新设计的第一阶段涉及 nextra，这是一个优秀的 Next 静态站点生成器。但随着网站的发展，我们发现自己经常“打破” nextra 的惯例，依赖于 nextra 抽象的底层 Next 模式和强大工具。

Next 是一个自然选择的进化过程，以其灵活性和强大功能而赫赫有名。举个栗子，Node 新网站仍然是为了终端用户速度和基础托管独立性而静态构建的，但利用 Next 的增量静态重新生成，来获取版本发布等动态内容。

我们与 Vercel 强强联手。当 Node 新官网的规模在静态导出时使 webpack 的内存管理紧张时，它们提供了直接支持。我们在公开发布之前对新版本进行了 Beta 测试，这是该框架的真实压力测试。

2023 年 4 月，我们进行了一次小型切换。拉取请求有 1600 个文件，将 GitHub UI 推向了渲染能力的极限。Node 新官网的基建会发生变化，但外观、内容和创作体验将保持不变。

这是一个重要的里程碑 —— 证明我们可以一边开飞机、一边修飞机。

重新设计

OpenJS 基金会慷慨解囊，全力资助 Node 团队与设计师一起进行重新设计。

设计师为 Node 新官网带来了现代化设计，其中包括用户体验流程、暗/亮模式、页面布局、移动视口注意事项和组件细分。

接下来是将设计实现为代码，重点放在基础设计元素和结构化组件层次结构的顺序构建上。我们从第一天起就构建了组件的变体，并从一开始就考虑了国际化。我们选择使用 Tailwind CSS，但重点是设计令牌和应用 CSS。

Orama 搜索将网站的所有内容让用户触手可及。它们对我们的静态内容进行索引，并以闪电般的速度提供 API 内容、学习材料、博客文章等结果。很难想象如果没有这个强大的搜索功能，Node 爱好者该如何方便的查阅文档。

Node 旧版官网已经国际化为近 20 种语言。虽然但是，一系列不幸的事件导致我们重置了所有翻译。

我们利用 Sentry 提供错误报告、监控和诊断工具。这对于识别问题和为我们的用户提供更好的体验大有助益。

Vercel 和 Cloudflare 支持可确保网站快速可靠。我们还通过 GitHub Actions 投资了 CI/CD 管道，为贡献者提供实时反馈。这包括使用 Chromatic、Lighthouse 结果进行视觉回归测试，确保网站质量保持较高水平。

庆典开源日和黑客啤酒节

重新设计工作与 2023 年 9 月的庆典开源日以及下个月的黑客啤酒节不谋而合。我们通过将“良好的第一个 issue”作为离散的开发任务来为这些事件做好准备。就庆典开源日而言，我们还提供了现场指导，以便与会者能够以落地公关结束这一天。

仅在庆典开源日期间，就有 28 位作者提出了 40 个 PR（拉取请求）。黑客啤酒节又收到了 26 个 PR。

文档

开源项目的好坏取决于它的文档。在此过程中，我们迭代或引入了：

• 合作者指南


• 贡献


• README（自述文件）


• 翻译


• ......

新代码非常注重内联代码和配置注释、关注点分离，以及明确定义的常量。整个过程中使用 TS 可以辅助贡献者理解数据的形状和函数的预期行为。

未来规划

本次重新设计为 Node 官网的新时代奠定了基础。但工作还有待完成：

• 将网站重新设计扩展到 API 文档。它们位于单独的代码库中，但计划将此处开发的样式移植到 API。


• 探索网站和 API 文档的 monorepo（多库开发）。这应该可以改善重要的耦合，并减少管理两个独立代码库的开销。


• 重新调整国际化努力。先前的翻译无法延续。我们的重量级 Markdown/MDX 方案提出了一个独特的挑战，我们正在与 Crowdin 合作解决。


• 持续改进 CI/CD 流程。

致谢

许多人和组织为实现重新设计做出了大大小小的贡献。我们要感谢：

• 首先也是最重要的是所有使这个项目成为可能的贡献者和合作者。


• Chromatic 提供视觉测试平台，辅助我们审查 UI 更改，并捕获视觉回归。


• Cloudflare 用于提供为 Node 网站、Node 的 CDN 等提供服务的基建。


• Crowdin 提供了一个平台，使我们能够国际化 Node 官网并与译者合作。


• Orama 提供了一个搜索平台，可以为我们的内容建立索引，并提供闪电般快速的结果。


• Sentry 为其错误报告、监控和诊断工具提供开源许可证。


• Vercel 提供为 Node 网站提供服务和支持的基建


• 最后，感谢 OpenJS 基金会的支持和指导。

本期话题是 —— 你觉得 Node 的新官网颜值如何、体验如何？欢迎在本文下方自由言论，文明共享。

坚持阅读，自律打卡，每天一次，进步一点。

1、背景

1.2 业务重组与合并

随着需求不断迭代，转转消费分期整体出现了一些调整，并提出了新的产品方向，在此背景下，对于经历了久经沧桑的历史服务，已经逐渐不适合未来的产品规划。面对新的业务整合和重组，急需新的架构和思想来承载未来的业务。

1.2 解决技术债务

现阶段存在的主要问题：

1.3 影响开发效率

即使我们接手项目已经有一段时间，并对项目足够了解时，但排查问题起来依然费力费时，而且系统内部代码错综复杂，调用链路交错，难以正常维护，从长远的开发效率考虑，尽快提出新型方案来代替现有结构。

1.4 监控体系不够完善

线上异常机制不够敏感，缺少关键业务指标的告警看板，作为一个业务开发，应保持对核心指标数据的敏感性。

2、重构目标

3、设计

3.1 调研

开始重构之前，调研了互联网消金通用的架构解决方案：

由于是外部调研的通用架构设计，所以并非完全契合转转消费分期产品，但可以借鉴其分层架构设计的思想，在代码设计阶段，可以先对核心模块进行拆解和规划。

3.2 规划

前端页面与后端重构计划分两次迭代进行，分阶段进行，可以有效分摊并降低项目上线风险，第一次迭代围绕后端主要模块进行剥离重新设计并上线；第二次重构目的是解决产品需求，对接前端新页面。

3.3 修缮者模式

作为一个一线的业务开发，需要开展重构工作的同时还得保证产品需求的正常迭代，修缮者模式无疑是最佳选择。
第一次迭代历程，对于历史工程边缘逻辑保留并隔离，只对核心代码进行重构后转移到到新工程，新工程逐步接手老旧逻辑，并对老工程提供RPC接口，逐渐取代。此方案整体风险最低，同时能兼顾到正常的需求迭代。

第二次迭代历程，经历了第一次迭代后，新系统运行稳定，同时也具备接手新产品的能力，新工程开始与前端对接、联调，在此之后，V2版本也正式上线。

3.4 领域设计（横向拆分）

3.5 模块设计（纵向拆分）

基于以往项目存在的问题，再结合消费分期的特点，我们对分期购买到账单还款结清的整个流程进行拆解：用户主动填写申请信息，提交授信申请并获额，挑选商品分期下单，生成还款计划，提供绑卡、账单还款等功能。以上就是一个简单的分期购物流程，基于以上流程，我们把消费分期所包含的公共模块，如授信前获额、用信、账单还款，这些富有金融服务属性的功能进行剥离。消费分期作为转转的产品原型，在聚合层中各自维护，互不影响。

设计原则：在不改变原有代码逻辑的情况下，根据单一职责和依赖倒置原则的思想：对系统进行模块拆分与合并，以明确项目职责降低耦合度；对包进行重新规划，划分包与包之间的边界，进一步减少代码间的耦合。

3.6 代码设计

好的代码重构一定离不开设计模式，基于原有单一的策略模式，我们把合作方对接模块与基础服务模块进行了拆解，采用双层模板、策略、工厂模式的组合，分别对授信、用信、贷后几个模块单独设计接口，维护好对合作方通用标准API接口，同时具备灵活接入的特点，举个例子，以下为授信模块主要代码类图：

第一层作为基础服务的策略模式；

第二层作为合作方对接的策略模式。

主要类图设计：

在定义接口与实现类后，形成了对合作方对接层依赖，同时对订单、用信、授信等核心数据进行落地，对消费分期提供数据支撑，举个例子，以下为授信模块主要代码：

/**

 * 授信接口定义

 **/

public interface ICreditService {



    /**

     * appId，资方定义的一个唯一ID

     */

    String getAppId();



    /**

     * app名称

     *

     * @return zz or zlj

     */

    String getAppName();



     /**

     * 获取授信结果

     *

     * @return result

     */

    CreditResult creditResult(String logStr, Long uid);

}

2. 标准流程抽象

老规矩:先上最终效果图

做前端的同学在平常的工作中，很多时候都会接触到各种指示器，这次我就接到一个等级指示器的需求：

RecyclerView横向滚动，item之间有分割线，中间的item会被放大，边上的item会有一定的透明度进行淡化，滚动时要将等级变更回调给外界进行处理，停止滚动后被选中的item需要居中。

效果图如下：

实现流程

初始化基本的RecyclerView

在LevelRecyclerView初始化时设置一个横向的LinearLayoutManager

    init {

        layoutManager = LinearLayoutManager(context, HORIZONTAL, false)

    }

设置基本的数据源与adapter

    private fun initRecycler() {

        val list = mutableListOf<Int>()

        list.add(R.drawable.icon_vip_level_0)

        list.add(R.drawable.icon_vip_level_1)

        list.add(R.drawable.icon_vip_level_2)

        list.add(R.drawable.icon_vip_level_3)

        list.add(R.drawable.icon_vip_level_4)

        list.add(R.drawable.icon_vip_level_5)

        list.add(R.drawable.icon_vip_level_6)

        list.add(R.drawable.icon_vip_level_7)

        list.add(R.drawable.icon_vip_level_8)

        list.add(R.drawable.icon_vip_level_9)

        list.add(R.drawable.icon_vip_level_10)



        rv_level.adapter = object : CommonAdapter<Int>(this, R.layout.level_item, list) {

            override fun convert(holder: ViewHolder, t: Int, position: Int) {

                holder.setImageResource(R.id.iv_image, t)

                holder.setOnClickListener(R.id.iv_image) {

                    rv_level.smoothScrollToPosition(position)

                }

            }

        }

    }

效果图：

给每个item添加分割线

创建一个LevelDividerItemDecoration类继承ItemDecoration,构造参数需要传入分割线的水平长度与高度，分割线的颜色为可选参数,重写getItemOffsets与onDraw方法，熟悉ItemDecoration的同学可能会觉得onDraw方法有点眼熟，因为我这个onDraw是在DividerItemDecoration上修改的

class LevelDividerItemDecoration @JvmOverloads constructor(

    private val itemDividerHorizontalMargin : Int,

    private val dividerHeight : Int,

    dividerColor : Int = Color.parseColor("#3A3A3C")

) : ItemDecoration() {



    //分割线Drawable

    private val mDivider = ColorDrawable(dividerColor)

    //分割线绘制区域

    private val mBounds = Rect()



    /**

     * 计算item的分割线需要的尺寸，就是一个偏移量，可简单看成外边距

     */

    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {

        //上下不需要分割线设置为0，左右则是将构造时传入的itemDividerHorizontalMargin设置进去

        outRect.set(itemDividerHorizontalMargin, 0, itemDividerHorizontalMargin, 0)

    }



    /**

     * 绘制分割线

     */

    override fun onDraw(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State) {

        super.onDraw(canvas, parent, state)



        canvas.save()

        val top = (parent.height - dividerHeight) / 2

        val bottom = top + dividerHeight

        if (parent.clipToPadding) {

            canvas.clipRect(parent.paddingLeft, top, parent.width - parent.paddingRight, bottom)

        }



        val childCount = parent.childCount

        for (i in 0 until childCount) {

            val item = parent.getChildAt(i)

            //获取item的Rect，包含它的外边距(包含上面设置进去的偏移量)

            parent.layoutManager!!.getDecoratedBoundsWithMargins(item, mBounds)



            //左边分割线

            mDivider.setBounds(mBounds.left, top, mBounds.left + itemDividerHorizontalMargin, bottom)

            mDivider.draw(canvas)



            //右边分割线

            mDivider.setBounds(mBounds.right - itemDividerHorizontalMargin, top, mBounds.right, bottom)

            mDivider.draw(canvas)

        }

        canvas.restore()

    }

}

在init中添加到LevelRecyclerView

addItemDecoration(LevelDividerItemDecoration(

    UIUtil.dip2px(context, 16.0),

    UIUtil.dip2px(context, 4.0)))

效果图：

这时候RecyclerView可以随意滚动，给它添加一个PagerSnapHelper，让RecyclerView停下来时，item可以自动居中

添加一个PagerSnapHelper

在内部添加一个PagerSnapHelper，并在init时设置依附于LevelRecyclerView

private val mSnapHelper = PagerSnapHelper()

init {

    mSnapHelper.attachToRecyclerView(this)

    layoutManager = mLayoutManager

}

效果图：

这时又发现首尾的item，由于滚不到RecyclerView的中间，无法被选中，于是优化LevelDividerItemDecoration的计算与绘制,调整首尾item的分割线长度，使它们可以滚动到RecyclerView的中间

优化LevelDividerItemDecoration的计算与绘制

class LevelDividerItemDecoration @JvmOverloads constructor(

    private val itemDividerHorizontalMargin : Int,

    private val dividerHeight : Int,

    dividerColor : Int = Color.parseColor("#3A3A3C")

) : ItemDecoration() {



    //分割线Drawable

    private val mDivider = ColorDrawable(dividerColor)

    //分割线绘制区域

    private val mBounds = Rect()



    /**

     * 计算item的分割线需要的尺寸，就是一个偏移量，可简单看成外边距

     */

    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {

        val parentWidth = parent.measuredWidth

        val itemWidth = view.layoutParams.width

        val lastPosition = parent.adapter?.itemCount?.minus(1) ?: 0

        //针对首尾两个item计算它们的左右边距，用parentWidth - itemWidth再除2，可以使item刚好到达RecyclerView的中间

        when (parent.getChildAdapterPosition(view)) {

            0 -> {

                outRect.set(((parentWidth - itemWidth) * 0.5).toInt(), 0, itemDividerHorizontalMargin, 0)

            }

            lastPosition -> {

                outRect.set(itemDividerHorizontalMargin, 0, ((parentWidth - itemWidth) * 0.5).toInt(), 0)

            }

            else -> outRect.set(itemDividerHorizontalMargin, 0, itemDividerHorizontalMargin, 0)

        }

    }



    /**

     * 绘制分割线

     */

    override fun onDraw(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State) {

        super.onDraw(canvas, parent, state)



        canvas.save()

        val top = (parent.height - dividerHeight) / 2

        val bottom = top + dividerHeight

        if (parent.clipToPadding) {

            canvas.clipRect(parent.paddingLeft, top, parent.width - parent.paddingRight, bottom)

        }



        //RecyclerView宽度

        val parentWidth = parent.measuredWidth

        val childCount = parent.childCount

        for (i in 0 until childCount) {

            val item = parent.getChildAt(i)

            //item宽度

            val itemWidth = item.measuredWidth

            //获取item的Rect，包含它的外边距(包含上面设置进去的偏移量)

            parent.layoutManager!!.getDecoratedBoundsWithMargins(item, mBounds)



            //左边分割线

            if (i == 0 && mBounds.width() > itemWidth + itemDividerHorizontalMargin * 2) {

                mDivider.setBounds(0, top, mBounds.right - itemWidth - itemDividerHorizontalMargin, bottom)

            } else {

                mDivider.setBounds(mBounds.left, top, mBounds.left + itemDividerHorizontalMargin, bottom)

            }

            mDivider.draw(canvas)



            //右边分割线

            if (i == childCount - 1 && mBounds.width() > itemWidth + itemDividerHorizontalMargin * 2) {

                mDivider.setBounds(mBounds.left + itemWidth + itemDividerHorizontalMargin, top, parentWidth, bottom)

            } else {

                mDivider.setBounds(mBounds.right - itemDividerHorizontalMargin, top, mBounds.right, bottom)

            }

            mDivider.draw(canvas)

        }

        canvas.restore()

    }

}

效果图：

给RecyclerView注册滚动监听，在滚动过程中动态修改item的缩放与透明度，并将当前选中等级回调出去

定义一个等级回调接口

interface OnLevelChangeListener {

    fun onLevelChange(position : Int)

}

添加OnScrollListener，在滚动过程中做了一些计算，每个方法都写了注释，具体看下面代码↓

addOnScrollListener(object : OnScrollListener() {

    //系数最大值

    private val maxFactor = .45F



    /**

     * RecyclerView滚动

     */

    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {

        super.onScrolled(recyclerView, dx, dy)

        val first = mLayoutManager.findFirstVisibleItemPosition()

        val last = mLayoutManager.findLastVisibleItemPosition()

        val parentCenter = recyclerView.width / 2F

        for (i in first..last) {

            setItemTransform(i, parentCenter)

        }

        changeSnapView()

    }



    /**

     * RecyclerView滚动状态改变

     */

    override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {

        if (newState == SCROLL_STATE_IDLE) {

            changeSnapView()

        }

    }



    /**

     * 对item进行各种变换

     * 目前是缩放与透明度变换

     */

    private fun setItemTransform(position : Int, parentCenter : Float) {

        mLayoutManager.findViewByPosition(position)?.run {

            val factor = calculationViewFactor(left.toFloat(), width.toFloat(), parentCenter)

            val scale = 1 + factor

            scaleX = scale

            scaleY = scale

            alpha = 1 - maxFactor + factor

        }

    }



    /**

     * 计算当前item的缩放与透明度系数

     * item的中心离recyclerView的中心越远，系数越小（负相关）

     */

    private fun calculationViewFactor(left: Float, width : Float, parentCenter : Float) : Float {

        val viewCenter = left + width / 2

        val distance = abs(viewCenter - parentCenter) / width

        return max(0F, (1F - distance) * maxFactor)

    }



    /**

     * 修改当前居中的item，把当前等级回调给外界

     */

    private fun changeSnapView() {

        mSnapHelper.findSnapView(mLayoutManager)?.let {

            mLayoutManager.getPosition(it).let { position ->

                if (lastPosition != position) {

                    lastPosition = position

                    levelListener?.onLevelChange(position)

                }

            }

        }

    }

})

给LevelRecyclerView设置等级回调监听

rv_level.levelListener = object : LevelRecyclerView.OnLevelChangeListener {

    override fun onLevelChange(position: Int) {

        Log.e("levelListener","levelListener $position")

        tv_level.text = "等级:$position"

    }

}

效果图：

重写smoothScrollToPosition，方法原实现是将某个item可见，但现在的需求是居中选中，所以要重写

方法的原实现其实就是LinearLayoutManager内部创建了一个LinearSmoothScroller去进行滚动，现在我们创建一个CenterSmoothScroller类去继承LinearSmoothScroller，重写它的calculateDtToFit方法，calculateDtToFit用于计算滚动距离，而calculateSpeedPerPixel计算滚动速度

class CenterSmoothScroller(context: Context?) : LinearSmoothScroller(context) {



    override fun calculateDtToFit(viewStart: Int, viewEnd: Int, boxStart: Int,

                                  boxEnd: Int, snapPreference: Int): Int {

        return boxStart + (boxEnd - boxStart) / 2 - (viewStart + (viewEnd - viewStart) / 2)

    }



    override fun calculateSpeedPerPixel(displayMetrics: DisplayMetrics?): Float {

        return super.calculateSpeedPerPixel(displayMetrics) * 3F

    }

}



override fun smoothScrollToPosition(position : Int) {

    if (position == lastPosition) return

    if (position < 0 || position >= (adapter?.itemCount ?: 0)) return



    mLayoutManager.startSmoothScroll(

        CenterSmoothScroller(context).apply {

            targetPosition = position

        }

    )

}

到这里就完成了对整个LevelRecyclerView的开发了，实现了文章开头的动画效果

总结

10分钟过去了，这个简单的LevelRecyclerView你拿下没有?

觉得不错的话，就不要吝啬你的点赞！

需要整份代码的话，下面链接自提。

代码链接 : github.MyCustomView

需求简介

最近接了一个需求，需要实现不同登录人员可以自定义首页模块卡片。简单来说，就是实现首页看板模块的增添与拖拉拽，效果如下：

技术选型

原生js是支持拖拉拽的，只需要将拖拽的元素的 draggable 属性设置成 "true"即可，然后就是调用相应的函数即可。

拖拽操作 - Web API 接口参考 | MDN

但是，原生js功能不够完善，使用起来需要改造的地方很多，因此，选用成熟的第三方插件比较好。

我们的主项目采用的是vue3，,经过一系列对比，最终选择了 vue-draggable-next这个插件。

vue-draggable-next

vue-draggable-next的周下载量月3万左右，可以看出是一个比较靠谱的插件。

它的使用方式npmj上也介绍的很详细：

vue-draggable-next

如果英文的使用Api看起来比较难受，网上还有中文的使用文档：

vue.draggable.next 中文文档 - itxst.com

这个插件也有vue2版本和纯js版本，其他框架也是也是可以完美使用的。

实现思路

需求与技术简析

根据我们的需求，我们应该实现的是分组拖拽，假设我们有三列，那我们要实现的就是这A、B、C三列数据相互拖拽。

我们看看中文官网给的示例：

vue.draggable.next group 例子

看起来很容易，我们只需要写多个draggable标签，每个draggable标签写入相同的组名即可。

实现方案

框架实现

回到代码中，要想实现一个三列可拖拉拽的模块列表，我们首先需要引入组件

<script lang="ts" setup>

import { VueDraggableNext } from 'vue-draggable-next'

// ....

</script>

然后定义一个数组储存数据：

<script lang="ts" setup>

    import { VueDraggableNext } from 'vue-draggable-next'

    const moduleList = ref([

      {

        "columnIndex": 1,

        "moduleDetail": [

          { "moduleCode": "deviation", "moduleName": "控制失调空间",},

          { "moduleCode": "meeting_pending", "moduleName": "会议待办",},

          { "moduleCode": "abnormal_events", "moduleName": "异常事件", },

          { "moduleCode": "audit_matters", "moduleName": "事项审批",}

        ],

      },

      {

        "columnIndex": 2,

        "moduleDetail": [

          { "moduleCode": "air_conditioning_terminal", "moduleName": "空调末端", }

        ],

      },

      {

        "columnIndex": 3,

        "moduleDetail": [

          { "moduleCode": "run_broadcast", "moduleName": "运行播报",},

          {"moduleCode": "my_schedule", "moduleName": "我的日程", },

          { "moduleCode": "cold_station", "moduleName": "冷站",}

        ],

      }

    ])

</script>

最后，在代码中我们使用v-for循环渲染即可

<div v-for="moduleColumn in  moduleList " :key="moduleColumn.columnIndex" class="box">

  <VueDraggableNext :list="moduleColumn.moduleDetail" group="column" >

    <div v-for="(item, index) in  moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">

      <!-- 模块内容 -->

    </div>

  </VueDraggableNext>

</div>

注意上面的html结构，我们循环渲染了三列VueDraggableNext标签，每个VueDraggableNext标签内部又通过v-for="(item, index) in moduleColumn.moduleDetail渲染了这个拖拽列内部的所有模块。我们通过group="column" 让每个VueDraggableNext组件的组名相同，实现了三个拖拽标签之间的模块互相拖拉拽。

拖拽点设置

正常情况小，我们肯定是希望在某个组件的固定位置才能拖动组件，因此我们需要使用到拖拽组件的handle属性。

vue.draggable.next属性说明：

根据属性说明，我们的代码实现起来也非常容易了。

  <div v-for="moduleColumn in  moduleList " :key="moduleColumn.columnIndex" class="box">

      <VueDraggableNext :list="moduleColumn.moduleDetail" handle=".move" group="column">

        <div v-for="(item, index) in  moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">

          <div class="move">

            拖拽区域

          </div>

          <!-- 模块内容 -->

        </div>

      </VueDraggableNext>

  </div>

数据的增删改

实际开发中，我么一定会根据接口或者操作动态的更改列表，代码层也就是更改moduleList的值。非常幸运的是，如果你按照上面的方式写代码，当你拖拉拽完毕后，上面的moduleList值会自动更改，我们不用做任何处理！！！这么看，数据的增删改根本不是问题。

如何动态渲染组件

实际开发中，我们可能会遇到一个问题，就是如何动态的去渲染组件，如果你熟悉vue，使用动态组件component就可以实现。

首先，我们需要定义一个模块列表

import MeetingPending from '../components/meetingPending.vue'

import AbnormalEvents from '../components/abnormalEvents/index.vue'

import MySchedule from '../components/mySchedule.vue'

import TransactionApproval from '../components/transactionApproval.vue'

import RunningBroadcast from '../components/runningBroadcast.vue'

import CodeSite from '../components/codeSite/index.vue'

import MismatchSpace from '../components/mismatchSpace/index.vue'

import AirDevice from '../components/airDevice/index.vue'



// !全量模块选择列表

export const allModuleList = [

  { moduleCode: 'meeting_pending', label: '会议待办', component: MeetingPending },

  { moduleCode: 'my_schedule', label: '我的日程', component: MySchedule },

  { moduleCode: 'audit_matters', label: '事项审批', component: TransactionApproval },

  { moduleCode: 'abnormal_events', label: '异常事件', component: AbnormalEvents },

  { moduleCode: 'deviation', label: '控制失调空间', component: MismatchSpace },

  { moduleCode: 'run_broadcast', label: '运行播报', component: RunningBroadcast },

  { moduleCode: 'cold_station', label: '冷站', component: CodeSite },

  { moduleCode: 'air_conditioning_terminal', label: '空调末端', component: AirDevice }

]

然后根据moduleCode做匹配，动态渲染即可

  <div v-for="moduleColumn in  moduleList " :key="moduleColumn.columnIndex" class="box">

      <VueDraggableNext :list="moduleColumn.moduleDetail" handle=".move" group="column">

        <div v-for="(item, index) in  moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">

          <div class="move">

            拖拽区域

          </div>

          <component :is="getComponentsByCode(item.moduleCode)" ></component>

        </div>

      </VueDraggableNext>

  </div>

更多定制化需求

如果上面的功能不满足你的需求，我们可以使用这个组件的其他属性，完成更多意想不到的效果

如果下面的属性说明未能完全看明，可以看左边的对应的菜单查看详细说明和例子。

传送门：vue.draggable.next 中文文档 - itxst.com

写在最后

关联文章：如何实现模块的锚点定位及闪烁提示：juejin.cn/post/734622…

随着小程序项目的不断迭代升级，避免不了体积越来越大。微信限制主包最多2M，然而我们的项目引入了直播插件直接占了1.1M，导致必须采用一些手段去优化。下面介绍一下优化思路和终极解决方案。

1.分包

我相信几乎所有人都能想到的方案，基本上这个方案就能解决问题。具体如何实现可以参照官方文档这里不做过多说明。(基础能力 / 分包加载 / 使用分包 (qq.com))，但是有时候你会发现分包之后好像主包变化不是很大，这是为什么呢？

• 痛点1：通过依赖分析，如果分包中引入了第三方依赖，那么依赖的js仍然会打包在主包中，例如echarts、wxparse、socket.io。这就导致我们即使做了分包处理，但是主包还是很大，因为相关的js都会在主包中的vendor.js


• 痛点2：插件只能在主包中无法分包，例如直播插件直接占据1M
  


• 痛点3：tabbar页面无法分包，只能在主包内


• 痛点4：公共组件/方法无法分包，只能在主包内


• 痛点5：图片只能在主包内

2.图片优化

图片是最好解决的，除了tabbar用到的图标，其余都放在云上就好了，例如oss和obs。而且放在云上还有个好处就是背景图片无需担心引入不成功。

3.tabbar页面优化

这部分可以采用tabbar页面都在放在一个文件夹下，比如一共有4个tab，那么一个文件夹下就只存放这4个页面。其余tabbar的子页面一律采用分包。

4.独立分包

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。
但是使用的时候需要注意：

• 独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用 分包异步化 时 js 文件、自定义组件、插件不受此条限制）


• 主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；


• App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；


• 独立分包中暂时不支持使用插件。

5.终极方案we-script

我们自己写的代码就算再多，其实增加的kb并不大。大部分大文件主要源于第三方依赖，那么有没有办法像webpack中的externals一样，当进入这个页面的时候再去异步加载js文件而不被打包呢（说白了就是CDN）

其实解决方案就是we-script，他允许我们使用CDN方式加载js文件。这样就不会影响打包体积了。

使用步骤

使用中存在的坑

构建后可能会出现依赖报错，解决的方式就是将编译好的文件手动拖入miniprogram_npm文件夹中，主要是三个文件夹：we-script,acorn,eval5

最后成功解决了主包文件过大的问题，只要是第三方依赖，都可以通过这个办法去加载。

感谢阅读，希望来个三连支持下，转载记得标注原文地址~

相信很多人在职场里待久了，都会遇到自己觉得比较差劲的领导，这些人可能除了向上管理能力很强外（会舔老板），其他能力在你看来都挺一般，专业能力一般，超级缝合怪--上级给他的任何任务他都能分配给你们，然后他再缝合一遍完事。

那么遇到这种领导我们该怎么办呢？多数人想到的是跳槽，这确实是一个解法，但你跳到下家公司也保不齐会有这样的领导呀，今天咱们讨论的这个话题就先把条件限定成你不能跳槽，这个时候你该采用什么方法让自己的上班体验变好一些。

多元化自己的评估标准

首先，不能用鄙视的眼光去看待你的领导，觉得他只会舔老板(能舔、会舔也是一种很强的能力呀)，有的时候你觉得你领导能力不行，很有可能是因为你的能力评估标准太单一了。

他或许在工作的某个方面不如你，但是他必定在某些方面有自己的长处，努力发现他的长处，认可他的长处，学习他的长处，可以更有助于你和他的相处，也有利于你的进步。

社会是一个大熔炉，你需要的不仅仅是业务能力和展现的舞台，也需要与社会中不同个体的和谐共处。包容、接纳，都是立身处世的能力。

学会变通和沟通，满足领导的存在感

领导之所以会在很多工作上提意见、瞎指挥、乱指挥，更多的情况可能是他知道自己对工作不熟悉，但觉得自己是领导，会有自己独特的见解，想刷自己的存在感。这种情况下，要学会满足领导的存在感。

举个例子说，你在工作中，领导过来给你提了个意见，这个意见明显是不合适的，那你就可以说，“领导，这个思路好，我们之前没往这个角度想，可以从这个角度延展一下……。”他走了，还不是我们自己把控，毕竟他只是过来刷个存在感的，只要最后的方案让客户满意，业绩给领导，把一些光环放在他身上，让他觉得他起到了作用，这些方案和他有关，他通常也不会计较了。

摸清领导管理的思想和套路

说到这里，找到领导心中的关键因素，是非常必要的。在一个项目里，员工承担的通常只是局部，而领导看的是整体，由于高度不同，所以你们考虑的关键因素是不同的。

所以你要知道领导心里到底想要的是什么，提前做好这方面的预期和准备，以及针对领导提出的你们没有考虑到的方面要虚心接受（毕竟领导跟高层接触的更多，有些战略方向上的事情他们会更清楚）。 

比如说，你是一个小编，你在意的是按时完成写作任务、及时发表、赚取眼球，而你的领导主编可能更在意的是你文章的各种数据真实性、转化人群、是否会产生舆情、是否zzzq这些。所以，要搞清领导在意的重要维度，工作才能更有效。

这里有三句话分享给大家：

• 要能够分清你可以改变的事、无法改变的事；


• 不去抱怨你服务改变的事；


• 把精力用在你可以改变的地方。

你的上司，是你改变不了的，但你自己，是可以把握的。当然这篇文章也不是教你怎么委屈自己，只是提供一个不同的角度来讨论"领导不行” 这个事情，以及让你在无法立刻更换环境时，该怎样让当前的环境变得不那么恶劣。

想跳槽的同学还是应该按部就班的准备，骑驴找马有更合适的地方该跳就跳，跳过去了说不定今天学到的这些还能用的上……。

前言

在Android发展的进程中，网格布局一直比较有热度，其中一个原因是对用户来说便捷操作，对app厂商而言也会带来很多的曝光量，对于很多头部app，展示网格菜单几乎是必选项。实现网格的方式有很多种，比如GridView、GridLayout，TableLayout等，实际上，由于RecyclerView的灵活性和可扩展性很高，这些View基本没必要去学了，为什么这样说呢？主要原因是基于RecyclerView可以实现很多布局效果，传统的很多Layout都可以通过RecyclerView去实现，比如ViewPager、SlideTabLayout、DrawerLayout、ListView等，甚至连九宫格解锁效果也可以实现。

当然，在很早之前，实现网格的拖拽效果主要是通过GridView去实现的，如果列数为1的话，那么GridView基本上就实现了ListView一样的上下拖拽。

话说回来，我们现在基本不用去学习这类实现了，因为RecyclerView足够强大，通过简单的数据组装，是完全可以替代GridView和ListView的。

效果

本篇我们会使用RecyclerView来实现网格拖拽，本篇将结合图片分片案例，实现拖拽效果。

如果要实现网格菜单的拖拽，也是可以使用这种方式的，只要你的想象丰富，理论上，借助RecyclerView其实可以做出很多效果。

拖拽效果原理

拖动其实需要处理3个核心的问题，事件、图像平移、数据交换。

事件处理

实际上无论传统的拖拽效果还是最新的拖拽效果，都离不开事件处理，不过，好处就是，google为RecyclerView提供了ItemTouchHelper来处理这个问题，相比传统的GridView实现方式，省去了很多事情，如动画、目标查找等。

不过，我们回顾下原理，其实他们很多方面都是相似的，不同之处就是ItemTouchHelper 设计的非常好用，而且接口暴露的非常彻底，甚至能控制那些可以拖动、那些不能拖动、以及什么方向可以拖动，如果我们上、下、左、右四个方向都选中的话，斜对角拖动完全没问题，

事件处理这里，GridView使用的方式相对传统，而ItemTouchHelper借助RecyclerView的一个接口（看样子是开的后门），通过View自身去拦截事件.

public interface OnItemTouchListener {

    //是否让RecyclerView拦截事件

    boolean onInterceptTouchEvent(@NonNull RecyclerView rv, @NonNull MotionEvent e);

    //拦截之后处理RecyclerView的事件

    void onTouchEvent(@NonNull RecyclerView rv, @NonNull MotionEvent e);

    //监听禁止拦截事件的请求结果

    void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept);

}

这种其实相对GridView来说简单的多

图像平移

无论是RecyclerView和传统GridView拖动，都需要图像平移。我们知道，RecyclerView和GridView本身是通过子View的边界（left\top\right\bottom）来移动的，那么，在平移图像的时候必然不能选择这种方式，只能选择Matrix 变化，也就是transitionX和transitionY的等。不同点是GridView的子View本身并不移动，而是将图像绘制到一个GridView之外的View上，相当于灵魂附体到外面View上，实现上是比较复杂。

对于RecyclerView来说，ItemTouchHelper设计比较巧妙的一点是，通过RecyclerView#ItemDecoration来实现，在捕获可以滑动的View之后，在绘制时对View进行偏移。

class ItemTouchUIUtilImpl implements ItemTouchUIUtil {

    static final ItemTouchUIUtil INSTANCE =  new ItemTouchUIUtilImpl();



    @Override

    public void onDraw(Canvas c, RecyclerView recyclerView, View view, float dX, float dY,

            int actionState, boolean isCurrentlyActive) {

        if (Build.VERSION.SDK_INT >= 21) {

            if (isCurrentlyActive) {

                Object originalElevation = view.getTag(R.id.item_touch_helper_previous_elevation);

                if (originalElevation == null) {

                    originalElevation = ViewCompat.getElevation(view);

                    float newElevation = 1f + findMaxElevation(recyclerView, view);

                    ViewCompat.setElevation(view, newElevation);

                    view.setTag(R.id.item_touch_helper_previous_elevation, originalElevation);

                }

            }

        }



        view.setTranslationX(dX);

        view.setTranslationY(dY);

    }

     //省略一些有关或者无关的代码

}

不过，我们看到，Android 5.0的版本借助了setElevation 使得被拖拽View不被其他顺序的View遮住，那Android 5.0之前是怎么实现的呢？

其实，做过TV app的都比较清楚，子View绘制顺序可以通过下面方式调整，借助下面的方法，在TV上某个View获取焦点之后，就不会被后面的View盖住。

View#getChildDrawingOrder(...)

此方法实际上是改变了View的绘制顺序，原理是通过下面方式，将View的索引和绘制顺序进行了映射，比如原来的第一个View模式是第1个被绘制的子View，但可以变更成最后一个绘制的View。

原理：让第i个位置绘制第index的view，伪代码如下

void drawChildFunction(drawIndex,canvas){

    children[mapChildIndex(drawIndex)].draw(canvas);

}

具体实现方法参考如下。

ArrayList<View> buildOrderedChildList() {

    final int childrenCount = mChildrenCount;

    if (childrenCount <= 1 || !hasChildWithZ()) return null;



    if (mPreSortedChildren == null) {

        mPreSortedChildren = new ArrayList<>(childrenCount);

    } else {

        // callers should clear, so clear shouldn't be necessary, but for safety...

        mPreSortedChildren.clear();

        mPreSortedChildren.ensureCapacity(childrenCount);

    }



    final boolean customOrder = isChildrenDrawingOrderEnabled();

    for (int i = 0; i < childrenCount; i++) {

        // add next child (in child order) to end of list

        final int childIndex = getAndVerifyPreorderedIndex(childrenCount, i, customOrder);

        

        // 映射View

        final View nextChild = mChildren[childIndex];

        final float currentZ = nextChild.getZ();



        // 如果Z值大的话往后移动，5.0之前的代码没有这段

        int insertIndex = i;

        while (insertIndex > 0 && mPreSortedChildren.get(insertIndex - 1).getZ() > currentZ) {

            insertIndex--;

        }

        mPreSortedChildren.add(insertIndex, nextChild);

    }

    return mPreSortedChildren;

}