Tech Blog

2024-08-16

Core Web Vitals (CWV) 是由 Google 提出的，旨在衡量网页的重要动画和交互性能，以提供更好的用户体验。这些指标包括：

Largest Contentful Paint (LCP): 测量最大内容的加载和渲染时间，通常是页面首次开始加载时的视觉内容。
First Input Delay (FID): 测量从用户第一次与页面交互（如点击按钮）到浏览器能够响应下一个输入事件的时间。
Cumulative Layout Shift (CLS): 测量页面加载过程中的视觉跳转，比如图片加载导致的布局变化。

要监控和分析CWV，你可以使用Google Chrome的开发者工具，或者集成Google提供的web API和Google Analytics的插件。

以下是如何使用Google Analytics（分析）追踪CWV的示例代码：




<!DOCTYPE html>
<html>
<head>
  <!-- 引入Google Analytics的追踪代码 -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  </script>
</head>
<body>
  <p>Your webpage content goes here.</p>
</body>
</html>

在这个例子中，你需要将GA_MEASUREMENT_ID替换为你的Google Analytics的追踪ID。这段代码会自动追踪LCP, FID和CLS，并将数据发送到Google Analytics，在那里你可以通过Core Web Vitals面板查看和分析这些数据。

- 阅读更多 -

H5项目如何打包成APP

System

2024-08-16

所有,html5

要将H5项目打包成APP，可以使用以下几种方法：

使用Cordova/PhoneGap：这是一个流行的开源工具，可以将HTML5应用包装成原生应用。
步骤：
- 安装Cordova：npm install -g cordova
- 创建项目：cordova create cordova-h5-app
- 添加平台（例如安卓）：cordova platform add android
- 添加H5项目文件至www目录
- 构建APP：cordova build android
使用Ionic Framework：这是一个基于AngularJS的开源移动UI框架，可以与Cordova/PhoneGap配合使用。
步骤：
- 安装Ionic CLI：npm install -g ionic
- 创建Ionic项目：ionic start myIonicApp tabs
- 将H5项目文件复制到myIonicApp目录中的相应位置
- 构建APP：ionic cordova build android
使用React Native或者Xamarin：这两个工具也可以将H5代码转换为原生APP，但是它们具有不同的学习曲线和技术栈。
使用专业的APP打包服务，如：Appcelerator Titanium、Adobe PhoneGap Build、Appery.io等。
使用自动化工具，如：Apache Cordova Plugin for App Builder，它可以将Web应用程序打包为原生应用。

每种方法都需要一定的时间和精力去学习和掌握，具体使用哪一种取决于你的具体需求和技术背景。

- 阅读更多 -

uniapp 获取图片信息

System

2024-08-16

所有,html5

在uniapp中获取图片信息，可以使用uni.getImageInfo API。以下是一个示例代码，展示了如何获取图片信息并打印到控制台：




uni.getImageInfo({
  // 图片的路径，可以是相对路径也可以是绝对路径
  // 在uni-app中，通常使用绝对路径，如使用网络图片，则为网络图片的URL
  src: 'https://example.com/path/to/image.jpg',
  success: function (imageInfo) {
    console.log(imageInfo);
    // 成功获取图片信息后的操作
  },
  fail: function (error) {
    console.error("获取图片信息失败: ", error);
  }
});

uni.getImageInfo 的 success 回调函数中的 imageInfo 对象包含了图片的宽度、高度、路径等信息。如果图片加载失败或者获取信息失败，则会执行 fail 回调函数。

请确保在调用这个API时已经获取了用户的权限，如果是加载本地文件，还需要确保文件存在且路径正确。如果是网络图片，请确保网络请求是正常的，并且图片的URL是可以访问的。

- 阅读更多 -

[html5]使用localStorage读取缓存中的数据

System

2024-08-16

所有,html5

在HTML5中，localStorage是一种客户端的持久化存储数据的方式，它可以在用户浏览器中保存键值对数据，即使浏览器关闭后再打开，数据依然存在。

以下是使用localStorage读取缓存数据的方法：

方法一：直接使用localStorage.getItem()方法




// 设置数据
localStorage.setItem('key', 'value');
 
// 获取数据
var data = localStorage.getItem('key');
console.log(data); // 输出: value

方法二：使用localStorage的['属性']方式




// 设置数据
localStorage['key'] = 'value';
 
// 获取数据
var data = localStorage['key'];
console.log(data); // 输出: value

方法三：使用localStorage的.key()方法，结合循环遍历所有的key




