Android热更新详解

article/2025/8/27 8:19:27

一 前言介绍

正好最近又看到热更新，对以前Android 热修复核心原理：ClassLoader类加载机制做了点补充。

从16年开始开始，热修复技术开始在安卓界流行，它以classloader类加载机制为核心，可以不发布新版本就修复线上 bug ，让线上版本有能力去进行全量或者增量更新。

常见的思路有两种：

  1. 类加载方案，即 dex 插桩。该方案以腾讯系为主，包括微信的 Tinker、饿了么的 Amigo；

  2. 底层替换，即修改替换 ArtMethod。方案以阿里系的 AndFix 等为主；

本文主要介绍第一种方案。

1.1 ART 和 Dalvik

  1. Dex ：全称为Dalvik Executable Format，由很多 .class 文件处理压缩后的产物，最终可以在 Android 运行时环境执行。它适合于内存和处理器速度有限的系统。

  2. Dalvik：Google设计的Android平台的Java虚拟机。支持转换为.dex格式的Java程序运行。DVM默认使用CMS垃圾回收器。

  3. ART：Android Runtime，于Android 4.4 引入，在 Android 5.0 及更高版本作为默认的 Android 运行时。ART做出的具体改进可看安卓官方文档介绍：运行时：Android Runtime (ART) 和 Dalvik。ART 和 Dalvik 都是运行 Dex 字节码的兼容运行时，因此 ART 向下兼容Dalvik 开发的应用。

  4. AOT：ART在应用安装的时候预编译字节码到机器语言，这一机制叫Ahead-Of-Time(AOT)预编译。执行该操作后，应用程序安装会变慢，但是执行将更有效率，启动更快。

1.2 dexopt与dexaot

  1. dexopt：Dalvik虚拟机加载dex文件时，会对 dex 文件进行验证和优化，得到odex(Optimized dex) 文件。odex文件只是对dex文件使用了一些优化操作码。

  2. dex2oat：dex或者odex文件经过 AOT 预编译，即得到OAT（实际上是ELF文件）可执行文件（机器码）。（相比做过odex优化，未做过优化的dex转换成OAT要花费更长的时间）

1.3 ART 和 Dalvik 对比

  1. 在Dalvik下，应用运行需要解释执行，常用热点代码通过即时编译器（JIT）将字节码转换为机器码，运行效率低。而在ART 环境中，应用在安装时，字节码预编译（AOT）成机器码，安装慢了，但运行效率会提高。

  2. ART占用空间比Dalvik大（字节码变为机器码）， “空间换时间"。

  3. 预编译也可以明显改善电池续航，因为应用程序每次运行时不用重复编译了，从而减少了 CPU 的使用频率，降低了能耗。

二 ClassLoader

2.1 Android运行流程

Android程序编译的时候，会将.java文件编译时.class文件，然后将.class文件打包为.dex文件。Android程序运行时，Android的Dalvik/ART虚拟机就会加载.dex文件从中获得.class文件到内存中来使用。

2.2 类加载工具ClassLoader

任何 Java 程序都是由一个或多个 class 文件组成，在程序运行时，需要通过 Java 的类加载机制将 class 文件加载到 JVM 中才可以使用。Java程序启动时不会一次性加载所有类，而是先把保证运行的基础类加载到jvm，其它类要用时再加载。这样的好处是节省了内存的开销，用时再加载这也是java动态性的一种体现。

这些类的加载就是通过ClassLoader来的，每个 Class 对象的内部都有一个 classLoader 字段来标识自己是由哪个 ClassLoader 加载的。安卓的ClassLoader小改了java的ClassLoader。

class Class<T> {...private transient ClassLoader classLoader;...
}

常见的Android类加载器有如下四种：

  1. BootClassLoader ：加载Android Framework层中的class字节码文件（类似java的BootstrapClassLoader）
  2. PathClassLoader ：只能加载已经安装到Android系统中的Apk的 class 字节码文件，是Android默认使用的类加载器；（类似java的 AppClassLoader ）
  3. DexClassLoader ：可以加载加载制定目录的dex/jar/apk/zip文件文件（类似java中的 Custom ClassLoader ），比 PathClassLoader 更灵活，是实现热修复的重点；
  4. BaseDexClassLoader ： PathClassLoader 和 DexClassLoader 的父类
