1. 首页
  2. 分类
  3. 前端技术
推荐开源项目：jQuery.barrager.js - 专业网页弹幕插件
System
2024-08-13
所有,jquery

jQuery.barrager.js 是一个用于创建网页弹幕的 jQuery 插件。以下是如何使用该插件的示例代码：

首先，确保在您的 HTML 文档中包含了 jQuery 库和 barrager 插件的脚本：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Barrager Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path/to/jQuery.barrager.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #barrager-container {
            width: 100%;
            height: 100%;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="barrager-container"></div>
 
    <script>
        $(function() {
            $('#barrager-container').barrager({
                // 配置弹幕的参数
                content: '这是一条弹幕测试信息',
                color: 'green',
                fontSize: 16,
                speed: 6 // 单位: s
            });
        });
    </script>
</body>
</html>

在上述代码中，我们首先引入了 jQuery 和 jQuery.barrager.js 插件。然后，我们定义了一个样式表确保弹幕容器可以覆盖整个页面。在 <script> 标签内，我们初始化了 barrager 插件，并通过一组选项定义了弹幕的内容、颜色、字体大小和速度。这将创建并显示一个从上到下的弹幕。

- 阅读更多 -
Vue 3中的v-for指令使用详解
System
2024-08-13
所有,vue.js



<template>
  <div>
    <!-- 使用v-for遍历items数组，同时使用v-slot接收子组件提供的数据 -->
    <ChildComponent v-for="(item, index) in items" :key="item.id" v-slot="{ msg }">
      <!-- 在template中显示数据和插槽内容 -->
      <div>{{ index }}: {{ item.name }} - {{ msg }}</div>
    </ChildComponent>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        // ...更多items
      ]
    };
  }
};
</script>

在这个例子中，我们使用v-for指令来遍历items数组，并为每个元素渲染ChildComponent组件的实例。v-slot被用来接收来自子组件的数据，并在父组件的模板中展示出来。这个例子展示了如何在Vue 3中使用v-for和v-slot来创建动态列表和插槽内容。

- 阅读更多 -
小程序引用第三方JS
System
2024-08-13
所有,javascript

在小程序中引用第三方JavaScript库，通常需要遵循以下步骤：

  1. 选择或下载第三方库。
  2. 将第三party库的JavaScript代码放入小程序项目中。
  3. 在小程序的代码中正确引用这些库。

以下是一个简单的例子，假设你想在小程序中使用lodash这个第三方库：

  1. 首先，在小程序项目中的utils或者common文件夹下新建一个lodash.js文件。
  2. 将lodash的代码复制到这个新文件中。你可以从lodash的NPM页面或者GitHub仓库中获取最新的代码。
  3. 在需要使用lodash的页面或组件的JavaScript文件中，使用require或import语句引入lodash.js。

例如，使用ES6的import语法：




// 引入lodash
import _ from 'lodash.js';
 
// 使用lodash的函数
let array = [1, 2, 3, 4, 5];
let shuffled = _.shuffle(array);
 
console.log(shuffled);

请注意，由于小程序的运行环境限制，并非所有JavaScript库都可以在小程序中直接使用，有些库可能需要特定的构建过程或者修改后才能在小程序中运行。

- 阅读更多 -
android，ios配置scheme，react-native获取url
System
2024-08-13
所有,react native

在Android和iOS中配置scheme并在React Native中获取URL通常涉及以下步骤：

  1. 在Android中配置scheme：

    编辑 android/app/src/main/AndroidManifest.xml 文件，添加或修改 <activity> 标签，添加 <intent-filter> 来指定scheme：




<activity>
    ...
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="yourscheme" />
    </intent-filter>
    ...
</activity>

  1. 在iOS中配置scheme：

    打开 ios/<YourProjectName>/Info.plist 文件，添加 CFBundleURLTypes 字段：




<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yourscheme</string>
        </array>
    </dict>
</array>

  1. 在React Native中获取URL：

    使用 Linking API 来监听应用启动时的深度链接：




import { Linking } from 'react-native';
 
Linking.getInitialURL().then((url) => {
  if (url) {
    console.log('Initial URL is:', url);
  }
});
 
Linking.addEventListener('url', (event) => {
  const { url } = event;
  console.log('Got a URL:', url);
});

确保在应用的 AppRegistry.registerComponent 调用之后添加上述监听代码。

- 阅读更多 -
jQuery超详细总结
System
2024-08-13
所有,jquery

jQuery是一个快速、简洁的JavaScript框架，它使得HTML文档的遍历和操作、事件处理、动画和Ajax交互等变得更加简单，并且它对不同浏览器的兼容性好，使用广泛。

  1. 选择元素

jQuery中用于选择HTML元素的基本语法是：$(selector)。




$("p") //选取所有的p元素
$("p.intro") //选取所有class为intro的p元素
$("p#demo") //选取id为demo的p元素
  1. 事件

