企业官网建设流程全解析

1. 项目概述：为什么.9.png是uniapp启动图的关键

如果你用uniapp开发过安卓应用，并且尝试过打包上架，大概率遇到过启动图拉伸变形的问题。尤其是在那些屏幕尺寸千奇百怪的安卓设备上，你精心设计的启动图Logo或文字，可能在某个全面屏手机上被拉成“大饼脸”，或者在某个老款带虚拟按键的设备上被挤到角落。这个问题困扰过很多开发者，而解决它的核心钥匙，就是一张特殊的图片——.9.png，也叫“九宫格”图。

简单来说，.9.png是一种Android系统独有的图片格式，它在普通PNG图片的基础上，增加了四条一像素宽的“可拉伸区域”标记线。这四条线定义了图片的哪些部分可以被拉伸、哪些部分必须保持原样（比如Logo和文字），以及内容（如文字）的显示区域。对于uniapp的启动图而言，它通常是应用启动时展示的第一帧画面，包含了品牌Logo、Slogan或加载动画。如果不使用.9.png，系统会粗暴地将整张图片进行缩放以适应屏幕，结果就是视觉元素的严重失真。

我见过不少开发者，包括一些有经验的，在遇到这个问题时，第一反应是去调整manifest.json里的启动图配置，或者尝试用CSS去控制，结果发现根本不起作用。因为启动图的初始展示是由原生系统控制的，发生在WebView和Vue实例加载之前，CSS和JS都鞭长莫及。所以，制作一张正确的.9.png启动图，是uniapp安卓应用获得完美第一印象的必经之路，也是上架各大应用市场前必须解决的基础体验问题。

2. 核心原理：深入理解.9.png的四条“魔法线”

要制作好.9.png，不能只知其然，必须知其所以然。我们得把这四条一像素宽的黑线（必须是纯黑色#000000）是干什么的彻底搞明白。你可以把一张.9.png想象成被这四条线划分出的九个宫格，这也是它名字的由来。

2.1 顶部与左侧的“拉伸区域”线

首先看图片的上边缘和左边缘。在这两条边上，你可以用一像素宽的黑线画出若干线段。

• 顶部边缘的黑线（可垂直拉伸区域）：这条线标记的是图片在垂直方向上可以被拉伸的部分。系统在适配不同高度的屏幕时，只会拉伸这条黑线覆盖的纵向像素区域。比如，你的启动图背景是一个渐变色条，你希望中间部分可以拉长，而顶部的Logo和底部的版权信息保持不变，那么你就在顶部边缘，对应于背景渐变条的区域画上黑线。
• 左侧边缘的黑线（可水平拉伸区域）：同理，这条线标记的是图片在水平方向上可以被拉伸的部分。系统在适配不同宽度的屏幕时，只会拉伸这条黑线覆盖的横向像素区域。如果你的背景图案左右对称，希望中间部分可以横向延展，而两侧的装饰边框不变，就在左侧边缘的对应位置画线。

关键理解：这两条线定义的是“可拉伸的原材料区域”。画线的地方不是指“这条线会被拉伸”，而是指“这条线所对应的整列（顶部线）或整行（左侧线）的像素内容可以被复制和拉伸”。不画线的地方，则会被视为固定区域，保持1:1的像素比例。

2.2 底部与右侧的“内容区域”线

这是最容易混淆的部分。底部和右侧边缘的黑线，与拉伸无关，它们定义的是“内容填充区域”（Content Padding）。

• 底部边缘的黑线（垂直内容区域）：它定义了在垂直方向上，你的“内容”（对于启动图，可能就是文字或Logo）可以安全显示的区域的下边界。系统会保证你的内容被放置在这个边界之内。
• 右侧边缘的黑线（水平内容区域）：它定义了在水平方向上，“内容”可以安全显示的区域的右边界。

为什么需要这个？考虑一个带文字气泡的启动图。气泡的边框是固定的，但中间的文字长度可能变化。通过设置右侧和底部的内容线，你可以确保无论文字多少，都不会超出气泡边框的显示范围。对于大多数uniapp启动图，如果只是全屏背景加居中Logo，内容线通常可以沿着Logo的内边缘来画，或者如果不需要限制内容，这两条线甚至可以省略（但为了规范，通常建议画出）。