Log.e(TAG, "Activity.class 由：" + Activity.class.getClassLoader() +" 加载");
Log.e(TAG, "MainActivity.class 由：" + getClassLoader() +" 加载");//输出：
Activity.class 由：java.lang.BootClassLoader@b1202a1 加载
MainActivity.class 由：dalvik.system.PathClassLoader[DexPathList[[zip file "/data/app/com.enjoy.enjoyfix-1/base.apk"],nativeLibraryDirectories=[/data/app/com.enjoy.enjoyfix-1/lib/x86, /system/lib, /vendor/lib]]] 加载

它们之间的关系如下：

public class DexClassLoader extends BaseDexClassLoader {public DexClassLoader(String dexPath, String optimizedDirectory,String librarySearchPath, ClassLoader parent) {super(dexPath, new File(optimizedDirectory), librarySearchPath, parent);}
}public class PathClassLoader extends BaseDexClassLoader {public PathClassLoader(String dexPath, ClassLoader parent) {super(dexPath, null, null, parent);}public PathClassLoader(String dexPath, String librarySearchPath, ClassLoader parent){super(dexPath, null, librarySearchPath, parent);}
}

PathClassLoader 与 DexClassLoader 在构造函数中都调用了父类的构造函数，两者唯一的区别在于：DexClassLoader多传了一个optimizedDirectory参数，并且会将其创建为File对象传给super，而PathClassLoader则直接给到null。因此两者都可以加载指定的dex，以及jar、zip、apk中的classes.dex

PathClassLoader pathClassLoader = new PathClassLoader("/sdcard/xx.dex", getClassLoader());File dexOutputDir = context.getCodeCacheDir();
DexClassLoader dexClassLoader = new DexClassLoader("/sdcard/xx.dex",dexOutputDir.getAbsolutePath(), null,getClassLoader());

其实optimizedDirectory参数就是dexopt的产出目录(odex)。DexClassLoader不仅仅可以加载 dex文件，还可以加载jar、apk、zip文件中的dex。而jar、apk、zip其实就是一些压缩格式，要拿到压缩包里面的dex文件就需要解压，所以，DexClassLoader在调用父类构造函数时会指定一个解压的目录。那PathClassLoader创建时，这个目录为null，就意味着不进行dexopt？并不是，optimizedDirectory为null时的默认路径为：/data/dalvik-cache。

在API 26源码中，将DexClassLoader的optimizedDirectory标记为了 deprecated 弃用，实现也变得和PathClassLoader一摸一样了：

public DexClassLoader(String dexPath, String optimizedDirectory,String librarySearchPath, ClassLoader parent) {super(dexPath, null, librarySearchPath, parent);
}

2.3 双亲委托机制

可以看到创建ClassLoader需要接收一个ClassLoader parent参数。这个parent的目的就在于实现类加载的双亲委托。即：某个类加载器在接到加载类的请求时，首先将加载任务委托给父类加载器，依次递归，如果父类加载器可以完成类加载任务，就成功返回；只有父类加载器无法完成此加载任务时，才自己去加载。

protected Class<?> loadClass(String name, boolean resolve) throws ClassNotFoundException{// 检查class是否有被加载  Class c = findLoadedClass(name);if (c == null) {long t0 = System.nanoTime();try {if (parent != null) {//如果parent不为null，则调用parent的loadClass进行加载  c = parent.loadClass(name, false);} else {//parent为null，则调用BootClassLoader进行加载  c = findBootstrapClassOrNull(name);}} catch (ClassNotFoundException e) {}if (c == null) {// 如果都找不到就自己查找long t1 = System.nanoTime();c = findClass(name);}}return c;
}

值得注意的是：c = findBootstrapClassOrNull(name);按照方法名理解，应该是当parent为null时候，也能够加载BootClassLoader加载的类。但是实际上，Android当中的实现为：（Java不同）

private Class findBootstrapClassOrNull(String name)
{return null;
}

2.4 类加载器的三个机制（约束）

双亲委托机制实际上是一种自上而下带缓存的加载，这种机制也决定它的一些特性：

委托：将类加载交由父类加载器加载，父不行再自己加载。

可见性：子类加载器可见所有的父类加载器加载的类，父类加载器不可见子类加载器加载的类。