jQuery中提供了许多事件处理方法，例如：click()，hover()，focus()等。




$("p").click(function(){
  // 动作
});
 
$("p").hover(function(){
  // 鼠标进入
}, function(){
  // 鼠标离开
});
  1. 效果

jQuery提供了许多内置的动画方法，例如：hide()，show()，fadeIn()，fadeOut()，slideDown()，slideUp()等。




$("p").hide(); //隐藏p元素
$("p").show(); //显示p元素
$("p").fadeIn(); //淡入p元素
$("p").fadeOut(); //淡出p元素
$("p").slideDown(); //下滑p元素
$("p").slideUp(); //上滑p元素
  1. AJAX

jQuery中的$.ajax()，$.get()，$.post()方法可以用于AJAX请求。




$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});
 
$.get("test.html", function(data){
  // 当请求成功后要执行的代码
  alert("Data Loaded: " + data);
});
 
$.post("test.php", { name: "John", time: "2pm" })
  .done(function(data){
    alert("Data Loaded: " + data);
});
  1. 链式调用

jQuery允许我们将多个函数连接在一起，每个函数都是对前一个返回的jQuery对象进行操作。




$("p").hide().slideUp(300); // 先隐藏，然后上滑
  1. 事件委托

jQuery中的.on()方法可以用于事件委托，即将事件绑定到未来的元素上。




$("body").on("click", "p", function(){
  // 动作
});
  1. 使用jQuery插件

jQuery有大量的插件，例如，jQuery UI，jQuery Mobile，DataTables等，可以用于增强网页功能。




$("#myDiv").draggable(); // 使div可拖动
$("#myTable").dataTable(); // 为表格添加排序和搜索功能
  1. 使用jQuery创建动态内容

jQuery可以用于动态创建HTML元素。




$("<p></p>").text("Hello, world!").appendTo("body"); // 创建并添加到body
  1. 处理表单

jQuery提供了一些方法来处理表单，例如：.val()，.serialize()等。




$("input").val(); // 获取input的值
$("form").serialize(); // 序列化表单
  1. 更多

jQuery还有很多其他的功能，例如：attr()，css()，each()等，这里只列出了一部分常用的功能。

- 阅读更多 -
Flutter 初识：按钮控件
System
2024-08-13
所有,flutter

在Flutter中，按钮控件是通过RaisedButton、FlatButton、OutlineButton、IconButton、ButtonBar、FloatingActionButton等类提供的。以下是每种按钮的简单示例：

  1. RaisedButton：这是一个Material Design风格的带有凸凹效果的按钮。



RaisedButton(
  child: Text('点击我'),
  onPressed: () {
    print('按钮被点击');
  },
)
  1. FlatButton：这是一个Material Design风格的平面按钮。



FlatButton(
  child: Text('点击我'),
  onPressed: () {
    print('按钮被点击');
  },
)
  1. OutlineButton：这是一个带有轮廓的按钮。



OutlineButton(
  child: Text('点击我'),
  onPressed: () {
    print('按钮被点击');
  },
)
  1. IconButton：这是一个用于显示图标的按钮。



IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    print('喜欢');
  },
)
  1. ButtonBar：这是一个水平排列的按钮组。



ButtonBar(
  children: <Widget>[
    RaisedButton(
      child: Text('按钮1'),
      onPressed: () { print('按钮1被点击'); },
    ),
    RaisedButton(
      child: Text('按钮2'),
      onPressed: () { print('按钮2被点击'); },
    ),
  ],
)
  1. FloatingActionButton：这是一个浮动的操作按钮，通常位于屏幕右下角。



FloatingActionButton(
  child: Icon(Icons.add),
  onPressed: () {
    print('添加');
  },
)

每个按钮都需要一个onPressed回调函数，该函数定义了按钮被点击时的行为。如果onPressed为null，则按钮会显示为禁用状态，不会响应用户的点击事件。

- 阅读更多 -
React学习5（组件实例三大核心之ref）
System
2024-08-13
所有,react native

在React中，ref是一种在组件内部获取DOM节点或者其他组件实例的方法。通过使用ref属性，可以在组件的ref回调函数中访问到对应的DOM元素或组件实例。

以下是一个使用ref的例子：




import React, { Component } from 'react';
 
class MyComponent extends Component {
  focusInput = () => {
    // 通过ref访问DOM元素
    if (this.inputRef && this.inputRef.current) {
      this.inputRef.current.focus();
    }
  };
 
  render() {
    // 使用ref属性绑定到input元素
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.focusInput}>Focus the input</button>
      </div>
    );
  }
}
 
// 创建ref的引用
MyComponent.prototype.inputRef = React.createRef();
 
export default MyComponent;

在这个例子中，我们创建了一个MyComponent组件，它包含一个文本输入框和一个按钮。点击按钮时，会触发focusInput方法，该方法通过ref访问输入框并使其获得焦点。

