uniapp微信小程序发布h5适配

最新推荐文章于 2024-06-13 17:37:58 发布
最新推荐文章于 2024-06-13 17:37:58 发布
阅读量2.5k 收藏 5
点赞数 2
文章标签： 微信小程序 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EEstefan/article/details/122151718
版权

背景

这次项目是要兼容微信小程序、h5的。目前开发完成发现，微信小程序和手机浏览器打开h5，页面都是正常的。在PC浏览器和ipad上打开H5，出现了布局和字体错乱。

解决步骤

自定义模板路径

在manifest.json H5配置中，填写 index.html 模板路径
在这里插入图片描述
这是为了方便些条件编译当在h5下的时候

在index.template.html中

<!DOCTYPE html>
<html lang="zh">
<head>
	<link rel="shortcut icon" href="<%= BASE_URL %>static/favicon.ico">
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
最低0.47元/天 解锁文章
嗯，醴！
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
基于uniapp微信小程序我的钱包页面
03-26
【基于uniapp微信小程序我的钱包页面】开发详解 在移动应用开发领域，微信小程序因其轻量化、便捷的特性，已经成为开发者的重要选择。而uniapp作为一款跨平台开发框架，能够帮助开发者快速构建H5、微信小程序、...
uniApp开发h5踩坑 px转rpx转rem 1px转2rpx 2倍
lqins的博客
08-23 4676
uniApp开发h5踩坑 px转rpx转rem 1px转2rpx 2倍
移动端自适应布局解决方案——rem
小九的博客
11-02 2404
移动端自适应布局解决方案——rem 发表于 2016-06-16   |   2条评论   |   阅读次数 79 自适应布局方案有百分比布局、flex布局、弹性flex布局等，但是都有一些缺点。 百分比布局缺点：字体大小需要另外一套自适应方法来调整；当屏幕宽度大于700px后，继续按照百分比元素会偏大，这个时候调整起来会比较麻烦。 flex布局、弹性flex布局：
微信小程序和H5的样式自适应和屏幕兼容
最新发布
HZWhaiwang的博客
06-13 840
在前端开发中，确保应用在各种设备和屏幕尺寸上都有良好的用户体验是一项重要的任务。微信小程序和H5页面的自适应兼容问题更是如此，尤其是在微信小程序中通过组件加载H5页面时。本文将详细探讨如何处理微信小程序和H5的样式自适应兼容问题，并分享一些具体的实现方法和技巧。
uni-app使用rem单位布局
热门推荐
weixin_48495574的博客
04-22 1万+
问题描述：一般使用uni-app是开发移动端，但是根据需求需要开发pc端又想用uni-app的技术，pc端使用rpx会出现不兼容，所有使用rem布局； 解决思路：uni-app提供了可以设置html标签字体的组件 page-meta 可以动态渲染html字体大小从而实现响应式布局,组件详情请看官方文档：https://uniapp.dcloud.io/component/page-meta <template> <view class="indexBody"> <page
uniapp 中使用 rem 以及改变窗口动态刷新页面
微光无限的博客
01-23 1720
uniapp 中使用 rem 以及改变窗口动态刷新页面
uniapp 项目中使用rem 进行PC和app端的适配
aaassdf11的博客
06-08 5088
uniapp 项目中使用rem 进行PC和app端的适配
uniapp实现用户全局设置应用字体大小（适用于各端）
AKA多个A的博客
08-17 4183
vuex_fontsize: 9, //数值根据自己项目调整。
uniapp中rpx、px、em、rem、%、vh、vw的区别是什么
zz_ll9023的博客
12-09 2048
在选择rpx、px、em、rem、%、vh和vw这些长度单位时，需要根据具体的使用场景和需求进行选择。总之，在选择长度单位时，需要考虑具体的使用场景、设备的特性以及页面的响应式设计需求。根据需要呈现的效果和页面的兼容性需求进行选择。rpx、px、em、rem、%、vh、vw的区别主要体现在定义和特性上。
Uniapp微信雪糕刺客单页小程序源码
05-29
`Uniapp`是一个跨平台的开发工具，允许开发者使用Vue.js语法编写代码，一次编写，多端运行，包括微信小程序、H5、APP等。此项目特别之处在于采用了`TMUI 2.0`作为UI框架，它是专为`HBuilder`设计的一套Vue 2.x组件库...
ChatGPT聊天微信小程序源码/适配H5和WEB端
03-05
ChatGPT-MP(基于ChatGPT实现的微信小程序，适配H5和WEB端) 可二开包含前后台，支持打字效果输出流式输出，支持AI聊天次数限制，支持分享增加次数等功能。 技术栈：JDK8 + SpringBoot + Vue2 + uniapp + Mysql 包含...
微信小程序uniapp日历组件
08-10
微信小程序uniapp日历组件是开发者常用的一种交互元素，它为用户提供了一个方便的方式来选择日期，常见于各种需要用户输入时间信息的应用场景，如预订、事件安排等。在本文中，我们将深入探讨如何使用JavaScript开发...
微信小程序引导组件【添加到我的小程序】
03-30
uni-app是一个多端开发框架，它允许开发者用一套代码就能编写出适应于微信小程序、H5、App等多个平台的应用。这个组件的主要功能是提示用户将小程序添加到他们的“我的小程序”列表中，这样用户就能更方便地在未来...
移动端适配
weixin_73416102的博客
12-08 1856
移动端适配
uniapp分享实现
m0_67388537的博客
07-20 7458
在 manifest.json 的 App SDK 配置里，勾选微信消息及朋友圈，并填写 appid，如需在iOS平台使用还需要配置通用链接。如果手机端未安装QQ、微博，调用时会启动这些平台的wap页面分享，如果已安装相应客户端，会启动它们的客户端分享。可以得到配置的结果列表，注意这里返回的是manifest配置的，与手机端是否安装微信、QQ、微博无关。可以分享到微信、QQ、微博，每个社交平台被称为分享服务提供商，即provider。微信小程序分享不支持调用api分享，只支持用户手动点击分享。
uniapp 打包h5，自定义环境变量发行
anwenagululu的博客
11-15 701
uniapp借助HBuilderX可视化工具，可以进行开发、打包、上线等操作自定义环境变量后可以使用自定义发行环境根据开发、生产不同环境，一些判断、展示都会有不同，例如：api域名链接等等，那么如何进行判断呢？ 这里我们可以根据process.env.NODE_ENV的值进行判断，值为development是开发，值为production是生产 package.json根目录新建package.json文件，增加uni-app扩展节点，可实现自定义条件编
uniapp rpx在超过960时样式错位的问题，uniapp兼容ipad平板配置
L_C_sunny的博客
03-09 2236
在移动设备上也有很多屏幕宽度，设计师一般只会按照750px屏幕宽度出图。此时使用rpx的好处在于，各种移动设备的屏幕宽度差异不是很大，相对于750px微调缩放后的效果，尽可能的还原了设计师的设计。但是，一旦脱离移动设备，在pc屏幕，或者pad横屏状态下，因为屏幕宽度远大于750了。此时rpx根据屏幕宽度变化的结果就严重脱离了预期，大的惨不忍睹。“这里需要对rpx的使用特别强调一下。
uni-app不同设备屏幕适配兼容问题
qiaoyin33的博客
03-22 2504
/ 引入组件...App})// 判断是否是平板console.log("屏幕尺寸：", res.windowWidth, res.windowHeight)}else{});
uniapp微信小程序面试题
05-01
Uniapp 是一个跨平台的开发框架，可以在不同的平台上实现一次编码，多端部署，非常适合开发微信小程序。以下是 Uniapp 微信小程序面试题的答案： 1. Uniapp 是什么？ Uniapp 是一个跨平台的开发框架，可以基于 Vue.js 做开发，实现一次编码多端部署，包括微信小程序、H5、APP（安卓和 IOS）、快应用等。 2. 与传统微信小程序开发的区别是什么？ 与传统微信小程序开发相比，Uniapp 开发更加高效，可以大大减少开发时间，同时也可以让开发者更加便捷地实现一次编码多端部署。 3. Uniapp 微信小程序如何实现多端适配？ Uniapp 可以使用自动适配方案，在不同机型上自动调整组件大小和布局。如果需要自定义适配方案，可以根据不同平台的 CSS 尺寸单位和样式特性定义不同的样式来实现多端适配。 4. 如何添加微信小程序原生组件？ 可以在 Uniapp 项目中使用相应的组件，然后在微信小程序中进行适配。如果需要使用微信小程序原生组件，可以使用插件的形式将原生组件导入 Uniapp 项目中使用。 5. 如何进行微信小程序支付？ 可以使用 uni.request 接口向自己服务端请求支付的相关参数，然后调用 uni.requestPayment 接口发起支付请求，支付成功后进行相应的处理。在开发过程中需要注意安全性和用户体验，避免出现支付问题。 总之，Uniapp 微信小程序的开发让开发者更加容易实现一次编码多端部署，提高开发效率，也让用户体验更加顺畅。在开发过程中需要根据不同的需求和平台特性进行适配，保证产品的质量和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值