单一性：一个类仅加载一次，子类加载器不会再次加载父类加载器加载过的类。

2.5 findClass

可以看到在所有父ClassLoader无法加载Class时，则会调用自己的findClass方法。findClass在ClassLoader中的定义为:

protected Class<?> findClass(String name) throws ClassNotFoundException {throw new ClassNotFoundException(name);
}

其实任何ClassLoader子类，都可以重写loadClass与findClass。一般如果你不想使用双亲委托，则重写loadClass修改其实现。而重写findClass则表示在双亲委托下，父ClassLoader都找不到Class的情况下，定义自己如何去查找一个Class。而我们的PathClassLoader会自己负责加载MainActivity这样的程序中自己编写的类，利用双亲委托父ClassLoader加载Framework中的Activity。说明PathClassLoader并没有重写loadClass，因此我们可以来看看PathClassLoader中的 findClass 是如何实现的。

public BaseDexClassLoader(String dexPath, File optimizedDirectory,String 	librarySearchPath, ClassLoader parent) {super(parent);this.pathList = new DexPathList(this, dexPath, librarySearchPath, 		optimizedDirectory);
}@Override
protected Class<?> findClass(String name) throws ClassNotFoundException {List<Throwable> suppressedExceptions = new ArrayList<Throwable>();//查找指定的classClass c = pathList.findClass(name, suppressedExceptions);if (c == null) {ClassNotFoundException cnfe = new ClassNotFoundException("Didn't find class \"" + 														name + "\" on path: " + pathList);for (Throwable t : suppressedExceptions) {cnfe.addSuppressed(t);}throw cnfe;}return c;
}

实现非常简单，从pathList中查找class。继续查看DexPathList：

public DexPathList(ClassLoader definingContext, String dexPath,String librarySearchPath, File optimizedDirectory) {//.........// splitDexPath 实现为返回 List<File>.add(dexPath)// makeDexElements 会去 List<File>.add(dexPath) 中使用DexFile加载dex文件返回 Element数组this.dexElements = makeDexElements(splitDexPath(dexPath), optimizedDirectory,suppressedExceptions, definingContext);//.........}public Class findClass(String name, List<Throwable> suppressed) {//从element中获得代表Dex的 DexFilefor (Element element : dexElements) {DexFile dex = element.dexFile;if (dex != null) {//查找classClass clazz = dex.loadClassBinaryName(name, definingContext, suppressed);if (clazz != null) {return clazz;}}}if (dexElementsSuppressedExceptions != null) {suppressed.addAll(Arrays.asList(dexElementsSuppressedExceptions));}return null;
}

可以看到， BaseDexClassLoader 的 findClass() 方法实际上是通过 DexPathList 的 findClass() 方法来获取class的，而这个 DexPathList 对象恰好在之前的 BaseDexClassLoader 构造函数中就已经被创建好了，里面解析了dex文件的路径，并将解析的dex文件都存在this.dexElements里面。DexPathList 类通过构造函数调用了 makeDexElements() 得到 Element 集

makeDexElements()：

 //解析dex文件
private static Element[] makeDexElements(ArrayList<File> files, File optimizedDirectory, ArrayList<I// 1.创建Element集合ArrayList<Element> elements = new ArrayList<Element>();// 2.遍历所有dex文件（也可能是jar、apk或zip文件）for (File file : files) {ZipFile zip = null;DexFile dex = null;String name = file.getName();...// 如果是dex文件if (name.endsWith(DEX_SUFFIX)) {dex = loadDexFile(file, optimizedDirectory);// 如果是apk、jar、zip文件（这部分在不同的Android版本中，处理方式有细微差别）} else {zip = file;dex = loadDexFile(file, optimizedDirectory);}...// 3.将dex文件或压缩文件包装成Element对象，并添加到Element集合中if ((zip != null) || (dex != null)) {elements.add(new Element(file, false, zip, dex));}}// 4.将Element集合转成Element数组返回return elements.toArray(new Element[elements.size()]);
}

可以看到，DexPathList 的构造函数是将一个个的程序文件（可能是dex、apk、jar、zip）封装成一个个 Element 对象，最后添加到Element集合中。Android的类加载器（不管是PathClassLoader，还是DexClassLoader,它们最后在加载文件时，都只认dex文件，而loadDexFile()是加载dex文件的核心方法，他可以可以从jar、apk、zip中提取出dex。

