用了 Bun 之后，并不是完全不用 Vite。Bun 虽然内置了打包器和运行时，且速度非常快，但其打包功能目前还不够完善，缺少对前端项目非常重要的功能，比如对代码分块（chunk splitting）的精细控制和开发服务器（dev server）支持，这些都是 Vite 在前端开发中非常关键的优势

具体来说：

• Bun 是一个高性能的 JavaScript 运行时和包管理器，集成了打包器和测试工具，适合全栈开发和快速安装依赖，但其前端打包功能还处于实验阶段，缺少灵活的代码拆分和热更新支持


• Vite 专注于前端开发体验，提供极快的冷启动和热模块替换（HMR），以及灵活且成熟的生产构建流程，它的生态和插件系统也非常丰富，适合现代前端框架（如 Vue3、React）


• 目前推荐的做法是用 Bun 替代 Node.js 作为运行时和包管理器，用 Vite 负责前端的开发服务器和构建打包。这样可以结合 Bun 的高速安装和执行优势，以及 Vite 的快速开发反馈和优化生产构建的能力

关于 pnpm 和 Vite 的叠加：

• pnpm 是一个高效且节省磁盘空间的包管理器，完全可以和 Vite 一起使用。pnpm 通过内容寻址存储和符号链接机制，避免依赖重复，提升安装速度和项目管理效率，特别适合 monorepo 和多项目共享依赖的场景


• pnpm 和 Vite 的结合非常常见，pnpm 负责依赖管理，Vite 负责开发和构建，两者互不冲突，反而能互补提升开发效率

总结：

因此，用了 Bun 后，建议继续用 Vite 负责前端开发和构建，pnpm 依然可以用来管理依赖，三者结合能发挥各自优势，提升开发体验和性能

如果你想快速上手，可以用 Bun 创建 Vite 项目：

bun create vite my-app

cd my-app

bun install

bun run dev

这样就用 Bun 作为运行时和包管理器，用 Vite 作为开发服务器和构建工具

综上，Bun 目前还不能完全替代 Vite，Vite 在前端开发体验和构建优化上仍有不可替代的优势；pnpm 作为包管理器可以和 Vite 叠加使用，带来依赖管理的高效和节省空间的好处。三者结合是现代前端项目的一个高效组合方案。

用了next.js之后，是不是就不用vite了

用了 Next.js 之后，一般情况下是不需要再单独使用 Vite 了，因为 Next.js 内部已经集成了自己的构建和开发服务器功能。

具体原因和分析如下：

• Next.js 是一个基于 React 的全栈框架，内置了开发服务器（通过 next dev 命令启动）、构建工具和打包器，它自动处理代码编译、热模块替换（HMR）、代码拆分和优化等工作，开发体验和构建性能都非常优秀


• Next.js 使用了基于 Rust 的编译器 SWC 来加速构建和转译，性能上已经非常接近甚至优于传统的打包工具


• Vite 主要是一个前端构建工具和开发服务器，适合纯前端项目或需要快速启动的 React/Vue 应用，而 Next.js 是一个框架，包含了路由、服务器端渲染（SSR）、静态站点生成（SSG）、API 路由等功能，功能层面更全面


• 使用 Next.js 时，所有的构建和开发流程都由 Next.js 自己管理，开发者无需额外配置 Vite，避免了工具链的重复和冲突。


• 如果你只是做纯前端项目，Vite 是很好的选择；但如果你需要 SSR、API 路由、全栈功能，Next.js 是更合适的框架，且内置了构建和开发支持，不需要再叠加 Vite。

总结：

因此，用了 Next.js 后，基本上不需要再用 Vite 了，Next.js 已经集成了类似 Vite 的开发和构建功能，且提供了更多全栈特性

JS 和 Android

• 原生调用 JS
  4.4 版本之前

// mWebView = new WebView(this); //当前webview对象

// 通过loadUrl方法进行调用 参数通过字符串的方式传递

mWebView.loadUrl("javascript: 方法名('参数1,参数2...')");



//也可以在UI线程中运行

runOnUiThread(new Runnable() {

    @Override

    public void run() {

        // 通过loadUrl方法进行调用 参数通过字符串的方式传递

        mWebView.loadUrl("javascript: 方法名('参数1,参数2...')");

        // 安卓中原生的弹框

        Toast.makeText(Activity名.this, "调用方法...", Toast.LENGTH_SHORT).show();

    }

});

4.4 版本之后

// 通过异步的方式执行js代码,并获取返回值

mWebView.evaluateJavascript("javascript: 方法名('参数1,参数2...')", new ValueCallback() {

    @Override

    // 这个方法会在执行完毕之后触发, 其中value就是js代码执行的返回值(如果有的话)

    public void onReceiveValue(String value) {



    }

});

• JS 调用Android
  安卓配置：

// Android4.2版本以上，本地方法要加上注解@JavascriptInterface，否则无法使用

private Object getJSBridge(){

    // 实例化新对象

    Object insertObj = new Object(){

        @JavascriptInterface

        // 对象内部的方法1

        public String foo(){

            // 返回 字符串 foo

            return "foo";

        }

        @JavascriptInterface

        // 对象内部的方法2 需要接收一个参数

        public String foo2(final String param){

            // 返回字符串foo2拼接上传入的param

            return "foo2:" + param;

        }

    };

    // 返回实例化的对象

    return insertObj;

}



// 获取webView的设置对象，方便后续修改

WebSettings webSettings = mWebView.getSettings();

// 设置Android允许JS脚本，必须要！！！

webSettings.setJavaScriptEnabled(true);

// 暴露一个叫做JSBridge的对象到webView的全局环境

mWebView.addJavascriptInterface(getJSBridge(), "JSBridge");

在 web 页面中调用

//调用方法一

window.JSBridge.foo(); //返回:'foo'

//调用方法二

window.JSBridge.foo2('test');//返回:'foo2:test'

JS 和 IOS

• 原生调用 JS

class ViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHandler {

    // 加载完毕会触发(类似于Vue的生命周期钩子)

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

        // 类似于console.log()

        print("触发啦");

        // wkWebView调用js代码，其中doSomething()会被当做js解析

        webView.evaluateJavaScript("doSomething()");

    }

}

• JS 调用 IOS

1. JS 部分

window.webkit.messageHandlers.方法名.postMessage(数据)

2. iOS 部分注册监听

wkWebView.configuration.userContentController.add(self, name: 方法名)

3. iOS 部分遵守协议相关方法

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

    // message.body 就是传递过来的数据

    print("传来的数据为", message.body)

}

url scheme(互通协议)

web 调用

class="ios" type="button" value="使用iframe加载url">



// 加载url 通过iframe 设置URL 目的是让ios拦截

function loadUrl(url) {

  // 创建iframe

  const iframe = document.createElement('iframe');

  // 设置url

  iframe.src = url;

  // 设置尺寸(不希望他被看到)

  iframe.style.height = 0;

  iframe.style.width = 0;

  // 添加到页面上

  document.body.appendChild(iframe);

  // 加载了url之后他就没用了

  // 移除iframe

  iframe.parentNode.removeChild(iframe);

}



document.querySelector('.ios').onclick = function () {

  loadUrl('taobao://click');

}

IOS 监听

// 拦截url

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {

    // 获取url

    let url = navigationAction.request.url?.absoluteString;

    if(url=="taobao://click"){

        print("调用系统功能");

        decisionHandler(.cancel);

    }else{

        decisionHandler(.allow);

    }

}

HyBridApp

• 开发框架

1. 提供前端运行环境
2. 实现前端和原生交互
3. 封装原生功能，提供插件机制 

加载优化

• 骨架屏

<style>

  .shell .placeholder-block{

    display: block;

    height: 5em;

    background: #ccc;

    margin: 1em;

  }

  .novel {

    height: 5em;

    background-color: yellowgreen;

  }

style>

head>

<body>

<div class="shell">

  <div class="placeholder-block">div>

div>

body>

html>

<script>

setTimeout(()=>{

  // 移除 占位dom元素

  document.querySelector('.shell').innerHTML = ''

  // 创建数据的dom元素 添加到页面上

  let p = document.createElement('p')

  p.innerHTML = '黑马程序员'

  p.className = 'novel'

  document.querySelector('.shell').appendChild(p)

},3000)

script>

webview

import UIKit

import WebKit



class ViewController: UIViewController, WKNavigationDelegate {

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view.

        // 创建webView

        var webView = WKWebView(frame: self.view.bounds)

        // 设置自己为WebView的代理

        webView.navigationDelegate = self

        // 添加到页面上

        self.view.addSubview(webView)



        // 创建URL对象

        var url = URL(string: "https://www.baidu.com")

        // 创建URLRequest对象

        var request = URLRequest(url: url!)

        // 加载URL

        webView.load(request)

    }

}

JSBridge

• 设计思想

1. JS 向原生发送消息
2. 原生向 JS 发送消息

window.JSBridge = {

    invoke: function(action, params, callback) {

        // 生成唯一回调ID

        const callbackId = 'cb_' + Date.now();

        // 存储回调函数

        window[callbackId] = callback;

        

        // 构建标准化消息

        const msg = {

            action: action,

            params: params || {},

            callbackId: callbackId

        };

        

        // 根据平台调用不同原生桥

        if (isIOS()) {

            window.webkit.messageHandlers.nativeBridge.postMessage(JSON.stringify(msg));

        } else if (isAndroid()) {

            window.android.postMessage(JSON.stringify(msg));

        }

    },

    // 原生调用此方法来回调结果

    receiveMessage: function(msg) {

        const { callbackId, result, error } = msg;

        const callback = window[callbackId];

        if (callback) {

            if (error) {

                callback(null, error); // 错误回调

            } else {

                callback(result, null); // 成功回调

            }

            // 执行后删除回调，避免内存泄漏

            delete window[callbackId];

        }

    }

};



