微信小程序 —— 踩坑记

最新推荐文章于 2024-02-13 18:02:53 发布

令主

最新推荐文章于 2024-02-13 18:02:53 发布

阅读量768

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_45806814/article/details/108382148

版权

小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文记录了在微信小程序开发中遇到的三个问题：button宽度修改无效、margin-right设置无效和背景图片真机不显示。针对这些问题，提出了直接在button标签内设置style以及将背景图片转为base64的解决策略，并邀请读者分享更多解决方案。

摘要由CSDN通过智能技术生成

1、修改button按钮的宽度无效

问题：在wxss文件里写button的宽度无效
解决：在button标签中直接写 style

如：
  <button style="width:600rpx;">登陆</button>

2、设置margin-right无效

box-sizing:border-box;

3、背景图片真机不显示

解决：背景图片转base64

//index.wxml
 <view style="background-image:url({{btnTabHome}})"></view>

//index.js
data:{ 
      btnTabHome:'/images/btnTabHome.png', 
 },
 onLoad:function(){
    let valuebase64 = wx.getFileSystemManager().readFileSync(this.data.btnTabHome, 'base64') 
    this.setData({ 
      btnTabHome: 'data:image/jpg;base64,' + valuebase64 
    });
 }