回头看一下PathClassLoader中的 findClass 方法：

 Class c = pathList.findClass(name, suppressedExceptions);

于是看到DexPathList的findClass()方法。如下：

public Class findClass(String name, List<Throwable> suppressed) {// 遍历从dexPath查询到的dex和资源Elementfor (Element element : dexElements) {DexFile dex = element.dexFile;// 如果当前的Element是dex文件元素if (dex != null) {// 使用DexFile.loadClassBinaryName加载类Class clazz = dex.loadClassBinaryName(name, definingContext, suppressed);if (clazz != null) {return clazz;}}}if (dexElementsSuppressedExceptions != null) {suppressed.addAll(Arrays.asList(dexElementsSuppressedExceptions));}return null;
}

对 Element 数组进行遍历，一旦找到类名与name相同的类时，就直接返回这个 class ，找不到则返回null。

通过如上分析，我们发现整个类加载流程就是：

  1. 类加载器BaseDexClassLoader先将dex文件解析放到pathList到dexElements里面
  2. 加载类的时候从dexElements里面去遍历，看哪个dex里面有这个类就去加载，生成class对象

三 热修复

接刚刚个类加载流程，热修复原理就是将补丁 dex 文件放到 dexElements 数组靠前位置，这样在加载 class 时，优先找到补丁包中的 dex 文件，加载到 class 之后就不再寻找，从而原来的 apk 文件中同名的类就不会再使用，从而达到修复的目的：

在PathClassLoader中的Element数组为：[patch.dex , classes.dex , classes2.dex]。如果存在Key.class位于patch.dex与classes2.dex中都存在一份，当进行类查找时，循环获得dexElements中的DexFile，查找到了Key.class则立即返回，不会再管后续的element中的DexFile是否能加载到Key.class了。因此一种热修复实现可以将出现Bug的class单独的制作一份fix.dex文件(补丁包)，然后在程序启动时，从服务器下载fix.dex保存到某个路径，再通过fix.dex的文件路径，用其创建Element对象，然后将这个Element对象插入到我们程序的类加载器PathClassLoader的pathList中的dexElements数组头部。这样在加载出现Bug的class时会优先加载fix.dex中的修复类，从而解决Bug。

热修复的方式不止这一种，并且如果要完整实现此种热修复可能还需要注意一些其他的问题(如：反射兼容)。另外插件的形式常见的有apk和dex文件。

dex打包工具（d8）

更新的dex文件如何生成呢？

Android SDK提供了dex打包工具d8，在在Android 构建工具 28.0.1 及更高版本中可以找到：

对正常的java文件，直接javac成class文件后，可直接用d8编译成dex文件：

./d8 XXX.class

如果你想更新的文件是apk格式的，可直接在Android Studio中对更新的Module/Lib直接打包成apk。

代码实现

dex替换：

//在Application中进行替换
public class MApplication extends Application {@Overridepublic void onCreate() {super.onCreate();//dex作为插件进行加载dexPlugin();}.../*** dex作为插件加载*/private void dexPlugin(){//插件包文件File file = new File("/sdcard/hotfix.dex");if (!file.exists()) {Log.i("MApplication", "插件hotfix不存在");return;}try {//获取到 BaseDexClassLoader 的  pathList字段// private final DexPathList pathList;Field pathListField = BaseDexClassLoader.class.getDeclaredField("pathList");//破坏封装，设置为可以调用pathListField.setAccessible(true);//拿到当前ClassLoader的pathList对象Object pathListObj = pathListField.get(getClassLoader());//获取当前ClassLoader的pathList对象的字节码文件（DexPathList ）Class<?> dexPathListClass = pathListObj.getClass();//拿到DexPathList 的 dexElements字段// private final Element[] dexElements；Field dexElementsField = dexPathListClass.getDeclaredField("dexElements");//破坏封装，设置为可以调用dexElementsField.setAccessible(true);//使用插件创建 ClassLoaderDexClassLoader pathClassLoader = new DexClassLoader(file.getPath(), getCacheDir().getAbsolutePath(), null, getClassLoader());//拿到插件的DexClassLoader 的 pathList对象Object newPathListObj = pathListField.get(pathClassLoader);//拿到插件的pathList对象的 dexElements变量Object newDexElementsObj = dexElementsField.get(newPathListObj);//拿到当前的pathList对象的 dexElements变量Object dexElementsObj=dexElementsField.get(pathListObj);int oldLength = Array.getLength(dexElementsObj);int newLength = Array.getLength(newDexElementsObj);//创建一个dexElements对象Object concatDexElementsObject = Array.newInstance(dexElementsObj.getClass().getComponentType(), oldLength + newLength);//先添加新的dex添加到dexElementfor (int i = 0; i < newLength; i++) {Array.set(concatDexElementsObject, i, Array.get(newDexElementsObj, i));}//再添加之前的dex添加到dexElementfor (int i = 0; i < oldLength; i++) {Array.set(concatDexElementsObject, newLength + i, Array.get(dexElementsObj, i));}//将组建出来的对象设置给 当前ClassLoader的pathList对象dexElementsField.set(pathListObj, concatDexElementsObject);} catch (Exception e) {e.printStackTrace();}}

apk：