// 设置数据
localStorage.setItem('key1', 'value1');
localStorage.setItem('key2', 'value2');
 
// 遍历localStorage并获取数据
for(var i = 0; i < localStorage.length; i++){
    var key = localStorage.key(i);
    var value = localStorage.getItem(key);
    console.log(key + ' : ' + value);
}

以上三种方法都可以读取localStorage中的数据，你可以根据实际需求选择合适的方法。需要注意的是，localStorage中存储的数据都是以字符串的形式存储的，如果你存储的数据不是字符串类型，那么在读取时可能需要进行类型转换。

- 阅读更多 -

uniapp h5 高德地图基本的使用（给点标记绑定事件，信息窗体的使用

System

2024-08-16

所有,html5




<template>
  <view class="container">
    <view class="map" id="map"></view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      map: null,
      marker: null
    };
  },
  onReady() {
    this.initMap();
    this.addMarker();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('map', {
        zoom: 11,
        center: [116.397428, 39.90923] // 设置中心点坐标
      });
    },
    addMarker() {
      this.marker = new AMap.Marker({
        map: this.map,
        position: this.map.getCenter() // 位置设置为地图中心点
      });
 
      // 点标记添加点击事件
      AMap.event.addListener(this.marker, 'click', () => {
        // 创建信息窗体
        const infoWindow = new AMap.InfoWindow({
          content: '这里是点击位置',
          size: new AMap.Size(200, 0),  // 信息窗口大小
          offset: new AMap.Pixel(0, -30) // 信息窗口偏移位置
        });
        infoWindow.open(this.map, this.marker.getPosition());
      });
    }
  }
};
</script>
 
<style>
.map {
  width: 100%;
  height: 300px;
}
</style>

这段代码展示了如何在uniapp中使用高德地图的基本用法。首先，在页面的<template>部分定义了一个用于显示地图的容器。在<script>部分，定义了一个methods对象，其中包含初始化地图和添加点标记的方法。在页面加载完成后（onReady生命周期钩子中），初始化地图，并在地图上添加一个点标记。点标记绑定了一个点击事件，当点标记被点击时，会打开一个信息窗体，显示点击的位置信息。

- 阅读更多 -

HTML5中websocket通讯_v1.0

System

2024-08-16

所有,html5

以下是一个简单的HTML5 WebSocket通讯示例代码，使用JavaScript编写：




<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Example</title>
</head>
<body>
    <div id="output"></div>
    <script>
        var output = document.getElementById("output");
        var ws = new WebSocket("ws://your_websocket_server");
 
        ws.onopen = function() {
            output.innerHTML += "<p>Connected to the server.</p>";
        };
 
        ws.onmessage = function (event) {
            output.innerHTML += "<p>Received message: " + event.data + "</p>";
        };
 
        ws.onerror = function (error) {
            output.innerHTML += "<p>Error: " + error.message + "</p>";
        };
 
        ws.onclose = function() {
            output.innerHTML += "<p>Connection closed.</p>";
        };
 
        function sendMessage() {
            var message = document.getElementById("message").value;
            ws.send(message);
            output.innerHTML += "<p>Sent message: " + message + "</p>";
        }
    </script>
 
    <input type="text" id="message" placeholder="Type your message here" />
    <button onclick="sendMessage()">Send</button>
</body>
</html>

在这个示例中，我们创建了一个WebSocket连接到服务器地址ws://your_websocket_server。连接打开时，我们将一个连接成功的消息添加到页面上的output元素中。当接收到服务器发送的消息时，我们也将其添加到output元素中。错误、关闭事件也类似处理。用户可以通过一个文本输入框输入消息，并点击按钮发送消息。发送的消息也将被添加到output元素中。

请将ws://your_websocket_server替换为实际的WebSocket服务器地址。

- 阅读更多 -

Android Studio将html5网址封装成APP

System

2024-08-16

所有,html5

在Android Studio中，将HTML5网址封装成APP的过程主要涉及以下几个步骤：

创建一个新的Android项目。
添加WebView组件到布局文件中。
在Activity中设置WebView，加载你的HTML5网址。

以下是一个简单的示例代码：




import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
 
    private WebView webView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        webView = findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("https://你的HTML5网址.com");
    }
}

布局文件 activity_main.xml：




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</RelativeLayout>

确保你的AndroidManifest.xml中添加了网络权限：




<uses-permission android:name="android.permission.INTERNET" />

这样就可以在Android Studio中创建一个简单的APP，用来加载你的HTML5网址。记得将 "https://你的HTML5网址.com" 替换为你实际的网址。

System

2024-08-16

所有,html5




