微信小程序适配问题

管理

编辑

删除

iPhone X 兼容

在小程序页面开发中，涉及到需要适配 iPhone X 的地方主要有：导航栏（NavigationBar），标签栏（TabBar）以及页面底部的吸底按钮。

对于position: fixed的可交互组件，如果渲染在iPhone X的安全区域外，容易误触 Home Indicator，应当把可交互的部分都渲染到安全区域内。

建议使用以下 wxss 进行兼容

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);  //iphoneX以上会多出一部分home indicator区域

适配方案：

1、meta标签中设置网页在可视窗口的布局方式

<meta name="viewport" content="viewport-fit=cover">

2、fixed 完全吸底元素场景的适配

{
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

3、fixed 非完全吸底元素场景的适配

{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

另外一种方法：

1、在app.js的onLaunch函数内调用wx.getSystemInfo，获得手机型号（res.model），并存储为全局变量：

onLaunch: function() {
    let _self = this;
    wx.getSystemInfo({
      success: res => {
        let modelmes = res.model;
        if (modelmes.search('iPhone X') != -1) {
          _self.globalData.isIphoneX = true
        }
        wx.setStorageSync('modelmes', modelmes)
      }
    })
}

2.在所需页面的js文件的onLoad函数内从全局变量里面拿出来第一步存储的手机型号值，这里设置为isIphoneX：

onLoad: function(options) 
    let modelmes = wx.getStorageSync('modelmes');
    let isIphoneX = app.globalData.isIphoneX;
    this.setData({
      isIphoneX: isIphoneX
    })
  }

3.在所需页面的wxml里面根据手机型号是否为iPhone X 来运用三元运算符判断底部的位置就可以啦：

<view class="footer" style="margin-bottom: {{isIphoneX ? '68rpx' : '0rpx'}};"></view>

移动端适配方案 viewport

1、利用 meta 标签设置 viewport

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

minimum-scale：允许用户缩放到的最大比例。

maximum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放

上面的那段代码的意思就是：设置页面的 layout viewport 等于 ideal viewport 宽度，初始化的页面缩放比为1，用户最大/最小的缩放比都为1，页面不允许用户手动缩放。

2、利用postcss-px-to-viewport将px 自动转换为 vw

（1）安装

npm install postcss-px-to-viewport --save-dev

2）webpack配置

module.exports = {
  plugins: {
    // ...
    'postcss-px-to-viewport': {
      // options
      unitToConvert: 'px',    // 需要转换的单位，默认为"px"
      viewportWidth: 750,     // 设计稿的视窗宽度
      unitPrecision: 5,       // 单位转换后保留的精度
      propList: ['*', '!font-size'],        // 能转化为 vw 的属性列表
      viewportUnit: 'vw',     // 希望使用的视窗单位
      fontViewportUnit: 'vw', // 字体使用的视窗单位
      selectorBlackList: [],  // 需要忽略的 CSS 选择器，不会转为视窗单位，使用原有的 px 等单位
      minPixelValue: 1,       // 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换
      mediaQuery: false,      // 媒体查询里的单位是否需要转换单位
      replace: true,          // 是否直接更换属性值，而不添加备用属性
      exclude: undefined,     // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      include: /\/src\//,     // 如果设置了include，那将只有匹配到的文件才会被转换
      landscape: false,       // 是否添加根据 landscapeWidth 生成的媒体查询条件
      landscapeUnit: 'vw',    // 横屏时使用的单位
      landscapeWidth: 1125,   // 横屏时使用的视窗宽度
    },
  },
};

（3）标注不需要转换的属性

/* px-to-viewport-ignore-next */ —> 下一行不进行转换.
/* px-to-viewport-ignore */ —> 当前行不进行转换

/* example input: */
.class {
  /* px-to-viewport-ignore-next */
  width: 10px;
  padding: 10px;
  height: 10px; /* px-to-viewport-ignore */
}
 
/* example output: */
.class {
  width: 10px; 
  padding: 3.125vw;
  height: 10px;
}

rem转成rpx

我们可以修改html的fontsize的大小来让rem等于rpx

  let screenWidth=document.documentElement.clientWidth//获取屏幕的宽度
  let centerWH=750/screenWidth//比例
  document.documentElement.style.fontSize=1/centerWH+'px' //设置html根元素fontsize的大小