    // apk作为插件加载private void apkPlugin() {//插件包文件File file = new File("/sdcard/hotfix.apk");if (!file.exists()) {Log.i("MApplication", "插件hotfix不存在");return;}try {//获取到 BaseDexClassLoader 的  pathList字段// private final DexPathList pathList;Field pathListField = BaseDexClassLoader.class.getDeclaredField("pathList");//破坏封装，设置为可以调用pathListField.setAccessible(true);//拿到当前ClassLoader的pathList对象Object pathListObj = pathListField.get(getClassLoader());//获取当前ClassLoader的pathList对象的字节码文件（DexPathList ）Class<?> dexPathListClass = pathListObj.getClass();//拿到DexPathList 的 dexElements字段// private final Element[] dexElements；Field dexElementsField = dexPathListClass.getDeclaredField("dexElements");//破坏封装，设置为可以调用dexElementsField.setAccessible(true);//使用插件创建 ClassLoaderDexClassLoader pathClassLoader = new DexClassLoader(file.getPath(), getCacheDir().getAbsolutePath(), null, getClassLoader());//拿到插件的DexClassLoader 的 pathList对象Object newPathListObj = pathListField.get(pathClassLoader);//拿到插件的pathList对象的 dexElements变量Object newDexElementsObj = dexElementsField.get(newPathListObj);//将插件的 dexElements对象设置给 当前ClassLoader的pathList对象dexElementsField.set(pathListObj, newDexElementsObj);} catch (Exception e) {e.printStackTrace();}}

一些扩展

  1. 选择apk文件的方式一般就不对dexElements数组就行插前值操作了，而是直接替换整个dexElements数组。但是现实中，热更新可能只是更新某几个类或者资源文件，如果使用apk全量替换的方式，就很重，那么增量替换，即使用dex文件的方式，就是很好的方式；

  2. 更新的文件一般放服务器上需要客户端下载插前值；

  3. so库在Android代码中是通过调用System.loadLibrary函数实现的。动态注册的native方法调用一次JNI_OnLoad方法都会重新完成一次映射， 所以我们是否只要先加载原来的so库,，然后再加载补丁so库，就能完成Java层native方法到native层patch后的新方法映射， 这样就完成动态注册native方法的patch实时修复。