// 在一个页面中发送数据
const broadcastChannel = new BroadcastChannel('channelName');
broadcastChannel.postMessage({ key: 'value' });
 
// 在另一个页面中接收数据
const broadcastChannel = new BroadcastChannel('channelName');
broadcastChannel.onmessage = function(event) {
    console.log('收到数据:', event.data);
};

这段代码演示了如何使用BroadcastChannel API在同一浏览器的不同页面之间进行实时通信。第一个页面创建了一个BroadcastChannel实例，并通过postMessage方法发送消息。第二个页面同样创建了一个BroadcastChannel实例，并监听onmessage事件以接收传递过来的数据。这种方法不需要服务器参与，适用于简单的前端通信场景。

System

2024-08-16

所有,html5

在JavaScript中，可以使用window.scrollTo()或element.scrollTop属性来滚动页面到指定位置。为了添加滚动动画，可以使用requestAnimationFrame结合目标位置和当前位置的计算来逐帧更新滚动位置。

以下是使用scrollTo滚动到页面顶部的例子，并设置了动画：




function smoothScrollToTop(duration) {
  const start = window.pageYOffset;
  const startTime = 'now' in window.performance ? performance.now() : new Date().getTime();
 
  const documentHeight = document.documentElement.scrollHeight - 20; // 减去20px避免滚动到底
  const windowHeight = window.innerHeight;
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 
  duration = duration || 500;
 
  const easeInOutQuad = (t, b, c, d) => {
    if ((t /= d / 2) < 1) return c / 2 * t * t + b;
    return -c / 2 * ((--t) * (t - 2) - 1) + b;
  };
 
  const animateScroll = () => {
    const currentTime = 'now' in window.performance ? performance.now() : new Date().getTime();
    const time = Math.min(1, ((currentTime - startTime) / duration));
    const timeFunction = easeInOutQuad(time, start, documentHeight - scrollTop, duration);
    window.scrollTo(0, timeFunction);
 
    if (time < 1) {
      requestAnimationFrame(animateScroll);
    }
  };
 
  animateScroll();
}
 
// 使用函数滚动到页面顶部，持续时间500毫秒
smoothScrollToTop(500);

如果你想滚动到页面中的特定元素，可以使用element.scrollIntoView()方法，并通过options参数设置动画效果：




const element = document.getElementById('some-element-id');
 
element.scrollIntoView({
  behavior: 'smooth'
});

以上代码将平滑滚动至页面中ID为some-element-id的元素。

- 阅读更多 -

【Vite+ts+Vue3】公众号jssdk引用方法

System

2024-08-16

所有,html5

在Vite+ts+Vue3项目中引入微信公众号jssdk，首先需要确保项目能够正确地引入微信jssdk。以下是一个简单的例子：

安装微信jssdk，通常是通过npm或yarn安装微信官方提供的JavaScript SDK。




npm install weixin-js-sdk --save
# 或者
yarn add weixin-js-sdk

在Vue组件中引入并使用微信jssdk。




// 引入微信jssdk
import wx from 'weixin-js-sdk';
 
export default {
  mounted() {
    // 需要在服务端获取配置信息并传递给前端
    const getConfig = async () => {
      try {
        const { data } = await axios.get('/api/get-wx-config'); // 假设有一个API可以获取配置信息
        wx.config({
          debug: false, // 开启调试模式
          appId: data.appId, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名
          jsApiList: ['chooseImage', 'uploadImage', 'downloadImage'] // 必填，需要使用的JS接口列表
        });
        wx.ready(function() {
          // 配置成功后的回调函数
          console.log('微信jssdk配置成功');
        });
        wx.error(function(res) {
          // 配置失败的回调函数
          console.log('微信jssdk配置失败', res);
        });
      } catch (error) {
        console.error('获取微信配置信息失败', error);
      }
    };
    getConfig();
  },
  methods: {
    chooseImage() {
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          console.log(res);
        }
      });
    }
  }
};

在上述代码中，我们首先引入了微信jssdk，然后在组件的mounted生命周期中，我们通过异步请求获取了微信公众号的配置信息，并使用这些信息初始化了微信jssdk。一旦初始化成功，我们就可以在组件的方法中使用微信提供的各种API，例如chooseImage方法，用于让用户选择图片。

请注意，上述代码中的/api/get-wx-config是一个假设的API接口，你需要替换为实际用来获取微信配置信息的服务端接口。同时，axios.get是使用axios来发送HTTP GET请求，你可以根据项目中使用的HTTP客户端库进行相应的调整。

- 阅读更多 -