// 使用示例：调用原生相机

JSBridge.invoke('takePhoto', { quality: 'high' }, (result, error) => {

    if (error) {

        console.error('拍照失败：', error);

    } else {

        console.log('照片路径：', result.imagePath);

    }

});

解释：

1. 前端调用 JSBridge.invoke 时：存储回调函数，生成唯一的 callbackId（如 cb_1725000000000），确保每个回调能被唯一识别；把回调函数挂载到 window 对象上（即 window[callbackId] = 回调函数），相当于 “暂时存档”，避免函数被垃圾回收。
2. 前端向原生发送 “带回调 ID 的消息”，然后根据平台（iOS/Android）把消息发给原生，此时原生收到的是  “操作指令 + 回调 ID”
3. 原生执行操作（如调用相机），原生接收到消息后，解析出 action 和 params，执行对应的原生逻辑

• iOS：调用 UIImagePickerController（系统相机接口），按 quality: 'high' 配置拍照质量；
• Android：调用 Camera 或 CameraX 接口，同样按参数执行拍照。 这个阶段完全在原生环境（Objective-C/Swift 或 Java/Kotlin）中运行，与前端 JS 无关。

4. 原生将 “结果 + 回调 ID” 回传给前端
   原生执行完操作后（无论成功 / 失败），会构建一个 “结果消息”，包含：callbackId: 'cb_1725000000000'（必须和前端传过来的一致，才能找到对应的回调）； result: { imagePath: '/var/mobile/.../photo.jpg' }（成功时的结果，如照片路径）； 或 error: '用户取消拍照'（失败时的错误信息）。

然后原生会主动调用前端 JSBridge 预留的 receiveMessage 方法，把 “结果消息” 传回去。

5. 前端 receiveMessage 执行回调函数

• 解析原生传过来的消息，提取 callbackId、result、error；
• 通过 callbackId 找到之前挂载在 window 上的回调函数（即 window['cb_1725000000000']）；
• 执行回调函数：
  • 成功：调用 callback(result, null)（如打印照片路径）；
  • 失败：调用 callback(null, error)（如打印 “用户取消拍照”）；
• 执行完后删除 window[callbackId]，避免内存泄漏。

到这一步，回调函数才真正在前端 JS 环境中执行，完成整个跨端通信闭环。

作者：code_YuJun
来源：juejin.cn/post/7544077353371222067

JavaScript 数组扁平化全解析：从基础到进阶，深入理解 flat 与多种实现方式

在现代前端开发中，数组操作是日常编码中最常见的任务之一。而在处理复杂数据结构时，我们经常会遇到“嵌套数组”（即高维数组）的场景。例如，后端返回的数据结构可能是多层嵌套的，我们需要将其“拍平”为一维数组以便于渲染或进一步处理。这种将多层嵌套数组转换为单层数组的过程，就被称为 数组扁平化（Array Flattening）。

本文将带你全面了解 JavaScript 中数组扁平化的各种方法，包括原生 API 的使用、递归实现、reduce 高阶函数应用、利用 toString 和 split 的巧妙技巧，以及基于展开运算符的循环优化方案。我们将深入剖析每种方法的原理、优缺点和适用场景，帮助你构建完整的知识体系。

一、什么是数组扁平化？

数组扁平化，顾名思义，就是把一个嵌套多层的数组“压平”成一个只有一层的一维数组。例如：

const nestedArr = [1, [2, 3, [4, 5]], 6];

// 扁平化后应得到：

// [1, 2, 3, 4, 5, 6]

这个问题看似简单，但在实际项目中非常常见。比如你在处理树形菜单、评论回复结构、文件目录层级等数据时，都可能需要对嵌套数组进行扁平化处理。

二、使用原生 flat() 方法（推荐方式）

ES2019 引入了 Array.prototype.flat() 方法，使得数组扁平化变得极其简单和直观。

✅ 基本语法

arr.flat([depth])

• depth：指定要展开的层数，默认为 1。


• 如果传入 Infinity，则无论嵌套多少层，都会被完全展开。

✅ 示例代码

const arr = [1, [2, 3, [1]]];



console.log(arr.flat());           // [1, 2, 3, [1]]     → 只展开一层

console.log(arr.flat(2));          // [1, 2, 3, 1]       → 展开两层

console.log(arr.flat(Infinity));   // [1, 2, 3, 1]       → 完全展开

✅ 特点总结

• 简洁高效：一行代码解决问题。


• 兼容性良好：现代浏览器基本都支持（IE 不支持）。


• 可控制深度：灵活控制展开层级。


• 推荐用于生产环境：清晰、安全、性能好。

⚠️ 注意：flat() 不会改变原数组，而是返回一个新的扁平化数组。

三、递归实现：最经典的思路

如果你不能使用 flat()（比如兼容老版本浏览器），或者想深入理解其内部机制，那么递归是一个经典且直观的解决方案。

✅ 基础递归版本

function flatten(arr) {

    let res = [];

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

        if (Array.isArray(arr[i])) {

            res = res.concat(flatten(arr[i])); // 递归处理子数组

        } else {

            res.push(arr[i]); // 非数组元素直接加入结果

        }

    }

    return res;

}



// 测试

const arr = [1, [2, 3, [1]]];

console.log(flatten(arr)); // [1, 2, 3, 1]

✅ 分析

• 使用 for 循环遍历每个元素。


• 判断是否为数组：是 → 递归调用；否 → 直接推入结果数组。


• 利用 concat 合并递归结果。

✅ 缺点

• 每次 concat 都会创建新数组，性能略低。


• 递归深度过大可能导致栈溢出（极端情况）。

四、使用 reduce + 递归：函数式编程风格

利用 reduce 可以写出更优雅、更具函数式风格的扁平化函数。

✅ 实现方式

function flatten(arr) {

    return arr.reduce((pre, cur) => {

        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);

    }, []);

}

✅ 解析

• reduce 接收一个累加器 pre 和当前元素 cur。


• 如果 cur 是数组，则递归调用 flatten(cur)，否则直接使用 cur。


• 使用 concat 将结果合并到 pre 中。

✅ 优点

• 代码简洁，逻辑清晰。


• 更符合函数式编程思想。


• 易于组合其他操作（如 map、filter）。

五、利用 toString() + split() 的“黑科技”技巧

这是一个非常巧妙但需要谨慎使用的技巧，适用于数组中只包含数字或字符串基本类型的情况。

✅ 实现原理

JavaScript 中，数组的 toString() 方法会递归地将每个元素转为字符串，并用逗号连接。

const arr = [1, [2, 3, [1]]];

console.log(arr.toString()); // "1,2,3,1"

我们可以利用这一点，先转成字符串，再用 split(',') 分割，最后通过 +item 转回数字。

✅ 实现代码

function flatten(arr) {

    return arr.toString().split(',').map(item => +item);

}



// 测试

const arr = [1, [2, 3, [1]]];

console.log(flatten(arr)); // [1, 2, 3, 1]

✅ 优点

• 代码极短，实现“一行扁平化”。


• 性能较好（底层由引擎优化）。

✅ 缺点（⚠️ 重要）

❗ 所以这个方法虽然巧妙，但不适合通用场景，仅作为面试中的“奇技淫巧”了解即可。

六、使用 while 循环 + concat + 展开运算符（性能优化版）

这种方法避免了递归调用，采用循环逐步“拍平”数组，适合处理深层嵌套且希望避免栈溢出的场景。

✅ 实现方式

function flatten(arr) {

    while (arr.some(item => Array.isArray(item))) {

        arr = [].concat(...arr);

    }

    return arr;

}

✅ 原理解析

• arr.some(item => Array.isArray(item))：检查数组中是否还存在嵌套数组。


• ...arr：展开数组的所有元素。


• [].concat(...arr)：concat 会对展开后的数组元素自动“拍平一层”。

🔍 举个例子：

[].concat(...[1, [2, 3, [1]]])

// 等价于

[].concat(1, [2, 3, [1]])

// → [1, 2, 3, [1]]  → 拍平了一层

然后继续循环，直到没有嵌套为止。

✅ 优点

• 非递归，避免栈溢出。


• 逻辑清晰，易于理解。


• 性能较好，尤其适合中等深度嵌套。

✅ 缺点

• 每次 concat(...arr) 都会创建新数组，内存开销较大。


• 对于极深嵌套，仍可能影响性能。

七、对比总结：各种方法的适用场景

八、扩展思考：如何实现深度可控的扁平化？

有时候我们并不想完全拍平，而是只想展开指定层数。可以仿照 flat(depth) 实现一个通用函数：

function flattenDepth(arr, depth = 1) {

    if (depth === 0) return arr.slice(); // 深度为0，直接返回副本



    let result = [];

    for (let item of arr) {

        if (Array.isArray(item) && depth > 0) {

            result.push(...flattenDepth(item, depth - 1));

        } else {

            result.push(item);

        }

    }

    return result;

}



// 测试

const arr = [1, [2, 3, [4, 5, [6]]]];

console.log(flattenDepth(arr, 1)); // [1, 2, 3, [4, 5, [6]]]

console.log(flattenDepth(arr, 2)); // [1, 2, 3, 4, 5, [6]]

console.log(flattenDepth(arr, Infinity)); // [1, 2, 3, 4, 5, 6]

九、结语

📌 小贴士：如果你的项目需要兼容老旧浏览器，可以使用 Babel 转译 flat()，或手动引入 polyfill：