  4. 、资源文件的更新方式：加载apk，反射调用AssetManager的addAssetPath方法。

参考文章：

Android Runtime (ART) 和 Dalvik

Android 热修复核心原理, ClassLoader类加载

【小家Java】从原理层面理解Java中的类加载器

一看你就懂，超详细java中的ClassLoader详解

Android热修复实现及原理


http://chatgpt.dhexx.cn/article/Pt6jyGDA.shtml

相关文章

热更新原理

热更新原理

对于热更新的问题就是了解两个点的问题&#xff1a; 如何加载补丁包&#xff0c;也就是如何加载dex 文件的过程&#xff08;dex是补丁包&#xff0c;更改的文件都在补丁包中&#xff09;修复后的类如何替换掉旧的类 通过这篇文章给大家介绍下我理解的热更新的逻辑&#xff0c…
阅读更多...
Cocos Creator 3.x 热更新

Cocos Creator 3.x 热更新

前言&#xff1a;游戏做热更新 是基本需求&#xff1b; 好在 cocos-creator 已经为我们做好了方案&#xff0c;相对于 U3D 的热更新方案来说&#xff0c;使用起来很简便&#xff01;&#xff0c;不用关注很多细节 本文使用的是 cocos-creator 3.5.2 版本 官方文档 &#xff1…
阅读更多...
热更新原理及实践注意

热更新原理及实践注意

首先要说明几个概念&#xff0c;不要混用&#xff0c;热部署&#xff0c;热加载&#xff1b; 热部署&#xff1a;就是已经运行了项目,更改之后,不需要重新tomcat,但是会清空内存,重新打包,重新解压war包运行&#xff0c;可能好处是一个tomcat多个项目,不必因为tomcat停止而停止…
阅读更多...
热更新你都知道哪些？

热更新你都知道哪些？

热更新系列目录 热更新你都知道哪些&#xff1f;热更新Sophix的爬坑之路腾讯热更新Tinker的故事阿里热更新Sophix的故事 Android热更新 前言1. 什么是热更新&#xff1f;2. 主流热更新方案3. 腾讯系热更新4. 阿里系热更新总结 博客创建时间&#xff1a;2020.05.16 博客更新时间…
阅读更多...
热更新技术简易原理及技术推荐

热更新技术简易原理及技术推荐

为了照顾萌新童鞋&#xff0c;最开始还是对热更新的概念做一个通俗易懂的介绍。 热更新用通俗的讲就是软件不通过应用商店的软件版本更新审核&#xff0c;直接通过应用自行下载的软件数据更新的行为。在用户下载安装App之后&#xff0c;打开App时遇到的即时更新&#xff0c;是…
阅读更多...
热更新及其原理

热更新及其原理

热更新&#xff1a;是app常用的更新方式&#xff0c;只需下载安装更新部分的代码 工作原理&#xff1a;动态下开发代码&#xff0c;使开发者在不发布新版本的情况下修复bug和发布功能&#xff0c;绕开苹果审核机制&#xff0c;避免长时间的审核以及多次被拒绝造成的成本。 优…
阅读更多...
HTML/CSS实现小米官网搜索框效果

HTML/CSS实现小米官网搜索框效果

效果图&#xff1a; 需求分析&#xff1a; 1、输入框焦点事件 onfocus:成为焦点, 点击输入框的时候&#xff0c;出现闪烁光标&#xff0c;此时可以输入内容。 onblur :失去焦点, 点击页面空白区域&#xff0c;光标消失。此时不可以输入内容。 2、获取元素 3、注册事件 2.1…
阅读更多...
html中的搜索代码,Web自动化（3）：网页自动搜索功能

html中的搜索代码,Web自动化（3）：网页自动搜索功能

unsplash.jpg 写在前面 如果我们需要在期刊中搜索我们想要找的文章，那么我们如何才能达到这个目的。我们首先看一下，手动和自动对比图： 网页搜索.png 其实内容全部一样，我们只是用自动化程序，来代替我们手动操作。 1. 创建webdriver驱动对象，驱动打开网页 # 导入包 from …
阅读更多...
java搜索代码_Java实现搜索功能代码详解

java搜索代码_Java实现搜索功能代码详解

首先&#xff0c;我们要清楚搜索框中根据关键字进行条件搜索发送的是get请求&#xff0c;并且是向当前页面发送get请求 //示例代码 请求路径为当前页面路径 "/product" 当我们要实现多条件搜索功能时&#xff0c;可以将搜索条件封装为一个map集合&#xff0c;再根据m…
阅读更多...
干货！最全优秀搜索框设计案例（含代码链接）

干货！最全优秀搜索框设计案例（含代码链接）

面对纷繁复杂的网页内容&#xff0c;用户通过查询关键词表达需求&#xff0c;期望在响应的查询结果中快速获取准确的信息和流畅的用户体验。用户与网络世界的万千联系都是从搜索开始的。搜索框之于用户就像是用户与应用或网站之间的对话窗口。小小的搜索框传递着用户与网站、应…
阅读更多...
php网页制作中搜索框的代码,在网页里嵌入百度搜索框功能

php网页制作中搜索框的代码,在网页里嵌入百度搜索框功能

今天发现某个网站是直接使用百度搜索作为自己网站的搜索功能的&#xff0c;感觉这个挺好玩的&#xff0c;不需要去研究复杂的搜索算法而又直接使用了百度搜索这个强大的搜索引擎为自己撑腰。无论对自己还是对用户来说都是相当不错的选择&#xff0c;下面作者将要和大家分享一下…
阅读更多...
利用CSS写精美搜索框

利用CSS写精美搜索框

利用html写搜索样式框 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>8款纯CSS3搜索框</title&g…
阅读更多...
JavaScript实现智能搜索框

JavaScript实现智能搜索框

应用场景&#xff1a; 1. 搜索框在页面中占据的空间过小&#xff0c;希望无论浏览到什么位置&#xff0c;可以轻易地回到并聚焦搜索框。 2. 搜索框里面的文字大小过小&#xff0c;希望能够在上方开辟一块空间放大内容 解决思路&#xff1a; 1. 对整个页面添加键盘事件keyup…
阅读更多...
html中搜索栏怎么写,html搜索框怎么做

html中搜索栏怎么写,html搜索框怎么做

很多:从记忆角度讲运用(谐音记忆法,联想法) 平常来说呢,可分为(死记硬背发,音标记忆法) 另外:自己创造 总结【谐音记忆法,死记硬背发,音标记忆法】 html/css如何写出如下搜索框效果&#xff0c;请给出代码 html制作一个搜索框&#xff0c;代码是什么&#xff1f; 打开Hbuilder编…
阅读更多...
搜索导航HTML,CSS 带搜索导航栏的示例代码

搜索导航HTML,CSS 带搜索导航栏的示例代码

本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏。 以下实例均是响应式的。 可以先看下效果图： 创建一个搜索栏 主页 关于 联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav {overflow: hidden; background-color: #e9e9e9; } /* 设置导航栏的链接样式 */ .topnav …
阅读更多...
淘宝网搜索框源代码

淘宝网搜索框源代码

搜索框代码&#xff1a; <script typetext/javascript> alimama_pidmm_11487878_0_0; alimama_typeg; alimama_tks{}; alimama_tks.style_i1; alimama_tks.lg_i1; alimama_tks.w_i350; alimama_tks.h_i69; alimama_tks.btn_i1; alimama_tks.txt_s; alimama_tks.hot_i1; a…
阅读更多...
百度搜索框代码，实现回车点击，跳转到新页面，简单

百度搜索框代码，实现回车点击，跳转到新页面，简单

参考网站&#xff1a;https://110.nanshiw.com/ 上图为实现效果 代码如下&#xff1a; <script> function butClick() {var val document.getElementById("search_key").value;if(val.length 0){alert(搜索为空&#xff0c;请输入内容);return false;}else…
阅读更多...
智能搜索框html代码,js实现搜索框关键字智能匹配代码

智能搜索框html代码,js实现搜索框关键字智能匹配代码

只要使用搜索引擎的朋友应该都有这样的体会&#xff0c;就是当在搜索框输入关键字的时候&#xff0c;会出现自能匹配现象&#xff0c;这绝对是非常好的用户体验&#xff0c;下面就是一段类似的代码&#xff0c;当然这里只是掩饰&#xff0c;所以只能匹配的数据都是本地固定好的…
阅读更多...
html5搜索框在最右侧,html5搜索框特效点击搜索框弹出分类搜索框代码

html5搜索框在最右侧,html5搜索框特效点击搜索框弹出分类搜索框代码

特效描述：html5搜索框特效 点击搜索框弹出 分类搜索框。点击搜索框弹出分类搜索框代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Search People Sara Soueidan Rachel Smith Peter Finlan Patrick Cox
阅读更多...
网页添加百度搜索框代码大全

网页添加百度搜索框代码大全

★ 用法&#xff1a;在下面选择合适的样式&#xff0c;复制代码到网页中相应位置粘贴即可。 ★ 样式一&#xff08;20030&#xff09; 代码&#xff1a; <iframe id"baiduframe" marginwidth"0" marginheight"0" scrolling"no" fr…
阅读更多...
推荐文章

Copyright @ 2022~2023