精华内容
下载资源
问答
  • padding-bottom:calc(10px + env(safe-area-inset-bottom)/2);

    dom元素样式加入以下样式

    padding-bottom:calc(10px + env(safe-area-inset-bottom)/2);
    
    展开全文
  • 小程序底部兼容iphoneX

    2020-03-12 16:53:24
    解决iphoneX底部会有一条黑色线挡着小程序底部文字 1 . appjs中加入获取用户信息 // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权,可以直接调用 ...

    解决iphoneX底部会有一条黑色线挡着小程序底部文字
    1 . appjs中加入获取用户信息

        // 获取用户信息
        wx.getSetting({
          success: res => {
            if (res.authSetting['scope.userInfo']) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  this.globalData.userInfo = res.userInfo
                  // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
                  // 所以此处加入 callback 以防止这种情况
                  if (this.userInfoReadyCallback) {
                    this.userInfoReadyCallback(res)
                  }
                }
              })
            }
          }
        })
         // 判断设备是否为全面屏
        this.checkIphoneX()
    

    2.设置全局globalData对象

      globalData: {
        isIphoneX:false,
        userInfo: null
      },
    

    3 . 判断是否为全面屏的方法

      checkIphoneX() {
        let that = this;
        let info = wx.getSystemInfoSync();
        if (/iPhone X/i.test(info.model)) {
          that.globalData.isIphoneX = true
        } else {
          that.globalData.isIphoneX =false;
        }
      },
    

    xxx.js页面中
    1 . getapp()

    const app = getApp();
    

    2.在data中设置一个变量接收app.js中globalData传出的值,我这里用的是aaa,判断aaa的值就能知道是否为iphoneX了

     aaa: app.globalData.isIphoneX, //判断机型
    
    展开全文
  • 好像写了这个代码就兼容iphoneX以上,这段代码只写了底部,顶部其实也一样 1.main.js 在该文件定义一个全局的globalData Vue.prototype.globalData = getApp().globalData wx.getSystemInfo({ success: res => {...

    好像写了这个代码就兼容iphoneX以上,这段代码只写了底部,顶部其实也一样

    1.main.js
    在该文件定义一个全局的globalData

    Vue.prototype.globalData = getApp().globalData
    wx.getSystemInfo({
      success: res => {
        // console.log('手机信息res'+res.model)
        let modelmes = res.model;
        if (modelmes.search("iPhone X") != -1) {
          app.globalData.isIphoneX = true;
        }
      }
    });
    复制代码

    然后在需要适配的页面

    2.index.vue

      <div class="tab-footer" :class="{'isIphoneX-class': isIphoneX}"></div>
    复制代码

    3.index.js

    data() {
        return {
            isIphoneX: this.globalData.isIphoneX, //适配iphonex
        }
    }
    复制代码

    4.index.css

    .isIphoneX-class {
      padding-bottom: 64rpx;
    }
    复制代码
    展开全文
  • 今天做一个功能,需要兼容iphoneX系列以及11.12以上的设备的兼容性,于是乎就翻了翻小程序的API文档,果不其然在小程序基础接口里面有提供接口 wx.getSystemInfo(Object object)
    今天做一个功能,需要兼容iphoneX系列以及11.12以上的设备的兼容性,由于微信小程序在适配iphone x 的时候 底部的横线会出现遮挡如图:
    

    在这里插入图片描述

    于是乎就翻了翻小程序的API文档,果不其然在小程序基础接口里面有提供接口
    wx.getSystemInfo(Object object)

    那么接下来我们讲解下在小程序的开发中我们怎么使用?

    1、在全局的app.js文件中globalData我们创建全局变量,然后获取设备型号

     globalData: {
            isIphoneX: false,//判断机型 
        }
    
    onShow(e){
            var that = this
            // 获取设备机型
            wx.getSystemInfo({
                success:  res=>{
                  console.log('手机信息res'+res.model)
                  let model = res.model;
                    if (/iphone\sx/i.test(model) || (/iphone/i.test(model) && /unknown/.test(model))|| /iphone\s11/i.test(model)){
                        that.globalData.isIphoneX = true;
                    }else{
                        that.globalData.isIphoneX = false;
                    }
                }
            })
           
        },
        
    

    运行代码拿到如下图所示结果
    在这里插入图片描述
    2、 在需要引用的页面js文件中onload方法里获取全局变量
    js

    onLoad(){
     //获取当前设备机型
            let isIphoneX = app.globalData.isIphoneX;
            this.setData({
                isIphoneX: isIphoneX
            })
        }
            
    

    3 在 wxml文件中 进行css的逻辑判断
    wxml

    <view class="pt_footer {{isIphoneX?'isIPX':''}}"></view>
    
    

    wxss

    .isIPX{
      height: 128rpx !important;
    }
    
    

    最终修改之后的样式如下
    在这里插入图片描述

    展开全文
  • 解决方式:底部增加 34px 的高度,使元素不被横杠遮挡。 效果图: 常规效果 iPhone X 效果 ...小程序 iPhone X 底部按钮兼容示例</view> <view>helang.lov...
  • 小程序固定底部兼容iPhoneX

    千次阅读 2019-09-11 14:03:34
    底部 <view class='btn' style='padding-bottom:{{ isIphoneX ? 68 : 0 }}rpx;...判断是否是iPhoneX const app = getApp() Page({ data: { isIphoneX:false, }, onLoad: function () {...
  • 小程序特殊问题处理方法
  • 主要介绍了微信小程序适配iphoneX的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
  • 重点:此时model值为iPhone X但其实真机下model的值为iPhone X(GSM+CDMA)<iPhone10,3>因此我们需要用字符串检索匹配进行判断。 _this.globalData.isIpx = true ; console.log(_this.globalData.isIpx) } } }...
  • //在app.js内的onShow内加上这一段代码 let that = this; wx.getSystemInfo({ success: res => { that .globalData.headerBtnPosi = wx.... if (modelmes.search('iPhone X') != -1 || modelmes.search('iPhone
  • if (modelmes.search('iPhone X') != -1) { that.globalData.isIphoneX = true } } }) }, wxml: <view class='contentView' style='padding-bottom:{{btuBottom}}'> </view> //底部 js: ...
  • <view class="page page--with-footer"> <!-- 页面内容 -->...直接通过 CSS 搞定,不需要判断 iPhone X 等机型 /* 固定底部 */ /* ---------------------------------------------- *..
  • 1、iphoneX 兼容 在tabbar组件的生命周期内判断,设置吸底的间距 attached(){ let that = this; wx.getSystemInfo({ success: res=>{ console.log('手机信息res'+res.model) let modelmes = res.model;...
  • 今天做一个功能,需要兼容iphoneX系列以及11.12以上的设备的兼容性,由于微信小程序在适配iphone x 的时候 底部的横线会出现遮挡如图: 于是乎就翻了翻小程序的API文档,果不其然在小程序基础接口里面有提供接口 ...
  • 微信小程序iPhone X适配

    千次阅读 2019-06-28 18:29:12
    最近开发微信小程序:在iPhone X XS XR XS Max机型适配,我在项目中写了X适配的方法,在其它几个屏下也差不多(这里就没有详细适配) ps: 比较忙.抽时间记录下,以下是个人使用方案(仅供参考),欢迎大神们指教… 文章...
  • 1、高度还原原生微信小程序tabBar同等功能; 2、通过组件生命周期attached函数调用wx.getSystemInfo()成功回调参数中的model用于判断当前设备是否为iPhone,进而获取设备的宽高,计算宽高比,当宽高比大于1.78则判断...
  • 当我们需要自定义底部导航栏时 首先要解决iphoneX的底部大横条对这个兼容 通常不设置兼容 都会被挡住 使用css编写即可兼容 无需编写js代码 当我们需要自定义底部导航栏时 首先要解决iphoneX的底部大横条对这个兼容 ...
  • 由于试用了computed导致钉钉首页无法加载 如: 注释了就好了 小程序兼容问题 /** * @brief 获取头部高度 */ checkBarHeight() { try { const statusBarHeight = wx.getSystemInfoSync().statusBarHeight; if ...
  • 小程序兼容各个ios版本

    千次阅读 2019-01-24 15:54:39
    本篇文章记录的是小程序兼容的ios 6.7.7 ,plus, x及xs等等,最后方式设计人员应该看懂的设计方式(会了才能开发设计搞…) 第一、各个iphone的尺寸 绝对是帮你解决各种问题的表,对应微信开发工具去设置,还用什么...
  • 微信小程序适配安全区 // 高度固定 .wrap { width: 100%; height: calc(100rpx + constant(safe-area-inset-bottom)); /*兼容 IOS<11.2*/ height: calc(100rpx + env(safe-area-inset-bottom)); /*兼容 IOS>...
  • 主要介绍了微信小程序中吸底按钮适配iPhone X方案,非常不错,具有参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,200
精华内容 4,880
关键字:

x小程序兼容iphone