位置: IT常识 - 正文

uniapp 开发H5打包微信小程序样式失效的解决之道(uniapp打包成h5如何调用原生)

编辑:rootadmin
uniapp 开发H5打包微信小程序样式失效的解决之道

推荐整理分享uniapp 开发H5打包微信小程序样式失效的解决之道(uniapp打包成h5如何调用原生),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp命令行打包h5页面,uniapp开发h5部署,uniapp打包h5部署速度慢,uniapp开发h5打包后弹框显示在底部,uni-app h5打包,uniapp打包成h5如何调用原生,uniapp打包成h5如何调用原生,uniapp打包成h5如何调用原生,内容如对您有帮助,希望把文章链接给更多的朋友!

使用uniapp开发H5,样式已经按照UI设计稿全部实现。但是在打包微信小程序调试的时候,遇到很多样式失效的问题。问了度娘很久,并没有完全解决样式失效的问题。于是自己按照从度娘上查到的方法去进行组合尝试,最终样式失效问题得到了完全的解决。

样式不生效的原因:u-view框架组件自带的class优先级高于开发者自定义的优先级,所以显示的是组件的默认样式(网上有说是样式隔离)。解决办法就是提高自定义样式的优先级,使用自定义的样式去覆盖默认样式。

一、输入框(u–input)样式失效解决之道

在H5上,u–input的样式是可以完美展示的,但是到了微信小程序上,样式完全失效了。经过一番摸索,找到了最终的解决方法。

把样式失效的 u–input 改成 u-input。

在u-input的自定义样式之前添加默认样式的class名,u-input__content,而且要使用深度渲染,写成::v-deep.u-input__content。这样H5中的样式就可以完全应用到微信小程序上了(前后插槽的样式也完美应用),示例代码如下。

