位置: 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)

  • 哔哩哔哩一起看功能在哪(哔哩哔哩一起看在哪里)

    哔哩哔哩一起看功能在哪(哔哩哔哩一起看在哪里)

  • 怎么取消打印机休眠状态(怎么取消打印机正在打印的文件)

    怎么取消打印机休眠状态(怎么取消打印机正在打印的文件)

  • 电池soc是什么意思(电池里的soc是什么意思?)

    电池soc是什么意思(电池里的soc是什么意思?)

  • 手机卡丢了怎么办(手机卡丢了怎么找回来)

    手机卡丢了怎么办(手机卡丢了怎么找回来)

  • 手机号封了多久可以解封(手机号封多久会被注销)

    手机号封了多久可以解封(手机号封多久会被注销)

  • 快手的动态怎么越来越少(快手的动态怎么打开)

    快手的动态怎么越来越少(快手的动态怎么打开)

  • 微信朋友圈怎么设置更多信息(微信朋友圈怎么关闭)

    微信朋友圈怎么设置更多信息(微信朋友圈怎么关闭)

  • qq里面的草莓标识怎么来的(qq里的草莓怎么弄)

    qq里面的草莓标识怎么来的(qq里的草莓怎么弄)

  • 麒麟810是几纳米(麒麟810是几纳米工艺制程)

    麒麟810是几纳米(麒麟810是几纳米工艺制程)

  • 万能钥匙连接上wifi却不能上网(万能钥匙连接上网络不可使用)

    万能钥匙连接上wifi却不能上网(万能钥匙连接上网络不可使用)

  • 电脑无信号是什么情况(电脑无信号是什么原因,应该怎么处理)

    电脑无信号是什么情况(电脑无信号是什么原因,应该怎么处理)

  • 磁盘清理程序是系统软件吗(磁盘清理是清理什么)

    磁盘清理程序是系统软件吗(磁盘清理是清理什么)

  • 华为怎么进入安全模式(华为怎么进入安全模式能用微信)

    华为怎么进入安全模式(华为怎么进入安全模式能用微信)

  • 安卓手机如何清理垃圾(安卓手机如何清理内存)

    安卓手机如何清理垃圾(安卓手机如何清理内存)

  • 只知道qq号怎么找人(只知道qq号怎么加微信好友)

    只知道qq号怎么找人(只知道qq号怎么加微信好友)

  • 怎样把快手视频存本地(怎样把快手视频保存到相册)

    怎样把快手视频存本地(怎样把快手视频保存到相册)

  • 怎么在ppt里做表格(怎么在ppt做表格)

    怎么在ppt里做表格(怎么在ppt做表格)

  • 黑领结模版在哪里设置(黑领结值得换吗)

    黑领结模版在哪里设置(黑领结值得换吗)

  • 如何开发房地产APP软件(如何开发房地产商业客户)

    如何开发房地产APP软件(如何开发房地产商业客户)

  • qq的小程序游戏在哪里找(qq的小程序游戏怎么删掉?)

    qq的小程序游戏在哪里找(qq的小程序游戏怎么删掉?)

  • airpods开关键什么用(ipod airpods开关)

    airpods开关键什么用(ipod airpods开关)

  • 微信怎么看加的好友(微信怎么看加的群)

    微信怎么看加的好友(微信怎么看加的群)

  • 前后端分离项目,如何解决跨域问题?(前后端分离项目部署到服务器)

    前后端分离项目,如何解决跨域问题?(前后端分离项目部署到服务器)

  • 投资性房地产采用成本模式计量
  • 税务一证通
  • 培训学校可以不可以用燃气取暖炉
  • 注册资本金实缴和认缴区别
  • 工会筹备金免征政策
  • 租入房租装修费摊销
  • 货物赔偿是否需要发票
  • 准予抵扣的进项税额计算公式
  • 供应商价格折扣
  • 跨年暂估收入如何调整
  • 工地水电包公包料的细节
  • 水利建设基金2021
  • 税务局拍卖资产
  • 2017年8月1日到现在多少天
  • 社会团体非限定性净资产
  • 会计科目与账户的关系
  • 电脑不能上网是什么原因?
  • 如何删除驱动器里面的文件
  • xwizard.exe是什么
  • 付款结算单范本
  • PHP:imagefilltoborder()的用法_GD库图像处理函数
  • 苏格兰高地什么意思
  • 收到员工罚款分录
  • 长期股权投资资本化
  • 海关进口税可以抵扣吗
  • vue foreach is not a function
  • 前端必会
  • ChatGPT等大模型的模型量化:平滑量化法
  • blkid命令详解
  • 融资租赁的会计科目
  • 企业从政府部门辞职流程
  • linux lab安装
  • 会计科目在建工程含税吗
  • 进口关税完税价格的计算公式
  • 财务负责人需要承担什么风险
  • 租单位的房子怎么办营业执照
  • 留抵进项税额怎么做分录
  • 城建税的征收范围不包括农村
  • 发放个税返还用不用申报
  • 上年折旧没提今年可以补提吗
  • 公摊水电费计入什么科目
  • 替别人公司开发票违法吗
  • 收到所得税退税的账务处理
  • 工会经费的列支范围有哪些
  • 企业失信是什么意思
  • 编制记账凭证的依据
  • Hibernate4在MySQL5.1以上版本创建表出错 type=InnDB
  • windows installation disc
  • 扩展什么
  • solaris挂载nfs
  • wcu.exe是什么
  • centos6.5dns配置
  • 本地磁盘文件系统
  • ctd module
  • windows组策略a-g-dl-p
  • 电脑xp桌面
  • linux启动u盘制作
  • windows 10 mobile--移动版
  • windows7basic怎么改
  • tplinkwr740n设置
  • Win7系统文件损坏怎么修复
  • Win10 RS1 14267 SDK版本发布下载
  • cocos 源码
  • webpack中CommonsChunkPlugin详细教程(小结)
  • linux修改磁盘格式指令
  • css划动
  • Node.js中的事件循环是什么
  • 浏览器app测试要点
  • jquery创建表格
  • shell脚本实现Linux运维监控
  • javascript indexOf方法、lastIndexOf 方法和substring 方法
  • 删除的照片怎么还原
  • 欢迎使用微信支付
  • 控件begininvoke
  • python 字典怎么添加数据
  • 百望税控盘电子发票发送邮箱
  • 江苏省国税电子税务局官网发票验
  • 税率的计算器在线计算
  • 企业在开办过程中的具体流程
  • 如何查询有没有交医保费用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设