2.3 一个简单的记忆口诀和类比

你可以这样记忆：“上左管拉伸，下右管内容”。 一个更生活的类比：想象一件弹性T恤（图片）。顶部和左侧的线，就像标出了T恤躯干部分（可拉伸的棉质部分）。底部和右侧的线，则像标出了T恤上印花图案的安全印刷区域，确保印花不会印到袖口或衣领（不可拉伸的罗纹部分）上去。

3. 工具选型与准备：用什么画.9.png最顺手？

理论上，任何能精确到像素的图片编辑工具都能画那四条黑线，比如Photoshop。但专门为Android设计的工具效率要高得多，因为它们能实时预览拉伸效果，并自动处理图片格式。

3.1 首选方案：Android Studio自带的Draw 9-patch工具

这是最官方、最可靠的工具。如果你本地已经安装了Android Studio（开发uniapp安卓原生插件时会用到），那么它已经内置了。

1. 找到工具：启动Android Studio，无需打开项目。直接点击菜单栏File->New->New Project随便创建一个临时项目，或者打开任意一个Android项目。
2. 定位图片：将你的启动图PNG文件（例如splash.png）复制到项目的app/src/main/res/drawable目录下（如果没有此目录可以手动创建）。
3. 打开编辑：在Android Studio的Project视图中，右键点击该PNG文件，选择Create 9-Patch file...。它会生成一个同名但后缀为.9.png的新文件（如splash.9.png），并自动在编辑器中打开9-patch编辑界面。

这个工具的优点是：所见即所得。右侧会实时显示拉伸到不同尺寸后的效果。你可以用鼠标直接在图片边缘点击或拖动来绘制、擦除黑线。对于uniapp开发者来说，虽然我们不常写原生代码，但用这个工具处理图片是最高效的。

3.2 备选方案：在线.9.png生成工具

如果你不想安装庞大的Android Studio，一些在线工具可以作为备选。例如搜索“9-patch tool online”可以找到一些开源工具。你上传PNG，在网页上用鼠标画线，然后下载生成后的.9.png文件。

使用在线工具的注意事项：

• 隐私：确保启动图不包含敏感信息，因为图片需要上传到第三方服务器。
• 精度：网页工具的绘制精度可能不如本地工具，对于复杂边界的定位可能不够准确。
• 预览：实时预览功能可能较弱，需要生成后多次下载查看效果。

3.3 素材准备：你的原始启动图

在开始画线之前，你需要准备好符合要求的原始启动图：

• 格式：必须是PNG格式，支持透明通道。
• 尺寸：虽然没有绝对标准，但建议提供一个足够大的基准尺寸，例如1080x1920（竖屏）或1920x1080（横屏）。.9.png机制会基于此进行智能缩放，大图能提供更多细节。
• 设计要点：在设计时，就要有“九宫格”意识。将需要固定不变的元素（Logo、关键文字、边角装饰）尽量安排在四个角或边缘。将纯色、渐变或可重复图案的区域放在中间，这些区域将被定义为可拉伸区。避免将重要细节放在可能被拉伸的区域中心。

4. 实操步骤：手把手制作uniapp启动图.9.png

下面我们以最常见的“居中Logo+背景渐变”竖屏启动图为例，使用Android Studio的Draw 9-patch工具，完成一张.9.png的制作。

4.1 步骤一：导入与初识编辑界面

假设我们有一张1080x1920的splash.png，Logo居中，背景为自上而下的蓝色渐变。

1. 按照3.1节的方法，在Android Studio中创建splash.9.png并打开编辑器。
2. 界面主要分为三部分：
   • 左侧编辑区：显示你的原始图片，四周有透明的一像素宽边缘，用于画黑线。
   • 右侧预览区：显示这张.9.png在不同尺寸设备上的拉伸效果，通常会有几个不同长宽比的预览框。
   • 底部错误区：如果画的线有问题（如线段不连续），这里会提示。

