uniapp启动图被拉伸问题

记录下:
安卓手机有不同的规格,很难所有规格都去适配。如果不适配所有机型,那么就会导致部分机型的启动图被拉伸。
安卓提供了.9.png图片格式,允许标注部分拉伸,这样启动图中间的logo就不会被拉伸。

下面2张图是没有启用.9.png和启用.9.png的启动图效果

制作.9.png的步骤

1、使用android studio 自带的编辑工具或单独下载一个编辑器

从dcloud下载地址为; drawpng下载地址

步骤1:将图片拖入编辑器中

步骤2:将图片放大到百分之800,底部滚动条拖至最右侧,左侧滚动条拖至最底部,幷选择最底部和最右侧,让其变成黑色

步骤3:把底部滚动条拖至最左侧,在最左侧马赛克条随便找个位置点击拖动至底部,让其变成黑色

步骤4:用同样的方法处理左侧角和右上边

步骤5:勾选最低部2个复选框,同时调整4个角的位置,看右侧效果图,如果右侧效果图不变形则可以点击左侧顶部的file保存.9.png图片

步骤6:将编辑好的文件放到对应的文件夹

步骤6:重新编译安装看小效果

注意:如果还是被拉伸,如果使用云插件,需要云打包,没有的话本地打包,或者重新构建本地开发基座

### 启动页配置教程 在 UniApp 中实现应用启动时显示封面或启动页,主要涉及 `manifest.json` 文件的配置以及图片资源的设计。以下是详细的说明: #### 1. **配置 manifest.json** - 推荐通过 HBuilderX 提供的可视化操作界面来完成大部分配置工作[^1]。 - 打开项目后,在左侧导航栏找到并点击 “清单文件 (manifest)” 进入配置页面。 - 切换到 “App Module” 或者对应平台(如 Android/iOS)下的设置选项卡。 #### 2. **设计启动页图片** - 启动页通常是一个静态图片,建议分辨率适配主流设备屏幕尺寸。例如,对于安卓设备,可以使用分辨率为 1080×2340 的 PNG 图片,并将其转换为 `.9.png` 格式的可拉伸图片[^2]。 - 如果没有 Android Studio 自动生成工具,也可以借助在线生成器或其他软件制作 `.9.png` 文件。 #### 3. **放置启动页图片** - 将准备好的启动页图片放入项目的 `static` 文件夹或者指定目录下。 - 确保路径正确无误以便后续引用。 #### 4. **具体参数调整** - 对于微信小程序等特定环境,需注意将相关 ID 和其他必要信息填写至对应的节点位置,比如 `mp-weixin` 节点用于存储微信小程序专属数据。 - 若涉及到原生功能调用,则可能还需要关注 Native.js 权限部分是否会依据所选模块自动生成相关内容。 #### 示例代码片段 以下展示了一个简单的 HTML 结构作为启动页模板: ```html <template> <view class="launch-page"> <!-- 显示启动页背景 --> <image src="/static/launch_image.9.png" mode="widthFix"></image> </view> </template> <style scoped> .launch-page { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } image { max-width: 100%; } </style> ``` 上述代码定义了一张宽度固定而高度随比例变化的图像充当启动画面效果。 --- ### 注意事项总结 - 不同操作系统可能会有不同的最佳实践,请参照官方文档进一步确认细节处理方式。 - 默认情况下某些内置 Modules 可能无需额外手动设定即可正常运作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值