网站首页 » 前端开发 » 前端工具 » 小程序踩坑之路
上一篇:
下一篇:

小程序踩坑之路

前言

小程序给我们带来了不一样的体验,但同是也给开发人员带来了不少坑,下面就是踩坑之路,说长不长不短不短。

踩坑之路

按钮样式相关

// 去掉小程序按钮默认的边框
button[class="btn btn-primary"]::after {
    border:none
}

// 修改按钮禁止类样式
button[class="btn btn-primary"][disabled]{
    color: #666;
    background: #ccc;
}

单选多选按钮样式相关

// 修改选中样式
radio .wx-radio-input.wx-radio-input-checked::before,
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  background-color: #4f76ec;
  border: none;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: block;
}

定时器相关

在页面中添加了定时器(interval)记得手动清掉,如果不手动清掉,那么切换到其它页面时,这个定时器也依然会一直执行。

iPhone X 相关

iPhone X 专属样式在小程序中不起作用

constant(safe-area-inset-bottom);
padding-bottom:env(safe-area-inset-bottom);

iphoneX 的适配

 const systemInfo = wx.getSystemInfoSync();
 if (~systemInfo.model.indexOf("iPhone X")) {
   this.globalData.isIos = true;
 }

可以把这段代码放到 app.js 中,并在 app.js 定义一个全局变量 globalData.isIos 这样所有页面都可以获取,就无需每个页面单独写重复的判断代码

App({
    onLaunch: function () {
      const systemInfo = wx.getSystemInfoSync();
      if (~systemInfo.model.indexOf("iPhone X")) {
        this.globalData.isIos = true;
      }
    },
    globalData: {
       isIos: false
    }
})

这里有一点需要注意就是 wx.getSystemInfoSync() 返回的对象中的 model 属性值,这个值不仅只含有 iPhone X 还有其它相关信息字符串。
而在微信开发者工具中则只有 iPhone X 字符串,所以这个坑得注意下。一般的这个值最好在真机调试中查看。
比如:

锤子ML1 为 SM919
iPhone X 为 iPhone X (GSM+CDMA)<iPhone10,3>

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/mini-program-the-way-to-step-on-the-pit/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END