小程序爬坑日志--干货合集

因为公司需要开发小程序，前段时间学习了一下，现在终于抽出时间来写点总结分享给大家。

1.关于样式：刚开始使用小程序，你会发现有些样式设置似乎无效，其实只是你没找到正确的打开方式。

1）看组件属性列表：需要注意小程序组件上特别标明的属性，有些样式必须通过这些特殊属性才能设置；

2）看开发者工具的调试器：其次，打开开发者工具的调试器，去WXML那里选择你要设置样式的元素，从右侧的style那里查看设置样式是否生效，有没有被默认样式覆盖掉。原生组件的样式设置了很多属性选择器、兄弟选择器去设置样式，这些是可以在style中查看到的。如果你设置的样式被覆盖了，你需要从style中把选择器复制出来加上你自己的类名重新设置样式。

3）看有没有伪类：如果这些还不能解决，就把对应组件的伪类比如:before、:after等设置为display:none;因为在开发者工具的调试器中伪类的样式不会显示出来

2.关于本地图片显示

小程序本地图片只能通过image组件的src属性来显示；如果想要设置其他组件的background-image，只能用网络图片、或者base64;

3.关于小图标显示：如果所有小图标都用同一个尺寸适配，在iPhone7plus下小图标会出现边缘缺失问题。目前我找到有2种解决办法：

1）1张图片适配，通过动态设置image宽高来实现：先在data中用变量表示小图标初始宽高，并绑定到image组件上；再通过wx.getSystemInfo获取屏幕宽度，那么小图标的宽度=原宽*屏宽/设计图宽，长=原长*屏宽/设计图宽，再用this.setData()修改变量。

<!--1.wxml-->
<image class="progress-img" src="../../../imgs/transaction/01.png" bindload="imageLoad"  
style="width:{{imgwidth}}px; height:{{imgheight }}px;"></image>

Page({
  data: {
    screenWidth: 0,
    imgwidth: 0,
    imgheight: 0
  },
  onLoad: function (options) {
    var _this = this;
    wx.getSystemInfo({
      success: function (res) {
        _this.setData({
          screenWidth: res.windowWidth,
        });
      }
    }); 
  },
  imageLoad: function (e) {
    var _this = this;
    var screenW = this.data.screenWidth;
    var viewWidth = 54 * screenW / 750;
    var viewHeight = viewWidth;
    this.setData({
      imgwidth: viewWidth,
      imgheight: viewHeight
    })
  }
}

2）3张图片适配：把1倍屏、2倍屏、3倍屏对应的图片分别命名成text1\text2\text3

<!--wxml-->
<image class="img-s text" src="../../images/text{{pixelRatio}}.png"></image>

const device = wx.getSystemInfoSync()
const pixelRatio = Math.floor(device.pixelRatio);
Page({
  data:{
    pixelRatio,
  }
})

小程序爬坑日志--干货合集

猜你喜欢