::v-deep.u-input__content, .row-input {height: 70rpx;width: calc(100vw - 150rpx - 120rpx);background-color: #FEFCF8;border-radius: 8rpx;font-size: 24rpx;font-weight: 500;color: #999999;line-height: 24rpx;margin-top: 30rpx;//前插槽样式.prefix {padding: 0 20rpx;image {width: 30rpx;height: 30rpx;}}//后插槽样式.suffix {padding: 0 20rpx;image {width: 30rpx;height: 30rpx;}.picture-code {width: 100rpx;height: 48rpx;}}}.placeholder { //占位提示文字的样式font-size: 24rpx;font-weight: 500;color: #999999;line-height: 24rpx;}}

补充:组件的默认样式的class名如何获取。

二、u-list样式失效的解决之道

在u-list的自定义样式的class之前添加 默认样式的class u-list。就可以解决样式失效的问题。

uniapp 开发H5打包微信小程序样式失效的解决之道(uniapp打包成h5如何调用原生)

对于列表顶部被导航栏遮挡,则需要添加一个view进行包裹,通过调节外层view的margin来进行调节。

示例代码如下:

.store-section, .u-list { //添加默认样式的class u-listbackground-color: #F7F1E8;border-radius: 40rpx 40rpx 0px 0px; padding: 20rpx 0rpx;}三、底部安全区域失效

H5上可以使用 ****标签设置相应的背景色作为底部安全区域,但是微信小程序失效了。

微信小程序上应该使用一个 ****来替换。标签的样式如下:

.safe-bottom {background-color: #F4EBDF;height: var(--safe-area-inset-bottom);}四、图片不显示问题

图片不显示,主要就是路径不对。

自定义组件的图片路径: /static/detail/personal-store-logo.png。

page里组件的路径: @/static/home/have-a-goods.jpeg。

图片路径的问题,也不一定就像上方那样,自己去尝试修改就好了,以图片显示为准。

五、u-icon不显示

遇到u-view里的u-icon不显示的情况,一般就是u-icon外面多包了一层组件,把多包的组件去掉u-icon就可以正常显示了。

六、u-cell-group样式失效解决之道

对于u-cell-group样式失效的问题,尝试过使用覆盖样式的问题,但是不生效。最终的解决之道是在u-cell-group外面包了一层view。把u-cell-group的样式放到view上。示例代码如下:

<view class="group-background"><u-cell-group><u-cell title="检测更新" :titleStyle="cellTitleStyle" size="large" :isLink="true" @click="checkUpdate()"></u-cell><u-cell title="隐私政策" :titleStyle="cellTitleStyle" size="large" :isLink="true"@click="privacyAgreement()"></u-cell></u-cell-group></view>.group-background {width: 100%;background-color: #FEFCF8;margin-top: 40rpx;}

至此,经过上面的一番修改之后,uniapp开发的H5的样式就可以完美的在微信小程序中展示了。

本文链接地址:https://www.jiuchutong.com/zhishi/289033.html 转载请保留说明!

上一篇:超详细纯前端导出excel并完成各种样式的修改(xlsx-style)(前端gui)

下一篇:vue3 antd项目实战——Form表单的重置与清空【resetFields重置表单未生效(手写重置函数)】(antd-vue-pro)

  • 用什么方法对自己的网站推广?(用什么方法对自己说话)

    用什么方法对自己的网站推广?(用什么方法对自己说话)

  • iqooz5x支持反向充电吗

    iqooz5x支持反向充电吗

  • 苹果外屏是指哪里(苹果外屏指的是)

    苹果外屏是指哪里(苹果外屏指的是)

  • 网店基础数据指什么(网店数据分析报告怎么写)

    网店基础数据指什么(网店数据分析报告怎么写)

  • 快手多少级在哪里看(2021快手等级)

    快手多少级在哪里看(2021快手等级)

  • 小方摄像头恢复出厂设置位置(小方摄像头恢复声音)

    小方摄像头恢复出厂设置位置(小方摄像头恢复声音)

  • 打印机打印一道一道的(打印机打印一道一道的黑线)

    打印机打印一道一道的(打印机打印一道一道的黑线)

  • 公众号头像需要原创吗(公众号头像需要多少像素)

    公众号头像需要原创吗(公众号头像需要多少像素)

  • 华为手机畅连通话如何开通(华为手机畅连通话在哪里关闭)

    华为手机畅连通话如何开通(华为手机畅连通话在哪里关闭)

  • 一加8防水吗(一加8是否防水)

    一加8防水吗(一加8是否防水)

  • 企业微信32位和64位有什么区别(企业微信32位版本下载安装)

    企业微信32位和64位有什么区别(企业微信32位版本下载安装)

  • b站修改内容待审核要多久(b站修改稿件对播放的影响)

    b站修改内容待审核要多久(b站修改稿件对播放的影响)

  • 嘀嗒顺风车有发票吗(嘀嗒顺风车有奖励吗)

    嘀嗒顺风车有发票吗(嘀嗒顺风车有奖励吗)

  • 手机微信为什么老掉线(手机微信为什么发不了语音)

    手机微信为什么老掉线(手机微信为什么发不了语音)

  • cr2023和cr2025通用吗(cr2023和cr2025的区别)

    cr2023和cr2025通用吗(cr2023和cr2025的区别)

  • 微信授权拼多多怎么取消(微信授权拼多多不成功)

    微信授权拼多多怎么取消(微信授权拼多多不成功)

  • 华为nova5i是快充吗(华为nova5i快充多少w)

    华为nova5i是快充吗(华为nova5i快充多少w)

  • 华为天际通可以开热点吗(华为天际通可以卸载吗)

    华为天际通可以开热点吗(华为天际通可以卸载吗)

  • 手机号异常是怎么恢复(手机号异常是怎么回事)

    手机号异常是怎么恢复(手机号异常是怎么回事)

  • 360浏览器如何下载视频(360浏览器如何下载图片)

    360浏览器如何下载视频(360浏览器如何下载图片)

  • 手机上显示无障碍是什么意思(手机上显示无障碍打不了电话)

    手机上显示无障碍是什么意思(手机上显示无障碍打不了电话)

  • Win7系统查看服务的信息的方法(win7怎么看服务)

    Win7系统查看服务的信息的方法(win7怎么看服务)

  • gtx580吃鸡 gtx580显卡能玩吃鸡吗(580显卡玩吃鸡多少帧)

    gtx580吃鸡 gtx580显卡能玩吃鸡吗(580显卡玩吃鸡多少帧)

  • 秋分时日的卡斯蒂略金字塔,墨西哥奇琴伊察 (© Somatuscani/Getty Images Plus)(秋分日的时间意义庆祝方式)

    秋分时日的卡斯蒂略金字塔,墨西哥奇琴伊察 (© Somatuscani/Getty Images Plus)(秋分日的时间意义庆祝方式)

  • ps一个页面怎么添加多个画布(ps一个页面怎么选中画板)

    ps一个页面怎么添加多个画布(ps一个页面怎么选中画板)

  • phpcms怎么判断是否有图片(php判断https)

    phpcms怎么判断是否有图片(php判断https)

  • 免税收入怎么做会计分录
  • 转让不动产账务处理
  • 长期应收款的计税基础 陈版
  • 怎么在电子税务局添加银行账户
  • 税局函调准备哪些资料
  • 债券置换债务
  • 财政部颁布的具体准则
  • 经营利润所得税费用的计算公式
  • 收到客户不要的定金怎么做账?
  • 未分配利润可以转盈余公积吗
  • 增值税专用发票开错了咋办
  • 税收分类编码如何填写
  • 房地产企业增值税税率是多少
  • 注销公司税务一年几次
  • 发票收款人和开票人
  • 影视制作公司是做什么的
  • 未分配利润为负的原因
  • 生产人员社保计入哪个科目
  • 房租费属于无形资产吗
  • 如何让自己的网站被百度收录
  • 腾讯电脑管家流量监控不显示
  • 跨年的费用冲回会计分录
  • 年度利润总额是会计利润吗
  • 社保怎么计提
  • 企业之间资金拆借利息是否可以税前扣除
  • windows update更新错误
  • 笔记本电脑保养常识电池
  • 所得税季度预缴怎么算
  • 付不出去的应付账款如何写说明书
  • 单位管理费用核算
  • 企业购入固定资产要交印花税吗
  • 报销办公用品会计分录计入其他应付还是其他应收
  • framework core
  • 超限量发票申请下来后怎么操作
  • php用于输出的有哪些方式
  • 工行退款短信图片
  • php查询sqlserver数据库
  • 数据分析课
  • 注意力机制的作用
  • 路由加载的几种方式
  • 2021前端面试大全
  • python文件间传递参数
  • dedecms标签怎么用
  • 个人所得税汇算清缴怎么计算
  • 房产税城镇土地使用税申报期限
  • 车保险里面的车船税
  • 人力资源社保代缴
  • 研发人员伙食费可以加计扣除吗为什么
  • 怎么去银行买承兑
  • 免抵退税和留抵退税计算题
  • 享受优惠政策的通知
  • 银行存款日记账怎么记账
  • 事业单位开的发票
  • 变更公司名称后银行如何做
  • 存货跌价准备怎么结转成本
  • 营业收入和销售收入的比值
  • 会计账簿的启用与登记实验报告
  • macbookpro怎么改系统
  • os x yosemite10.10.5怎么样?os x yosemite10.10.5公测版下载地址
  • vim显示中文乱码
  • 进程spoolsv.exe
  • 远程操作win10
  • win7笔记本任务管理器
  • win7升级win10收费吗
  • 怎样设置Win XP下安装打印机驱动程序
  • windows 8.1有哪些版本
  • Java中string类型比较大小
  • 表单验证element
  • 人机交互编程
  • js在对象的方法中访问属性name的语法为
  • js的运算符
  • shell脚本判断两个数大小
  • jquery.validate 自定义验证方法及validate相关参数
  • js prev()
  • 即将发布的新能源汽车
  • jquery判断数据类型
  • 社保银行代扣收费吗
  • 社保缴费电子回单在哪里截图
  • 自然人扣缴端初始密码
  • 税务局人员调动
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设