// Polyfill for Array.prototype.flat

if (!Array.prototype.flat) {

    Array.prototype.flat = function(depth = 1) {

        return this.reduce((acc, val) => 

            Array.isArray(val) && depth > 0

                ? acc.concat(val.flat(depth - 1))

                : acc.concat(val)

        , []);

    };

}

这样就能在任何环境中愉快地使用 flat() 了！

某些场景下CSS替代JS（现代CSS的深度实践指南）

🧩 前端渲染核心机制解析

水合错误（Hydration Mismatch）深度解析

graph TD

    A[客户端渲染CSR] --> B[服务端渲染SSR]

    B --> C{水合过程 Hydration}

    C -->|成功| D[交互式页面]

    C -->|失败| E[水合错误]

    E --> F[布局错乱]

    E --> G[交互失效]

    E --> H[控制台报错]

水合错误的本质：

在SSR框架（如Next.js）中，服务端生成的静态HTML与客户端React组件的初始状态不一致，导致React在"注水"过程中无法正确匹配DOM结构。

典型场景：

// Next.js组件 - 服务端渲染时获取时间

export default function Page({ serverTime }) {

  // 问题点：客户端初始化时间与服务端不同

  const [clientTime] = useState(Date.now());

  

  return (

    <div>

      <p>服务端时间: {serverTime}</p>

      <p>客户端时间: {clientTime}</p>

    </div>

  );

}



export async function getServerSideProps() {

  return {

    props: {

      serverTime: Date.now() // 服务端生成时间戳

    },

  };

}

根本原因分析：

现代CSS的解决之道

<!-- 纯CSS时间显示方案 -->

<div class="time-container">

  <time datetime="2023-11-15T08:00:00Z">08:00</time>

  <span class="live-indicator"></span>

</div>



<style>

  .live-indicator::after {

    content: "实时";

    animation: pulse 1s infinite;

  }

  

  @keyframes pulse {

    0% { opacity: 0.5; }

    50% { opacity: 1; }

    100% { opacity: 0.5; }

  }

</style>

优势对比：

🛠️ CSS核心解决方案详解

1️⃣ 嵌套选择器：组件化样式管理

/* 卡片组件 - 替代React组件 */

.card {

  padding: 1.5rem;

  border: 1px solid #e0e0e0;

  

  /* 标题区域 */

  &-header {

    display: flex;

    align-items: center;

    

    &:hover {

      background: #f5f5f5;

    }

  }

  

  /* 响应式处理 */

  @media (width <= 768px) {

    border-radius: 0;

    padding: 1rem;

  }

  

  /* 深色模式适配 */

  @media (prefers-color-scheme: dark) {

    border-color: #444;

  }

}

工程价值：

• 作用域隔离：避免全局样式污染


• 维护成本：修改单个组件不影响其他部分


• 开发效率：类似JSX的组件化开发体验

2️⃣ CSS变量 + 相对颜色：动态主题系统

:root {

  --primary: #2468f2;

  --text-primary: #333;

  

  /* 动态派生变量 */

  --primary-hover: hsl(from var(--primary) h s calc(l + 8%));

  --primary-active: oklch(from var(--primary) l c h / 0.9);

}



/* 主题切换器 */

.theme-switcher:has(#dark:checked) {

  --text-primary: #fff;

  --bg-primary: #121212;

}



button {

  background: var(--primary);

  transition: background 0.3s;

  

  &:hover {

    background: var(--primary-hover);

  }

  

  &:active {

    background: var(--primary-active);

  }

}

3️⃣ @starting-style：元素入场动画

.modal {

  opacity: 1;

  transform: translateY(0);

  transition: 

    opacity 0.4s ease-out,

    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  

  /* 初始状态 */

  @starting-style {

    opacity: 0;

    transform: translateY(20px);

  }

}

与传统方案对比：

// React实现模态框动画 - 需要状态管理

function Modal() {

  const [isOpen, setIsOpen] = useState(false);

  

  return (

    <div 

      className={`modal ${isOpen ? 'open' : ''}`}

      onTransitionEnd={() => console.log('动画结束')}

    >

      {/* 内容 */}

    </div>

  )

}



/* 对应CSS */

.modal {

  opacity: 0;

  transform: translateY(20px);

  transition: all 0.4s;

}



.modal.open {

  opacity: 1;

  transform: translateY(0);

}

📱 响应式设计新范式

动态视口单位实战

/* 移动端布局方案 */

.header {

  height: 15svh; /* 最小可视高度 */

}



.hero {

  height: 75lvh; /* 最大可视高度 */

}



.content {

  height: 120dvh; /* 动态高度 */

  overflow-y: auto;

}



.footer {

  height: 10svh; /* 保证始终可见 */

}

单位解析：

✅ 实践总结

水合错误规避策略

CSS优先架构优势

实施路线图：

通过现代CSS技术栈，开发者可在避免水合错误的同时，构建高性能、可访问性强的Web应用，实现真正的"渐进式Web体验"。

原文：xuanhu.info/projects/it…

instanceof 运算符用于检测某个构造函数的 prototype 属性，是否存在于对象的原型链上。

class Cat {

    constructor(name, age) {

        this.name = name;

        this.age = age;

    }

}



const cat = new Cat("Mittens", 3);



console.log(cat instanceof Cat); // true

console.log(cat instanceof Object); // true

instanceof 接收两个参数，v(左)和target(右)，判断v是否为target的实例对象，方法是先查询target的Symbol.hasInstance属性，如果不存在，则判断target的prototype属性是否存在v的原型中。

class Cat {



    static [Symbol.hasInstance](instance) {

        return false

    }



    constructor(name, age) {

        this.name = name;

        this.age = age;

    }

}



const cat = new Cat("Mittens", 3);



console.log(cat instanceof Cat); // false

console.log(cat instanceof Object); // true

console.log(cat instanceof null) // TypeError: Right-hand side of 'instanceof' is not an object

或许有人会想到1 intanceof Number和1 intanceof Object为什么会是false呢？明明(1).__proto__是有值的，为什么呢？这里就不得不提到JS的一个机制"自动装箱"。

我们定义一个变量const n = 1, n是一个原始值，有以下特点：

• 不可变性：原始值本身不能被修改，任何"修改"操作都会创建新值


• 按值传递：赋值时复制值，而不是引用


• 没有属性和方法：原始值本身不是对象，不能直接拥有属性和方法

在访问原始值属性或者方法时，Js会创建一个临时对象，使用后便会销毁。

const n = 1;

n.toString()



// JavaScript 内部实际执行的过程 

// 1. 创建临时 Number 对象：new Number(1) 

// 2. 调用方法：numberObj.toString() 

// 3. 返回结果："1" 

// 4. 销毁临时对象

但是在intanceof操作时，不会进行"自动装箱"，所以得到的结果为false。

一个有趣的效果--动态生成动画导航

在接下来的这个项目中，我们即将使用纯 JavaScript 和 CSS 来创建一个具有动态动画效果的导航栏。这篇文章将详细解析该代码的实现，包括 HTML 结构、CSS 样式、JavaScript 逻辑等方面，帮助你理解每一个步骤和实现思路。文章内容将逐步拆解，涵盖从页面结构、样式设计到功能实现的各个细节。

项目概述

这个项目的核心目标是创建一个包含动画效果的导航栏。具体功能包括：

HTML 结构

HTML 基本框架

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>一个动态动画导航</title>

    <style>

        /* 样式在这里 */

    </style>

</head>



<body>

    <script>

        /* JavaScript 逻辑在这里 */

    </script>

</body>



</html>

HTML 文档是非常标准的结构，包含了 head 和 body 两大部分：

导航栏元素

在页面的 body 中，我们没有直接放置导航栏的 HTML 代码，而是通过 JavaScript 动态生成。接下来我们将深入分析这些 JavaScript 代码的工作原理。

CSS 样式解析

全局样式

body, html, ul, p {

    margin: 0;

    padding: 0;

}

这一段代码是用来移除 body、html、ul 和 p 元素的默认 margin 和 padding，以确保布局没有多余的间隙。这是前端开发中的常见做法，有助于在不同浏览器中获得一致的效果。

导航栏 .nav

.nav {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    position: relative;

    margin-left: 200px;

}

.nav 是一个容器元素，负责展示导航栏中的各个导航项。它使用了 flex 布局，使得每个 li 元素可以水平排列。此外，通过 position: relative 来为可能添加的子元素（如下拉面板）提供定位上下文，margin-left: 200px 是为了给导航栏留出空间。

导航项 .nav li

.nav li {

    min-width: 100px;

    text-align: center;

    border-bottom: 1px solid #ddd;

    color: #535455;

    padding: 12px;

    margin-right: 12px;

    cursor: pointer;

    transition: all ease 0.2s;

}

每个导航项 (li) 有如下样式：

• min-width: 100px：确保每个项至少占据 100px 宽度。


• text-align: center：使文本居中显示。


• border-bottom: 1px solid #ddd：为每个导航项添加一个细线，增强视觉效果。


• padding: 12px 和 margin-right: 12px：设置内外边距，使项之间保持一定的间距。


• cursor: pointer：当鼠标悬停在导航项上时，显示为可点击的手形光标。


• transition: all ease 0.2s：使所有样式变化（如颜色、背景色、缩放等）具有过渡效果，持续时间为 0.2 秒，效果为平滑过渡。

面板 .nav-panel-wrapper

.nav-panel-wrapper {

    border: 1px solid #dedede;

    position: absolute;

    top: 60px;

    left: 0;

    padding: 12px;

    border-radius: 4px;

    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.32);

    display: none;

    overflow: hidden;

}