注意，从React 16.3开始，推荐使用createRef来创建ref引用，而不是使用回调函数。这种方式更加简洁和符合现代React的风格。

- 阅读更多 -
React+antDesign实现上传图片功能(类组件)
System
2024-08-13
所有,react native



import React from 'react';
import { Upload, message, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
 
class ImageUpload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imageUrl: '',
    };
  }
 
  handleChange = info => {
    if (info.file.status === 'uploading') {
      return;
    }
    if (info.file.status === 'done') {
      // 获取上传成功后的图片链接
      this.setState({ imageUrl: info.file.response.url });
      message.success(`图片上传成功`);
      if (this.props.onChange) {
        this.props.onChange(info.file.response.url);
      }
    }
  }
 
  render() {
    const { imageUrl } = this.state;
 
    const uploadButton = (
      <Button icon={<UploadOutlined />} href="#">
        上传图片
      </Button>
    );
 
    return (
      <Upload
        name="avatar"
        listType="picture-card"
        className="image-upload"
        showUploadList={false}
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76" // 替换为你的图片上传API
        onChange={this.handleChange}
      >
        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
      </Upload>
    );
  }
}
 
export default ImageUpload;

这段代码实现了一个简单的图片上传功能，用户可以点击上传按钮选择图片，图片会被上传到指定的API，并在上传成功后展示图片。此外，它还包含了错误处理和状态管理，以确保用户界面能够正确反映当前的状态。

- 阅读更多 -
react路由01——react-routerV6 中路由传递参数的几种方式
System
2024-08-13
所有,react native

在React Router V6中，可以通过以下几种方式传递参数：

  1. 使用URL参数（动态路由）：



<Route path="user/:id" element={<User />} />

在User组件中，可以使用useParams钩子获取参数：




import { useParams } from 'react-router-dom';
 
function User() {
  let { id } = useParams();
  return <div>User ID: {id}</div>;
}

  1. 使用查询参数（查询字符串）：

    在链接中添加查询参数：




<Link to="/user?id=123">User 123</Link>

在User组件中，可以使用useSearchParams钩子获取参数：




import { useSearchParams } from 'react-router-dom';
 
function User() {
  let [searchParams] = useSearchParams();
  let id = searchParams.get('id');
  return <div>User ID: {id}</div>;
}

  1. 使用状态管理（如Redux或Context API）来传递参数：

    这种方式不依赖于React Router，但可以在组件间共享数据。

  2. 使用state属性在导航时传递参数：



navigate('/user', { state: { id: 123 } });

在User组件中，可以通过location对象获取参数：




import { useLocation } from 'react-router-dom';
 
function User() {
  let location = useLocation();
  let id = location.state?.id;
  return <div>User ID: {id}</div>;
}

以上方法可以根据需求选择适合的方式进行参数传递。

- 阅读更多 -
推荐开源项目：React Native Google Sign In
System
2024-08-13
所有,react native

React Native Google Sign In 是一个为React Native应用程序提供Google登录功能的库。以下是如何使用这个库的一个基本示例：

首先，你需要在你的React Native项目中安装这个库：




npm install react-native-google-signin --save

或者使用yarn：




yarn add react-native-google-signin

接下来，你需要为React Native项目配置Google Sign In。对于iOS，你需要在Xcode中设置URL Scheme；对于Android，你需要在AndroidManifest.xml中设置Client ID。

iOS配置示例：

  1. 在Xcode中，找到你的Info.plist文件。
  2. 添加一个新的URL Types配置。
  3. 设置URL Scheme为你的REVERD\_CLIENT\_ID，例如：com.googleusercontent.apps.${REVERD_CLIENT_ID}。

Android配置示例：

  1. 打开android/app/src/main/AndroidManifest.xml。
  2. 在<application>标签中添加以下元素，将${YOUR_CLIENT_ID}替换为你的Google Sign In Client ID。



<meta-data android:name="com.google.android.gms.google_signin_client_id"
    android:value="${YOUR_CLIENT_ID}"/>

然后，你可以在React Native代码中使用react-native-google-signin库：




import { GoogleSignin } from 'react-native-google-signin';
 
async function signInWithGoogle() {
  try {
    await GoogleSignin.hasPlayServices();
    const userInfo = await GoogleSignin.signIn();
    // 登录成功，可以获取用户信息
    console.log(userInfo);
  } catch (error) {
    if (error.code === statusCodes.SIGN_IN_CANCELLED) {
      // 用户取消登录
      console.log('用户取消登录');
    } else if (error.code === statusCodes.IN_PROGRESS) {
      // 登录进行中
      console.log('登录进行中');
    } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
      // 谷歌服务不可用
      console.log('谷歌服务不可用');
    } else {
      // 其他错误
      console.log('登录失败', error);
    }
  }
}

确保在你的React Native项目中正确处理谷歌登录的状态，并在适当的时候调用signInWithGoogle函数。这个示例假设你已经在你的项目中正确设置了Google Sign In。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号