4.2 步骤二：绘制顶部可拉伸线（垂直拉伸）

我们的背景是垂直渐变，我们希望拉伸时，渐变能平滑过渡，而顶部的深蓝色和底部的浅蓝色区域不被拉伸（以保持色调端点）。

1. 在左侧编辑区的顶部边缘，找到对应纯色背景中间渐变部分的位置。
2. 点击鼠标左键并拖动，画出一条黑线线段。这条线段应覆盖从Logo上方开始，到Logo下方结束的垂直范围所对应的顶部边缘位置。实际上，因为顶部线代表的是纵向像素列，你只需要在顶部边缘标记出可拉伸区域的起始点和结束点。
3. 更简单的策略：对于均匀渐变，我们通常允许整个背景区域在垂直方向上拉伸。所以，可以从顶部边缘的最左端画到最右端（留出1像素的角点不画）。但要注意，如果顶部有非渐变的纯色条（比如状态栏背景色），则需要避开。

实操心得：画线时按住Shift键可以画直线。放大视图（Ctrl+鼠标滚轮）可以画得更精确。随时观察右侧预览图，看渐变拉伸是否自然。

4.3 步骤三：绘制左侧可拉伸线（水平拉伸）

通常对于居中Logo的启动图，水平方向我们也不希望Logo被拉伸，只拉伸Logo左右的背景区域。

1. 在左侧边缘，对应于Logo左侧的背景区域画一条线段。
2. 同样，在左侧边缘，对应于Logo右侧的背景区域再画一条线段。这意味着水平方向有两段可拉伸区域：Logo左边和右边。这是完全允许的，系统会智能地拉伸这两部分来填充宽度。
3. 另一种策略：如果背景是纯色或水平方向无特殊要求，可以从左侧边缘最上端画到最下端，表示整个水平方向都可均匀拉伸。

4.4 步骤四：绘制右侧与底部内容线

对于我们的简单启动图，内容就是居中的Logo。我们需要确保无论怎么拉伸，Logo都显示在安全区域内。

1. 在右侧边缘，找到与Logo右边界对齐的位置，画一条从上到下的黑线。这条线告诉系统：“内容的右边界到此为止”。
2. 在底部边缘，找到与Logo下边界对齐的位置，画一条从左到右的黑线。这条线告诉系统：“内容的下边界到此为止”。
3. 重要：内容线画好后，右侧预览图中，你会看到在拉伸后的图片上，有一个半透明的灰色区域，那就是定义的内容填充区。我们的Logo应该始终在这个灰色区域内。

4.5 步骤五：检查、预览与导出

1. 检查错误：确保四条边上的黑线是连续的线段（可以有间隔，但线段本身要连续），并且是纯黑色（#000000）。任何断点或非纯黑色都可能导致编译失败或渲染异常。
2. 多预览：仔细观察右侧不同尺寸（方形、宽屏、超高屏）的预览效果。确保Logo在所有预览中比例正常、位置居中，背景渐变拉伸平滑无断层。
3. 导出使用：编辑完成后，直接保存即可。Android Studio已经帮我们生成了正确的splash.9.png文件。这个文件可以直接用于uniapp。

5. 在Uniapp中配置.9.png启动图

制作好.9.png文件后，接下来就是如何在uniapp项目中使用了。这里需要注意，uniapp对启动图的配置有自己的一套规则。

5.1 放置图片文件

不要直接替换HBuilderX自动生成的启动图。正确做法是：

1. 在uniapp项目的nativeplugins目录下（如果没有则需自定义原生插件），或者更常见的做法是，在开发安卓原生插件时使用。但对于单纯替换启动图，最直接的方法是编译自定义基座。
2. 推荐流程（编译自定义基座）：
   • 在HBuilderX中，找到你的项目，点击运行->运行到手机或模拟器->制作自定义调试基座。
   • 这个过程会打开原生工程（Android Studio）。你需要将制作好的splash.9.png文件，复制到安卓原生工程的app/src/main/res/drawable-xxxhdpi等对应分辨率目录下，并重命名为splash.png（注意，这里文件是.9.png格式，但名字是splash.png）。实际上，Android系统会自动识别.9.png格式。
   • 更规范的做法是，在app/src/main/res/下创建drawable目录（不帶分辨率后缀），将splash.9.png放进去，系统会将其作为默认drawable使用。
   • 然后按照HBuilderX的指引完成基座编译。之后，选择这个自定义基座运行，就能看到效果。

