随笔分类 - HTML5
HTML5新技术相关
摘要：背景 公司内部需要利用第三方接口实现tts和stt的功能，就涉及到了音频的录制和播放，所以就看了一下最新的音频api，实现了一个简单的。 实现 import { useEffect, useMemo, useState } from "react"; export type RecorderPara
阅读全文
摘要：前端图片压缩 需求：最近做项目，要求900k-5M的图片，需要压缩到900K以下 实现：利用canvas.toDataURL(type, encoderOptions)或toBlob(callback, type, encoderOptions)实现 前置知识点 canvas.toDataURL(t
阅读全文
摘要：需求 需要从微信的H5网页进入我们自己的小程序。 实现 步骤，参见https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html官方文档去加载对应的开放标签。 由于框架的问题，会导致在vue和reac
阅读全文
摘要：对比React的hooks与Vue的composition 以一个倒计时的简单组件为例，使用两种方式去实现。 React的hooks写法 hooks的写法完全一改之前的类组件的写法，完全的函数式编程，看起来变得更加简洁了，实际上如果用的不是很好，看起来会很难理解，不如类组件看起来那么清晰。 代码示例
阅读全文
摘要：需求 一个H5页面需要实现在ios的浏览器，android的浏览器以及微信中打开时支持打开手机的地图导航。 实现 let url = '' if (myBrowser1() 'android') { // 判断是安卓环境 url = `androidamap://navi?sourceApplica
阅读全文
摘要：场景 在做微信H5的时候，需要自动播放音频，在ios中失效，解决方法很简单 解决方法 直接使用wx.ready(callback)在回调中去调用audio/video的play方法，亲测有效，(iphone6 plus，iphone11)
阅读全文
摘要：前言 移动端H5在一个长屏的滚动过程中，一旦涉及到输入的文本框，弹出键盘后，滚动位置经常会发生变化，这个时候需要去捕获移动端键盘弹出前后的事件去做一下记录当前滚动状态并恢复的处理。 实现 由于ios和安卓的键盘弹出时的处理机制其实是不一样的，所以需要针对不用系统做相应的处理。 ios ios主要就是
阅读全文
摘要：前言 最近的需求是做一个移动端H5的长屏广告页，最后需要在微信分享的时候修改文案以及带上图片，这个实现起来也不是很复杂。 实现步骤 先绑定域名，先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。由于该自定义分享需要借助微信的jssdk来实现，所以这一步是必须的。 引入微信
阅读全文
摘要：前言 由于工作需要，需要做一版在手机上查看的H5的广告页。广告页面基本都是一块内容占满一屏，然后上滑下滑就翻页，所以需要一个这样的翻页功能。 代码实现 废话不多说，直接上代码 /** * 一个放置多个满屏页面的容器，支持上下滑动 */ // ScrollBox.jsx import React, {
阅读全文
摘要：有时候需要自定义城市选择器的时候，又不想调用别人提供的api来获取城市json的时候就可以自己先预定义好 使用代码块包裹起来就渲染不出来了，数据量太大了，只能将就着这样看了 [ { "label": "北京市", "id": 11, "children": [ { "label": "市辖区", "
阅读全文
摘要：现在有些类似于Iphonx的手机，底部多了一根横条，导致内容如果铺到了下面，就会被遮挡，所以在这里推荐使用 的一个新属性来解决这个问题 直接上代码 兼容性的话，目前新版的浏览器，除了IE，其它的都是支持的，移动端也都是支持的，效果还是比较好的。
阅读全文
摘要：添加水印的思路 1. 通过动态添加水印的 ，平铺在页面上，给 的`point event none`，添加一个透明度就可以了，这种实现比较简单，但是效果可能不是很好。 2. 通过 绘制对应的水印图形以及文字，然后转成 编码的地址，附加在需要添加水印的页面的根元素上，作为背景图。 第二种思路的实现如下
阅读全文
摘要：有时候需要在自己的网站上使用第三方搜索引擎来搜索站外资源的时候，这个时候就需要使用到第三方的搜索引擎的API了。 首先是搜索关联关键词的 ，这几个接口通过 的形式可以获取到对应的联想词，可以做搜索提示。 再就是获取搜索结果的接口，必应搜索提供相关的接口，不过只有七天的试用期，后面就要收费了 百度搜索
阅读全文
摘要：/** * 文字转语音，利用H5的新特性SpeechSynthesisUtterance，speechSynthesis实现 * eg. * const speaker = new Speaker({ text: '这是一条神奇的天路啊' }); * speaker.start(); // 开时播放
阅读全文
浙公网安备 33010602011771号