.nav-panel-wrapper 是每个导航项的下拉面板，包含以下样式：

• position: absolute：使面板相对于 .nav 容器进行绝对定位。


• top: 60px：将面板放置在导航项下方（假设导航栏的高度为 60px）。


• border-radius: 4px：为面板添加圆角，使其看起来更加圆滑。


• box-shadow：为面板添加阴影效果，使其更加立体，增加视觉层次感。


• display: none：面板默认是隐藏的，只有在用户悬停时才会显示。


• overflow: hidden：确保面板内容不会溢出其容器。

动画样式

.scale-up-top {

    animation: scale-up-top 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;

}



@keyframes scale-up-top {

    0% {

        transform: scale(0.5);

        transform-origin: 50% 0%;

    }

    100% {

        transform: scale(1);

        transform-origin: 50% 0%;

    }

}

.scale-up-top 类通过动画效果使面板从小到大逐渐放大，并且设置了动画的持续时间为 0.2 秒，使用了 cubic-bezier 函数来创建缓动效果。@keyframes scale-up-top 定义了放大过程的具体动画帧：从 50% 的缩放大小（即最小状态）逐渐过渡到 100%（即原始大小）。

JavaScript 逻辑解析

工具类 AnimateNavUtils

AnimateNavUtils 是一个工具类，提供了一些常用的方法，简化了 DOM 操作的代码：

• $：根据选择器返回文档中的第一个匹配元素。


• createElement：根据传入的 HTML 字符串创建一个新的 DOM 元素。


• addClass、removeClass、hasClass：分别用于为元素添加、移除、检查 CSS 类。


• insertNode：将一个新的节点插入到指定的元素中，或者替换现有节点。


• create：创建一个新的 DOM 元素节点。


• setStyle：为元素动态设置样式。

这些工具方法大大简化了后续类的实现，使得代码更具可读性和复用性。

动画导航类 AnimateNav

AnimateNav 类是核心部分，负责处理导航栏的渲染、事件绑定和面板的动画效果。

构造函数

constructor({ data }) {

    super();

    this.data = data;

    this.panelDelayTimer = null;

    this.currentIndex = 0;

    this.panelEle = null;

    this.navEle = null;

}

在构造函数中，我们接收一个 data 参数，它是一个包含导航项信息的数组。panelDelayTimer 用来控制面板的显示延迟，currentIndex 用来记录当前导航项的索引，panelEle 和 navEle 分别存储面板和导航栏的 DOM 元素引用。

mount 方法

mount(el) {

    const container = this.isString(el) ? this.$(el) : document.body;

    this.render(container);

}

mount 方法负责将导航栏挂载到指定的 DOM 元素中。如果传入的参数是一个字符串（例如选择器），则查找对应的元素；如果是其他类型，则默认为 document.body。

render 方法

render(container) {

    if (!this.isArray(this.data) || this.data?.length === 0) {

        return;

    }

    const node = this.createElement(`

        <ul class="nav">

            ${this.data.map(item => `<li data-sub="${item.sub}" data-index="${item.index}" class="nav-item">${item.text}</li>`).join('')}

            <div class="nav-panel-wrapper"> </div>

        </ul>

    `);

    ...

}

render 方法负责生成导航栏的 HTML 结构并将其插入到页面中。它首先检查 data 是否有效，确保它是一个数组且非空。接着，它动态创建一个包含 <ul class="nav"> 和 <div class="nav-panel-wrapper"> 的 HTML 结构。

• data.map(item => ...) 生成每个导航项的 <li> 元素，并根据 data-sub 和 data-index 设置相应的自定义属性。


• this.navEle 和 this.panelEle 分别存储了导航栏容器和面板容器的 DOM 元素引用，方便后续操作。


• 最后，调用 bindEvents 方法来绑定事件处理器。

绑定事件 bindEvents

bindEvents() {

    const items = Array.from(this.navEle.querySelectorAll('.nav-item'));

    items.forEach(item => {

        item.addEventListener('mouseenter', (e) => {

            const index = e.target.dataset.index;

            this.showPanel(index);

        });



        item.addEventListener('mouseleave', () => {

            this.hidePanel();

        });

    });

}



showPanel(index) {

    const item = this.navEle.querySelector(`[data-index="${index}"]`);

    const subItems = item.getAttribute('data-sub');

    this.panelEle.innerHTML = subItems ? subItems : '没有子项';

    this.addClass(this.panelEle, 'scale-up-top');

    this.setStyle(this.panelEle, {

        display: 'block',

        top: `${item.offsetTop + item.offsetHeight + 12}px`

    });

}



hidePanel() {

    this.removeClass(this.panelEle, 'scale-up-top');

    this.setStyle(this.panelEle, { display: 'none' });

}

在 bindEvents 方法中，我们为每个导航项添加了 mouseenter 和 mouseleave 事件监听器：

• mouseenter：当鼠标进入某个导航项时，调用 showPanel 方法显示对应的面板，并填充子项内容。


• mouseleave：当鼠标离开导航项时，调用 hidePanel 隐藏面板。

showPanel 方法

showPanel(index) {

    const item = this.navEle.querySelector(`[data-index="${index}"]`);

    const subItems = item.getAttribute('data-sub');

    this.panelEle.innerHTML = subItems ? subItems : '没有子项';

    this.addClass(this.panelEle, 'scale-up-top');

    this.setStyle(this.panelEle, {

        display: 'block',

        top: `${item.offsetTop + item.offsetHeight + 12}px`

    });

}

showPanel 方法根据导航项的索引 (data-index) 显示相应的子项。如果该项有子项（存储在 data-sub 属性中），则将这些子项填充到面板中。如果没有子项，则显示默认的消息（'没有子项'）。然后，通过 scale-up-top 动画类使面板执行放大动画，并将面板的显示位置设为导航项的下方。

hidePanel 方法

hidePanel() {

    this.removeClass(this.panelEle, 'scale-up-top');

    this.setStyle(this.panelEle, { display: 'none' });

}

hidePanel 方法用于隐藏面板。它会移除面板的动画类 scale-up-top，并通过 setStyle 将面板的 display 属性设置为 none，使其消失。

总结

动画和交互效果

来看一个在线示例如下所示:

当然这个导航还有可以优化和扩展的空间，如下:

优化和扩展

整体来说，这个动态导航效果是通过结合 JavaScript 的 DOM 操作和 CSS 动画来实现的，结构清晰，动画流畅，能够为用户提供良好的互动体验。

作为一个信奉代码逻辑的程序员，我做梦也没想到有一天会让AI帮我开发算命网站。

事情是这样的：某天深夜，我突然冒出一个奇葩想法——能不能让Claude Code从零开始搭建一个算命网站？ 不是因为我迷信，而是纯粹的技术好奇心：AI能理解2000年前的玄学智慧吗？

于是我开始了这个"用最现代的技术实现最古老的智慧"的实验。

3天后，网站上线了。更神奇的是，AI对传统文化的理解程度让我这个中国人都自愧不如。

选技术栈：AI的选择让我怀疑人生

我本来打算用熟悉的Vue + Express一把梭，结果Claude Code一开口就让我重新审视了自己的技术认知。

我问它："帮我选个适合算命网站的技术栈"

它的回答让我直接傻眼：

Next.js 14 + TypeScript。我说算命网站用TypeScript？它说："天干地支计算出错了用户会骂死你的，类型安全不是开玩笑的。"我一想，确实，算错了八字那不是要被用户打死。

Supabase。我说为什么不用MongoDB？它说："用户算命记录要能实时同步，万一用户换个设备要查看历史记录呢？"行吧，你考虑得比我周到。

DeepSeek API。这个真的让我意外，我下意识想用GPT，结果它说："中文传统文化，还是国产模型理解得更地道。"后来的事实证明，这个选择太明智了。

最让我佩服的是，它还主动提到了"真太阳时计算"。我当时就懵了，什么是真太阳时？它耐心地给我科普：古代算命要考虑地理位置对时间的影响，不是简单的北京时间。

我心想，这AI对传统文化的理解比我这个中国人还深入啊。

给自己算了一下还是挺满意的

教AI算命：一场智商与玄学的较量

项目最大的难点不是写代码，而是怎么让一个理性的AI理解玄学。

这就像让一个直男理解女朋友的小情绪，难度系数直接拉满。

第一次尝试，我直接甩给AI一个八字："帮我分析一下甲子年乙丑月丙寅日丁卯时"

AI的回答让我哭笑不得："这位朋友可能具有较强的时间观念，因为你的出生时间很规律..."

我当场就想关电脑了。这哪里是算命，这是在分析数据规律啊！

第二次，我学聪明了，告诉它"你是命理大师"。结果它开始发挥想象力，创造了一套"六行理论"，除了传统五行还加了个"气行"。我差点被它的创新精神感动。

第三次，我痛定思痛，决定从根本上改变策略。我不再把它当AI，而是真的把它当成一个有30年经验的老师傅。我给它详细介绍了传统命理的理论体系，告诉它什么能说，什么不能说，甚至教它怎么说话。

这次它终于开窍了，分析起来有模有样，专业术语用得恰到好处，建议也很中肯。

我突然意识到，训练AI就像带徒弟，不是给它知识，而是教它思考方式。

踩坑实录：当代码遇见玄学，bug都变得玄幻了

做这个项目让我深刻体会到什么叫"传统文化博大精深"，每个看似简单的概念背后都藏着巨大的坑。

最让我头疼的是时辰计算。我原本以为很简单，23点到1点是子时嘛，结果Claude Code告诉我："古代的时辰划分和现代时间概念不完全一样，而且要考虑地理位置。"