5.2 配置manifest.json

在项目的manifest.json文件中，App启动图配置部分，你需要正确配置。

1. 在“Android启动图”配置中，确保你勾选了“自动生成png格式启动图”或类似选项。但更重要的是，你需要提供一张高分辨率的启动图源文件（例如2048x2732），uniapp在打包时会根据这个源图为不同分辨率屏幕生成多套图片。
2. 关键点：如果你已经制作了完美的.9.png，并希望通过自定义基座使用，那么在云端打包时，可以尝试在manifest.json->App模块配置中，取消勾选“启动图”模块（如果允许），然后使用原生方式提供启动图。但这需要较高的原生开发熟悉度。
3. 对于大多数开发者的实用建议：直接使用uniapp的自动生成机制，但提供一张在设计上就符合.9.png拉伸原理的源图。即，将Logo等重要元素放在靠近画面中心的位置，四周留出足够的、可被安全拉伸的纯色或渐变背景。这样，即使uniapp生成的是普通PNG，在不同屏幕上的变形也会在可接受范围内。这是一种折中但高效的方案。

5.3 真机调试与验证

配置完成后，必须进行真机调试，测试不同屏幕尺寸和比例的安卓设备。

• 测试设备覆盖：尽可能找一些极端比例的设备，如18:9、19.5:9、20:9的全面屏手机，以及一些老款的16:9甚至4:3屏幕的设备。
• 观察重点：
  1. Logo是否始终保持原始比例，没有压扁或拉高？
  2. 背景填充是否完整，有无黑色边框或留白？
  3. 启动图与首页的切换是否流畅，有无跳闪？

6. 常见问题排查与实战技巧

在实际操作中，你会遇到各种各样的问题。这里我总结了一份排查清单和几个教科书里不会写的技巧。

6.1 问题排查速查表

6.2 高级技巧与心得

1. “最小可拉伸单元”原则：对于纹理背景（如布纹、木纹），定义可拉伸区域时，应选择一个纹理能够无缝平铺的最小单元。通常是在纹理图案的一个周期点开始和结束画线，这样拉伸时实际上是重复这个单元，而不是扭曲单个像素。
2. 内容线的灵活运用：内容线不仅可以保护内容不被遮挡，还可以用来控制内容的位置。例如，如果你希望启动图的文字始终贴在底部上方一定距离，可以将底部内容线画在比文字实际位置更高的地方。系统会保证内容区在线内，从而间接定位了文字。
3. 为横屏单独制作：如果你的应用支持横屏启动，务必为横屏模式单独制作一张.9.png。竖屏图的拉伸逻辑在横屏上会完全错误。在原生工程中，可以将其放在drawable-land目录下。
4. 与uniapp原生插件开发结合：如果你需要更极致的启动控制（如动态启动图、视频启动屏），最终都需要开发原生插件。那时，对.9.png的理解和制作能力就是基础。你可以在插件的AndroidManifest.xml中直接指定自己的.9.png作为启动图资源。
5. 备份源文件：始终保留一份没有黑线的原始PNG文件。当你需要调整设计时，在原始文件上修改，再重新生成.9.png，比直接编辑.9.png文件要可靠得多。

制作.9.png是一个需要耐心和细致观察的过程，尤其是第一次操作时，可能需要反复调整几次黑线才能达到完美效果。但一旦掌握，它就能一劳永逸地解决安卓多屏幕适配中的一个顽固问题。当你看到自己的应用在各种奇形怪状的手机上都能展示出标准、不畸变的启动画面时，这种对细节的掌控感会让你觉得所有的努力都是值得的。