我当时就懵了，算个命还要考虑地理位置？后来才知道，古人用的是"真太阳时"，北京的中午12点和新疆的中午12点，太阳位置是不一样的。

这就好比你以为做个网站用个时间戳就行了，结果发现还要处理时区、夏令时、闰秒...程序员的痛，古人早就体验过了。

还有一个哭笑不得的bug。AI在分析五行的时候，突然开始"创新"，告诉用户发现了"六行理论"，除了金木水火土，还有个"气行"。我当时想，你这是要颠覆传统文化吗？

后来我在提示词里加了一句"严格按照传统理论，不要创新"，AI这才老实下来。

最隐蔽的坑是日期计算。现代JavaScript处理1900年以前的日期有问题，结果导致古代名人的八字全算错了。我测试的时候用李白的生日，算出来说他五行缺钱...我差点被自己笑死。

每修复一个bug，我都觉得自己对传统文化的理解又深了一层。这感觉很奇妙，就像在用代码穿越时空，和古人对话。

从程序员审美到仙气飘飘

做程序员这么多年，我深知自己的审美水平。我设计的界面通常是这样的：白色背景，黑色字体，偶尔加个边框，完事。

用户打开我设计的网站，第一反应通常是："这...是1990年代的网站吗？"

但算命网站不一样啊，用户来算命，你给他一个Excel表格的界面，他会觉得你在糊弄他。这玩意得有神秘感，得有仙气。

我问Claude Code："怎么让网站看起来有仙气？"

它的回答让我刷新了对UI设计的认知。它告诉我色彩心理学：深紫色代表神秘和智慧，金色代表尊贵和权威，渐变背景能营造空间感...

我听得一愣一愣的，心想这AI怎么还懂心理学？

按照它的建议改了界面后，效果确实不错。原本的Excel风格摇身一变成了"古风仙侠游戏界面"。朋友看了都说："这网站一看就很专业，肯定算得准。"

我当时就想，界面设计真的能影响用户的心理预期。同样的内容，包装不同，用户的信任度完全不一样。

这让我想到另一个问题：在技术驱动的时代，审美能力可能比编程能力更稀缺。会写代码的程序员到处都是，但能设计出让用户一见钟情的界面的，真的不多。

这个布局我很喜欢，但一些ui感觉还可以微调

意外的收获：技术人的文化觉醒

这个项目最大的收获不是技术上的，而是认知上的。

以前我总觉得传统文化和现代技术是两个世界的东西，一个古老神秘，一个理性现代。但做完这个项目后，我发现它们其实是可以融合的。

AI可以学会古老的智慧，代码可以承载文化的传承。技术不是要替代传统，而是要成为传统文化在新时代的载体。

更重要的是，我开始理解用户需求的复杂性。人们使用算命网站，不只是想知道未来会怎样，更多的是希望获得一种心理安慰，一种对未知的控制感。

这让我重新思考技术产品的本质：不是要解决技术问题，而是要解决人的问题。

下一步：用技术重新定义传统

基于这次的经验，我有了一个更大胆的想法：用现代技术重新定义传统文化。

不是简单地把古书电子化，而是用AI、VR、区块链这些新技术，创造全新的文化体验方式。比如用AI生成个性化的《易经》解读，用VR重现古代占卜场景，用区块链记录每个人的文化传承轨迹。

传统文化需要在新时代找到新的表达方式，而技术人恰好有这个能力和责任。

先用three.js写个动画勉强还算满意吧

写在最后：一个程序员的玄学感悟

3天时间，从一个深夜的奇思妙想到一个完整的产品上线。回过头看，这个项目带给我的不只是技术上的提升，更多的是思维上的转变。

最大的感悟是：AI不是工具，而是合作伙伴。它有自己的"想法"，会给你意想不到的建议，会从你没想到的角度解决问题。与其说是我在使用AI，不如说是我们在一起探索未知。

第二个感悟是：用户需求比技术实现更重要。算命网站的核心不是算法有多精确，而是能不能给用户带来心理上的满足。技术是手段，解决人的问题才是目的。

第三个感悟是：传统文化需要新的表达方式。不是要用技术颠覆传统，而是要用技术让传统在新时代重新焕发生机。

如果你也对AI开发感兴趣，我的建议是：不要把AI当成万能的代码生成器，要把它当成一个有智慧的合作伙伴。它能给你灵感，能帮你思考，但最终的判断和决策还是要靠你自己。

最后，如果你也想尝试类似的跨界项目，记住一点：技术栈可以学，算法可以抄，但洞察用户需求的能力，只能靠自己慢慢积累。

下一个项目，还不知道做啥，有想法的朋友可以在评论区说一声

本文基于真实项目开发经验，欢迎技术交流和商业合作！

在查阅 VitePress 具体实践时，我被 UnoCSS 文档中的彩虹动画效果深深吸引。在查看其实现原理之后，本文也将探索如何通过自定义组件和样式增强 VitePress 站点，并实现一个炫酷的彩虹动画效果。

自定义主题

VitePress 允许你通过自定义 Layout 来改变页面的结构和样式。自定义 Layout 可以帮助你更好地控制页面的外观和行为，尤其是在复杂的站点中。

项目初始化

在终端中运行以下命令，初始化一个新的 VitePress 项目：

npx vitepress init

然后根据提示，这次选择自定义主题（Default Theme + Customization）：

┌  Welcome to VitePress!

│

◇  Where should VitePress initialize the config?

│  ./docs

│

◇  Site title:

│  My Awesome Project

│

◇  Site description:

│  A VitePress Site

│

◇  Theme:

│  Default Theme + Customization

│

◇  Use TypeScript for config and theme files?

│  Yes

│

◇  Add VitePress npm scripts to package.json?

│  Yes

│

└  Done! Now run npm run docs:dev and start writing.



Tips:

- Make sure to add  docs/.vitepress/dist and  docs/.vitepress/cache to your .gitignore file.

- Since you've chosen to customize the theme, you should also explicitly install vue as a dev dependency.

注意提示，这里需要额外手动安装 vue 库：

pnpm add vue

自定义入口文件

找到 .vitepress/theme/index.ts 入口文件：

// <https://vitepress.dev/guide/custom-theme>

import { h } from 'vue'

import type { Theme } from 'vitepress'

import DefaultTheme from 'vitepress/theme'

import './style.css'



export default {

  extends: DefaultTheme,

  Layout: () => {

    return h(DefaultTheme.Layout, null, {

      // <https://vitepress.dev/guide/extending-default-theme#layout-slots>

    })

  },

  enhanceApp({ app, router, siteData }) {

    // ...

  }

} satisfies Theme

里面暴露了一个 Layout 组件，这里是通过 h 函数实现的，我们将其抽离成 Layout.vue 组件。

创建自定义 Layout

VitePress 的 Layout 组件是整个网站的骨架，控制了页面的基本结构和布局。通过自定义 Layout，我们可以完全掌控网站的外观和行为。

为什么要自定义 Layout？

• 增加特定的布局元素


• 修改默认主题的行为


• 添加全局组件或功能


• 实现特殊的视觉效果（如我们的彩虹动画）

我们在 .vitepress/theme 文件夹中创建 Layout.vue 组件，并将之前的内容转换成 vue 代码：

<script setup lang="ts">

import DefaultTheme from 'vitepress/theme'

</script>



<template>

  <DefaultTheme.Layout />

</template>

接下来，在 .vitepress/theme/index.ts 中注册自定义 Layout：

// .vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'

import CustomLayout from './Layout.vue'



export default {

  extends: DefaultTheme,

  Layout: CustomLayout,

}

这将会覆盖默认的 Layout，应用你自定义的布局结构。

覆盖原本样式

VitePress 提供了 css 变量来动态修改自带的样式，可以看到项目初始化后在 .vitepress/theme 中有一个 style.css。里面提供了案例，告诉如何去修改这些变量。

同时可以通过该链接查看全部的 VitePress 变量：VitePress 默认主题变量。

VitePress 允许我们通过多种方式覆盖默认样式。最常用的方法是创建一个 CSS 文件，并在主题配置中导入。

比如想设置 name 的颜色，就可以通过：

:root {

  --vp-home-hero-name-color: blue;

}

引入 UnoCSS

UnoCSS 是一个按需生成 CSS 的工具，可以极大简化 CSS 管理，帮助快速生成高效样式。

在项目中安装 UnoCSS 插件：

pnpm add -D unocss

然后，在 vite.config.ts 中配置 UnoCSS 插件：

import UnoCSS from 'unocss/vite'

import { defineConfig } from 'vite'



export default defineConfig({

  plugins: [UnoCSS()],

}

通过 UnoCSS，可以轻松应用样式而无需写冗余 CSS。例如，使用以下类名快速创建按钮样式：

<button class="bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600">

  按钮

</button>

实现彩虹动画

彩虹动画是本文的主角，主要通过动态改变 CSS 变量值来实现色彩的平滑过渡。

定义彩虹动画关键帧

通过 @keyframes，在不同颜色之间平滑过渡，形成彩虹动画效果。创建 rainbow.css 文件：

@keyframes rainbow {

  0% {

    --vp-c-brand-1: #00a98e;

    --vp-c-brand-light: #4ad1b4;

    --vp-c-brand-lighter: #78fadc;

    --vp-c-brand-dark: #008269;

    --vp-c-brand-darker: #005d47;

    --vp-c-brand-next: #009ff7;

  }

  25% {

    --vp-c-brand-1: #00a6e2;

    --vp-c-brand-light: #56cdff;

    --vp-c-brand-lighter: #87f6ff;

    --vp-c-brand-dark: #0080b9;

    --vp-c-brand-darker: #005c93;

    --vp-c-brand-next: #9280ed;

  }

  50% {

    --vp-c-brand-1: #c76dd1;

    --vp-c-brand-light: #f194fa;

    --vp-c-brand-lighter: #ffbcff;

    --vp-c-brand-dark: #9e47a9;

    --vp-c-brand-darker: #772082;

    --vp-c-brand-next: #eb6552;

  }

  75% {

    --vp-c-brand-1: #e95ca2;

    --vp-c-brand-light: #ff84ca;

    --vp-c-brand-lighter: #ffadf2;

    --vp-c-brand-dark: #be317d;

    --vp-c-brand-darker: #940059;

    --vp-c-brand-next: #d17a2a;

  }

  100% {

    --vp-c-brand-1: #00a98e;

    --vp-c-brand-light: #4ad1b4;

    --vp-c-brand-lighter: #78fadc;

    --vp-c-brand-dark: #008269;

    --vp-c-brand-darker: #005d47;

    --vp-c-brand-next: #009ff7;

  }

}



:root {

  --vp-c-brand-1: #00a8cf;

  --vp-c-brand-light: #52cff7;

  --vp-c-brand-lighter: #82f8ff;

  --vp-c-brand-dark: #0082a7;

  --vp-c-brand-darker: #005e81;

  --vp-c-brand-next: #638af8;

  animation: rainbow 40s linear infinite;

}



html:not(.rainbow) {

  --vp-c-brand-1: #00a8cf;

  --vp-c-brand-light: #52cff7;

  --vp-c-brand-lighter: #82f8ff;

  --vp-c-brand-dark: #0082a7;

  --vp-c-brand-darker: #005e81;

  --vp-c-brand-next: #638af8;

  animation: none !important;

}

这段代码定义了彩虹动画的五个关键帧，并将动画应用到根元素上。注意，我们还定义了不带动画的默认状态，这样就可以通过 CSS 类切换动画的启用/禁用。

实现彩虹动画控制组件

接下来，实现名为 RainbowAnimationSwitcher 的组件，其主要逻辑是通过添加或移除 HTML 根元素上的 rainbow 类来控制动画的启用状态，从而实现页面的彩虹渐变效果。

这个组件使用了 @vueuse/core 的两个工具函数：

• useLocalStorage 用于在浏览器本地存储用户的偏好设置


• useMediaQuery 用于检测用户系统是否设置了减少动画

<script lang="ts" setup>

import { useLocalStorage, useMediaQuery } from '@vueuse/core'

import { inBrowser } from 'vitepress'

import { computed, watch } from 'vue'

import RainbowSwitcher from './RainbowSwitcher.vue'



defineProps<{ text?: string; screenMenu?: boolean }>()



const reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)').value



const animated = useLocalStorage('animate-rainbow', inBrowser ? !reduceMotion : true)



function toggleRainbow() {

  animated.value = !animated.value

}



// 在这里对动画做处理

watch(

  animated,

  anim => {

    document.documentElement.classList.remove('rainbow')

    if (anim) {

      document.documentElement.classList.add('rainbow')

    }

  },

  { immediate: inBrowser, flush: 'post' },

)



const switchTitle = computed(() => {

  return animated.value ? 'Disable rainbow animation' : 'Enable rainbow animation'

})

</script>



<template>

  <ClientOnly>

    <div class="group" :class="{ mobile: screenMenu }">

      <div class="NavScreenRainbowAnimation">

        <p class="text">

          {{ text ?? 'Rainbow Animation' }}

        </p>

        <RainbowSwitcher

          :title="switchTitle"

          class="RainbowAnimationSwitcher"

          :aria-checked="animated ? 'true' : 'false'"

          @click="toggleRainbow"

        >

          <span class="i-tabler:rainbow animated" />

          <span class="i-tabler:rainbow-off non-animated" />

        </RainbowSwitcher>

      </div>

    </div>

  </ClientOnly>

</template>



<style scoped>

.group {

  border-top: 1px solid var(--vp-c-divider);

  padding-top: 10px;

  margin-top: 1rem !important;

}



.NavScreenRainbowAnimation {

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-radius: 8px;

  padding: 12px;

  background-color: var(--vp-c-bg-elv);

  max-width: 220px;

}



.text {

  line-height: 24px;

  font-size: 12px;

  font-weight: 500;

  color: var(--vp-c-text-2);

}



.animated {

  opacity: 1;

}



.non-animated {

  opacity: 0;

}



.RainbowAnimationSwitcher[aria-checked='false'] .non-animated {

  opacity: 1;

}



.RainbowAnimationSwitcher[aria-checked='true'] .animated {

  opacity: 1;

}

</style>

其中 RainbowSwitcher 组件是一个简单的开关按钮。以下是其实现：

<template>

  <button class="VPSwitch" type="button" role="switch">

    <span class="check">

      <span v-if="$slots.default" class="icon">

        <slot />

      </span>

    </span>

  </button>

</template>



<style scoped>

.VPSwitch {

  position: relative;

  border-radius: 11px;

  display: block;

  width: 40px;

  height: 22px;

  flex-shrink: 0;

  border: 1px solid var(--vp-input-border-color);

  background-color: var(--vp-input-switch-bg-color);

  transition: border-color 0.25s !important;

}



.check {

  position: absolute;

  top: 1px;

  left: 1px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background-color: var(--vp-c-neutral-inverse);

  box-shadow: var(--vp-shadow-1);

  transition: transform 0.25s !important;

}



.icon {

  position: relative;

  display: block;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  overflow: hidden;

}

</style>

挂载组件

在 .vitepress/theme/index.ts 中，在 enhanceApp 中挂载组件：

// .vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'

import CustomLayout from './Layout.vue'



export default {

  extends: DefaultTheme,

  Layout: CustomLayout,

  enhanceApp({ app, router }) {

    app.component('RainbowAnimationSwitcher', RainbowAnimationSwitcher)

    if (typeof window === 'undefined') return



    watch(

      () => router.route.data.relativePath,

      () => updateHomePageStyle(location.pathname === '/'),

      { immediate: true },

    )

  },

}



// Speed up the rainbow animation on home page

function updateHomePageStyle(value: boolean) {

  if (value) {

    if (homePageStyle) return



    homePageStyle = document.createElement('style')

    homePageStyle.innerHTML = `

    :root {

      animation: rainbow 12s linear infinite;

    }`

    document.body.appendChild(homePageStyle)

  } else {

    if (!homePageStyle) return



    homePageStyle.remove()

    homePageStyle = undefined

  }

}

在导航栏中使用彩虹动画开关

在 .vitepress/config/index.ts 的配置文件中添加彩虹动画开关按钮：

export default defineConfig({

  themeConfig: {

    nav: [

      // 其他导航项...

      {

        text: `v${version}`,

        items: [

          {

            text: '发布日志',

            link: '<https://github.com/yourusername/repo/releases>',

          },

          {

            text: '提交 Issue',

            link: '<https://github.com/yourusername/repo/issues>',

          },

          {

            component: 'RainbowAnimationSwitcher',

            props: {

              text: '彩虹动画',

            },

          },

        ],

      },

    ],

    // 其他配置...

  },

})

这样，彩虹动画开关就成功加载到导航栏的下拉菜单中。

彩虹动画效果

如果想查看具体效果，可查看 EasyEditor 的文档。其中关于彩虹动画效果的详细实现看，可以查看内部对应的代码：EasyEditor/docs/.vitepress/theme at main · Easy-Editor/EasyEditor。

在React中使用Vant组件库的指南

Vant是一套轻量、可靠的移动端组件库，特别适合在React项目中使用。本文将详细介绍如何在React项目中集成和使用Vant组件库，并通过Button按钮和NavBar导航栏等常用组件作为示例，展示其基本用法和高级特性。

一、Vant简介与安装

1.1 Vant是什么

Vant是由有赞前端团队开发的一套基于Vue的移动端组件库，后来也推出了React版本(Vant React)。它提供了60+高质量组件，覆盖了移动端开发的大部分场景，具有以下特点：

• 性能极佳：组件经过精心优化，运行流畅


• 样式美观：遵循统一的设计语言，视觉效果出色


• 功能丰富：提供大量实用组件和灵活配置


• 文档完善：中文文档详细，示例丰富


• 社区活跃：GitHub上star数高，问题响应快

1.2 安装Vant

在React项目中使用Vant前，需要先安装它。确保你已经创建了一个React项目（可以使用create-react-app或其它脚手架工具），然后在项目目录下执行：

bash

npm install vant --save

# 或者使用yarn

yarn add vant

1.3 引入组件样式

Vant的样式文件需要单独引入。推荐在项目的入口文件（通常是src/index.js或src/App.js）中添加以下代码：

jsx

import 'vant/lib/index.css';

这一步非常重要，否则组件将没有样式效果。

二、Button按钮组件使用详解

Button是Vant中最基础也是最常用的组件之一，下面详细介绍它的使用方法。

2.1 基本用法

首先引入Button组件：

jsx

import { Button } from 'vant';

然后在你的组件中使用：

jsx

function MyComponent() {

  return (

    <div>

      <Button type="primary">主要按钮</Button>

      <Button type="info">信息按钮</Button>

      <Button type="default">默认按钮</Button>

    </div>

  );

}

2.2 按钮类型

Vant提供了多种按钮类型，通过type属性来设置：

• primary: 主要按钮，蓝色背景


• success: 成功按钮，绿色背景


• danger: 危险按钮，红色背景


• warning: 警告按钮，橙色背景


• default: 默认按钮，灰色背景


• info: 信息按钮，浅蓝色背景

jsx

<Button type="success">成功按钮</Button>

<Button type="danger">危险按钮</Button>

<Button type="warning">警告按钮</Button>

2.3 按钮形状

除了类型，还可以设置按钮的形状：

• 方形按钮（默认）


• 圆形按钮：添加round属性


• 圆角按钮：添加square属性

jsx

<Button round>圆形按钮</Button>

<Button square>圆角按钮</Button>

2.4 按钮尺寸

Vant提供了三种尺寸的按钮：

• 大号按钮：size="large"


• 普通按钮（默认）


• 小号按钮：size="small"


• 迷你按钮：size="mini"

jsx

<Button size="large">大号按钮</Button>

<Button size="small">小号按钮</Button>

<Button size="mini">迷你按钮</Button>

2.5 按钮状态

按钮有不同的状态，可以通过以下属性控制：

• 禁用状态：disabled


• 加载状态：loading


• 朴素按钮：plain（边框样式）

jsx

<Button disabled>禁用按钮</Button>

<Button loading>加载中...</Button>

<Button plain>朴素按钮</Button>

2.6 按钮图标

可以在按钮中添加图标，使用icon属性：

jsx

import { Icon } from 'vant';



<Button icon="plus">添加</Button>

<Button icon="search">搜索</Button>

<Button icon={<Icon name="like" />}>点赞</Button>

Vant内置了大量图标，可以在官方文档中查看所有可用图标。

2.7 按钮事件

按钮最常用的就是点击事件：

jsx

function handleClick() {

  console.log('按钮被点击了');

}



<Button onClick={handleClick}>点击我</Button>

三、NavBar导航栏组件使用详解

NavBar是移动端常用的顶部导航栏组件，下面详细介绍它的使用方法。

3.1 基本用法

首先引入NavBar组件：

jsx

import { NavBar } from 'vant';

然后在你的组件中使用：

jsx

function MyComponent() {

  return (

    <NavBar

      title="标题"

      leftText="返回"

      rightText="按钮"

      leftArrow

    />

  );

}

3.2 主要属性

NavBar组件的主要属性包括：

• title: 导航栏标题


• leftText: 左侧文字


• rightText: 右侧文字


• leftArrow: 是否显示左侧箭头


• fixed: 是否固定在顶部


• placeholder: 是否生成一个等高的占位元素（配合fixed使用）


• border: 是否显示下边框


• zIndex: 设置z-index

jsx

<NavBar

  title="个人中心"

  leftText="返回"

  rightText="设置"

  leftArrow

  fixed

  placeholder

  border

  zIndex={100}

/>

3.3 自定义内容

除了使用属性，还可以通过插槽自定义导航栏内容：

jsx

<NavBar>

  <template #left>

    <Icon name="arrow-left" /> 返回

  </template>

  <template #title>

    <span style={{ color: 'red' }}>自定义标题</span>

  </template>

  <template #right>

    <Icon name="search" />

    <Icon name="more-o" style={{ marginLeft: '10px' }} />

  </template>

</NavBar>

3.4 事件处理

NavBar组件提供了以下事件：

• click-left: 点击左侧区域时触发


• click-right: 点击右侧区域时触发

jsx

function handleClickLeft() {

  console.log('点击了左侧');

  // 通常用于返回上一页

  // history.goBack();

}



function handleClickRight() {

  console.log('点击了右侧');

  // 可以打开设置页面等

}



<NavBar

  title="事件示例"

  leftText="返回"

  rightText="设置"

  leftArrow

  onClickLeft={handleClickLeft}

  onClickRight={handleClickRight}

/>

3.5 配合路由使用

在实际项目中，NavBar通常需要配合路由使用：

jsx

import { useNavigate } from 'react-router-dom';



function MyComponent() {

  const navigate = useNavigate();

  

  const handleBack = () => {

    navigate(-1); // 返回上一页

  };

  

  const handleToSettings = () => {

    navigate('/settings'); // 跳转到设置页

  };

  

  return (

    <NavBar

      title="路由示例"

      leftText="返回"

      rightText="设置"

      leftArrow

      onClickLeft={handleBack}

      onClickRight={handleToSettings}

    />

  );

}

四、高级用法与注意事项

4.1 主题定制

Vant支持主题定制，可以通过CSS变量来修改主题样式。在项目的全局CSS文件中添加：

css

:root {

  --van-primary-color: #ff6a00; /* 修改主题色为橙色 */

  --van-border-radius: 8px; /* 修改圆角大小 */

  --van-nav-bar-height: 60px; /* 修改导航栏高度 */

}

更多可定制的CSS变量可以参考官方文档。

4.2 按需引入

如果担心引入全部组件会增加包体积，可以使用按需引入的方式。首先安装babel插件：

bash

npm install babel-plugin-import --save-dev

然后在babel配置中添加：

json

{

  "plugins": [

    ["import", {

      "libraryName": "vant",

      "libraryDirectory": "es",

      "style": true

    }, "vant"]

  ]

}

之后就可以按需引入组件了：

jsx

import { Button, NavBar } from 'vant';

这种方式只会打包你实际使用的组件，可以有效减小最终打包体积。

4.3 国际化支持

Vant支持多语言，可以通过LocaleProvider组件设置：

jsx

import { LocaleProvider, Button } from 'vant';

import enUS from 'vant/es/locale/lang/en-US';



function App() {

  return (

    <LocaleProvider locale={enUS}>

      <Button>Submit</Button>

    </LocaleProvider>

  );

}

4.4 常见问题与解决方案

五、总结

通过合理使用Vant组件库，可以显著提高React移动端应用的开发效率，同时保证UI的一致性和美观性。建议读者在实际项目中多加练习，掌握更多组件的使用方法。

Vant还提供了许多其他实用组件，如Toast轻提示、Dialog弹出框、List列表等，都可以在官方文档中找到详细的使用说明。

transform、translate、transition分别是什么属性，CSS中常用的实现动画方式

在 CSS 中，transform、translate 和 transition 是用于实现元素变换和动画的重要属性。它们各自有不同的作用，通常结合使用可以实现丰富的动画效果。

1. 属性详解

1.1 transform

• 作用：用于对元素进行 2D 或 3D 变换，如旋转、缩放、倾斜、平移等。


• 常用函数：
  
  
  
  • translate(x, y)：平移元素。
  
  
  • rotate(angle)：旋转元素。
  
  
  • scale(x, y)：缩放元素。
  
  
  • skew(x-angle, y-angle)：倾斜元素。
  
  
  • matrix(a, b, c, d, e, f)：定义 2D 变换矩阵。
  
  
  
  


• 示例：
  

  .box {
  
    transform: translate(50px, 100px) rotate(45deg) scale(1.5);
  
  }
  
  

  
  

1.2 translate

• 作用：translate 是 transform 的一个函数，用于平移元素。


• 语法：
  
  
  
  • translate(x, y)：水平方向移动 x，垂直方向移动 y。
  
  
  • translateX(x)：仅水平方向移动。
  
  
  • translateY(y)：仅垂直方向移动。
  
  
  • translateZ(z)：在 3D 空间中沿 Z 轴移动。
  
  
  
  


• 示例：
  

  .box {
  
    transform: translate(50px, 100px);
  
  }
  
  

  
  

1.3 transition

• 作用：用于定义元素在样式变化时的过渡效果。


• 常用属性：
  
  
  
  • transition-property：指定需要过渡的属性（如 all、opacity、transform 等）。
  
  
  • transition-duration：指定过渡的持续时间（如 1s、500ms）。
  
  
  • transition-timing-function：指定过渡的速度曲线（如 ease、linear、ease-in-out）。
  
  
  • transition-delay：指定过渡的延迟时间（如 0.5s）。
  
  
  
  


• 简写语法：
  

  transition: property duration timing-function delay;
  
  

  
  


• 示例：
  

  .box {
  
    transition: transform 0.5s ease-in-out, opacity 0.3s linear;
  
  }
  
  

  
  

2. CSS 中常用的实现动画方式

2.1 使用 transition 实现简单动画

• 适用场景：适用于简单的状态变化动画（如 hover 效果）。


• 示例：
  

  .box {
  
    width: 100px;
  
    height: 100px;
  
    background-color: lightblue;
  
    transition: transform 0.5s ease-in-out;
  
  }
  
  
  
  .box:hover {
  
    transform: scale(1.2) rotate(45deg);
  
  }
  
  

  
  

2.2 使用 @keyframes 和 animation 实现复杂动画

• 适用场景：适用于复杂的多帧动画。


• 步骤：
  
  
  
  1. 使用 @keyframes 定义动画关键帧。
  
  
  2. 使用 animation 属性将动画应用到元素上。
  
  
  
  


• 示例：
  

  @keyframes slideIn {
  
    0% {
  
      transform: translateX(-100%);
  
    }
  
    100% {
  
      transform: translateX(0);
  
    }
  
  }
  
  
  
  .box {
  
    width: 100px;
  
    height: 100px;
  
    background-color: lightblue;
  
    animation: slideIn 1s ease-in-out;
  
  }
  
  

  
  

2.3 使用 transform 和 transition 结合实现交互效果

• 适用场景：适用于用户交互触发的动画（如点击、悬停）。


• 示例：
  

  .box {
  
    width: 100px;
  
    height: 100px;
  
    background-color: lightblue;
  
    transition: transform 0.3s ease-in-out;
  
  }
  
  
  
  .box:active {
  
    transform: scale(0.9);
  
  }
  
  

  
  

2.4 使用 will-change 优化动画性能

• 作用：提前告知浏览器元素将会发生的变化，以优化渲染性能。


• 示例：
  

  .box {
  
    will-change: transform;
  
  }
  
  

  
  

3. 综合示例

示例 1：按钮点击效果

.button {

  padding: 10px 20px;

  background-color: lightblue;

  border: none;

  transition: transform 0.2s ease-in-out;

}



.button:active {

  transform: scale(0.95);

}

示例 2：卡片翻转动画

.card {

  width: 200px;

  height: 200px;

  position: relative;

  perspective: 1000px;

}



.card-inner {

  width: 100%;

  height: 100%;

  transition: transform 0.6s;

  transform-style: preserve-3d;

}



.card:hover .card-inner {

  transform: rotateY(180deg);

}



.card-front, .card-back {

  width: 100%;

  height: 100%;

  position: absolute;

  backface-visibility: hidden;

}



.card-front {

  background-color: lightblue;

}



.card-back {

  background-color: lightcoral;

  transform: rotateY(180deg);

}

示例 3：加载动画

@keyframes spin {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



.loader {

  width: 40px;

  height: 40px;

  border: 4px solid #f3f3f3;

  border-top: 4px solid #3498db;

  border-radius: 50%;

  animation: spin 1s linear infinite;

}

总结

通过灵活运用这些属性和方法，可以实现丰富的动画效果，提升用户体验。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github

在现代网页设计中，动态数字展示能够显著提升用户体验，吸引访客注意力。无论是数据统计、销售数字还是还是评分展示，平滑的数字增长动画都能让信息传递更加生动。CountUp.js 正是一款专门用于创建这种数字动画效果的轻量级 JavaScript 库，本文将详细介绍其使用方法与技巧。

1. 前言

CountUp.js 是一个零依赖的 JavaScript 库，用于创建从一个数字平滑过渡到另一个数字的动画效果。它体积小巧（压缩后仅约 3KB），使用简单，且高度可定制，能够满足各种数字动画需求。

CountUp.js 的特点

• 零依赖，无需引入其他库


• 轻量级，加载迅速


• 高度可配置（动画时长、延迟、小数位数等）


• 支持多种 easing 动画效果


• 支持暂停、恢复、重置等控制


• 兼容所有现代浏览器

2. 快速开始

CountUp.js 有多种引入方式，可根据项目需求选择：

1. 通过 npm 安装

npm install countup.js

然后在项目中导入：

import CountUp from 'countup.js';

2. 直接引入 CDN

<script src="https://cdn.jsdelivr.net/npm/countup.js@2.0.8/dist/countUp.umd.min.js">script>

3. 下载源码

从 GitHub 仓库 下载源码，直接引入本地文件。

2.1. 基本用法

使用 CountUp.js 只需三步：

<div id="counter">div>

2. 初始化 CountUp 实例

一、前言

最近遇到一个需求，微信小程序上传图片添加水印的需求，故此有该文章做总结, 功能涵盖定理地位，百度地址解析，图片四角水印，图片压缩，图片压缩并添加水印，图片剪裁，定位授权，保存图片到相册等

二、效果

三、代码实现核心

3.1）添加水印并压缩
核心实现

// 添加水印并压缩

export function addWatermarkAndCompress(options, that, isCompress = false) {

	return new Promise((resolve, reject) => {

		const {

			errLog,

			config

		} = dealWatermarkConfig(options)



		that.watermarkCanvasOption.width = 0

		that.watermarkCanvasOption.height = 0

		if (!errLog.length) {

			const {

				canvasId,

				imagePath,

				watermarkList,

				quality = 0.6

			} = config



			uni.getImageInfo({ // 获取图片信息，以便获取图片的真实宽高信息

				src: imagePath,

				success: (info) => {

					const {

						width: oWidth,

						height: oHeight,

						type,

						orientation

					} = info; // 获取图片的原始宽高

					const fileTypeObj = {

						'jpeg': 'jpg',

						'jpg': 'jpg',

						'png': 'png',

					}

					const fileType = fileTypeObj[type] || 'png'



					let width = oWidth

					let height = oHeight



					if (isCompress) {

						const {

							cWidth,

							cHeight

						} = calcRatioHeightAndWight({

							oWidth,

							oHeight,

							quality,

							orientation

						})



						// 按对折比例缩小

						width = cWidth

						height = cHeight

					}



					that.watermarkCanvasOption.width = width

					that.watermarkCanvasOption.height = height



					that.$nextTick(() => {

						// 获取canvas绘图上下文

						const ctx = uni.createCanvasContext(canvasId, that);

						// 绘制原始图片到canvas上

						ctx.drawImage(imagePath, 0, 0, width, height);

						// 绘制水印项

						const drawWMItem = (ctx, options) => {

							const {

								fontSize,

								color,

								text: cText,

								position,

								margin

							} = options

							// 添加水印

							ctx.setFontSize(fontSize); // 设置字体大小

							ctx.setFillStyle(color); // 设置字体颜色为红色



							if (isNotEmptyArr(cText)) {

								const text = cText.filter(Boolean)

								if (position.startsWith('bottom')) {

									text.reverse()

								}

								text.forEach((str, ind) => {

									const textMetrics = ctx.measureText(str);

									const {

										calcX,

										calcY

									} = calcPosition({

										height,

										width,

										position,

										margin,

										ind,

										fontSize,

										textMetrics

									})

									ctx.fillText(str, calcX, calcY, width);

								})

							} else {

								const textMetrics = ctx.measureText(cText);



								const {

									calcX,

									calcY

								} = calcPosition({

									height,

									width,

									position,

									margin,

									ind: 0,

									fontSize,

									textMetrics

								})

								// 在图片底部添加水印文字

								ctx.fillText(text, calcX, calcY, width);

							}

						}



						watermarkList.forEach(ele => {

							drawWMItem(ctx, ele)

						})



						// 绘制完成后执行的操作，这里不等待绘制完成就继续执行后续操作，因为我们要导出为图片

						ctx.draw(false, () => {

							// #ifndef MP-ALIPAY

							uni.canvasToTempFilePath({ // 将画布内容导出为图片

								canvasId,

								x: 0,

								y: 0,

								width,

								height,

								fileType,

								quality, // 图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。

								destWidth: width,

								destHeight: height,

								success: (res) => {

									console.log('res.tempFilePath', res)

									resolve(res.tempFilePath)

								},

								fail() {

									reject(false)

								}

							}, that);

							// #endif



							// #ifdef MP-ALIPAY

							ctx.toTempFilePath({ // 将画布内容导出为图片

								canvasId,

								x: 0,

								y: 0,

								width: width,

								height: height,

								destWidth: width,

								destHeight: height,

								quality,

								fileType,

								success: (res) => {

									console.log('res.tempFilePath', res)

									resolve(res.tempFilePath)

								},

								fail() {

									reject(false)

								}

							}, that);

							// #endif 

						});

					})

				}

			});

		} else {

			const errStr = errLog.join(';')

			showMsg(errStr)

			reject(errStr)

		}

	})

}

3.2）剪切图片

// 剪切图片

export function clipImg(options, that) {

	return new Promise((resolve, reject) => {

		const {

			errLog,

			config

		} = dealClipImgConfig(options)



		that.watermarkCanvasOption.width = 0

		that.watermarkCanvasOption.height = 0



		if (!errLog.length) {

			const {

				canvasId,

				imagePath,

				cWidth,

				cHeight,

				position

			} = config



			// 获取图片信息，以便获取图片的真实宽高信息

			uni.getImageInfo({

				src: imagePath,

				success: (info) => {

					const {

						width,

						height

					} = info; // 获取图片的原始宽高



					// 自定义剪裁范围要在图片内

					if (width >= cWidth && height >= cHeight) {



						that.watermarkCanvasOption.width = width

						that.watermarkCanvasOption.height = height

						that.$nextTick(() => {

							// 获取canvas绘图上下文

							const ctx = uni.createCanvasContext(canvasId, that);



							const {

								calcSX,

								calcSY,

								calcEX,

								calcEY

							} = calcClipPosition({

								cWidth,

								cHeight,

								position,

								width,

								height

							})



							// 绘制原始图片到canvas上

							ctx.drawImage(imagePath, 0, 0, width, height);



							// 绘制完成后执行的操作，这里不等待绘制完成就继续执行后续操作，因为我们要导出为图片

							ctx.draw(false, () => {

								// #ifndef MP-ALIPAY

								uni.canvasToTempFilePath({ // 将画布内容导出为图片

									canvasId,

									x: calcSX,

									y: calcSY,

									width: cWidth,

									height: cHeight,

									destWidth: cWidth,

									destHeight: cHeight,

									success: (res) => {

										console.log('res.tempFilePath',

											res)

										resolve(res.tempFilePath)

									},

									fail() {

										reject(false)

									}

								}, that);

								// #endif



								// #ifdef MP-ALIPAY

								ctx.toTempFilePath({ // 将画布内容导出为图片

									canvasId,

									x: 0,

									y: 0,

									width: width,

									height: height,

									destWidth: width,

									destHeight: height,

									// fileType: 'png',

									success: (res) => {

										console.log('res.tempFilePath',

											res)

										resolve(res.tempFilePath)

									},

									fail() {

										reject(false)

									}

								}, that);

								// #endif 

							});

						})

					} else {

						return imagePath

					}

				}

			})



		} else {

			const errStr = errLog.join(';')

			showMsg(errStr)

			reject(errStr)

		}

	})

}

3.3）canvas画布标签

		<!-- 给图片添加的标签 -->

		<canvas v-if="watermarkCanvasOption.width > 0 && watermarkCanvasOption.height > 0"

			:style="{ width: watermarkCanvasOption.width + 'px', height: watermarkCanvasOption.height + 'px' }"

			canvas-id="watermarkCanvas" id="watermarkCanvas" style="position: absolute; top: -10000000rpx;" />