// 在app.js中判断是否是哪种设备
globalData: {
isIphoneX: false,
userInfo: null
},
onShow:function(){
let that = this;
wx.getSystemInfo({
success: res=>{
// console.log('手机信息res'+res.model)
let modelmes = res.model;
if (modelmes.search('iPhone X') != -1) {
that.globalData.isIphoneX = true
} }
})
},

在需要引用的页面js文件中onload方法里获取全局变量

let isIphoneX = app.globalData.isIphoneX;
this.setData({
isIphoneX: isIphoneX
})

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

<view class="{{isIphoneX?'linkCon':''}} flex "> </wiew>

微信小程序适配iphonex的更多相关文章

  1. 微信小程序适配iphoneX的实现方法

    一. 安全区域(safe area) 与iPhone6/6s/7/8相比,iPhone X 无论是在屏幕尺寸.分辨率.甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,先看看iPhon ...

  2. 微信小程序适配iPhone X

    1.获取设备型号 App({ // 全局数据 globalData: { // 其他数据定义 ... isIPX: false, // 当前设备是否为 iPhone X }, // 小程序启动入口 o ...

  3. 微信小程序开源

    | UI组件 | | | | | | | | | weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库 | | | | | | zanui-weapp ★794 - 好用易扩展的小程 ...

  4. 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入

    如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...

  5. 用 React 编写的基于Taro + Dva构建的适配不同端(微信小程序、H5、React-Native 等)的时装衣橱

    前言 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表 ...

  6. 从0到1构建适配不同端(微信小程序、H5、React-Native 等)的taro + dva应用

    从0到1构建适配不同端(微信小程序.H5.React-Native 等)的taro + dva应用 写在前面 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种 ...

  7. 微信小程序中的iPhone X适配问题

    微信小程序中的iPhone X适配问题 小程序中下方的导航会被iPhone X下面的那条黑线盖住[微笑脸],所以要专门为了iPhone X做样式上的适配[微笑脸] wx.getSystemInfo({ ...

  8. 精确计算微信小程序scrollview高度,全机型适配

    众所周知,可以滑动的 scroll 组件在移动端非常的重要,几乎每个页面都要用到. 而小程序的 scroll-view 组件就比较坑了,非得指定一个高度才能正常使用.布局复杂的时候谁还给你算高度啊.. ...

  9. 微信小程序开发日记——高仿知乎日报(上)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

随机推荐

  1. 英语词汇(5)followed by / sung by / written by

    Sung by 演唱者; [例句]In the recording I have today, it is sung by a male alto.我今天带的唱片是由一位男高音歌手唱的. follow ...

  2. 初学Java Web(7)——文件的上传和下载

    文件上传 文件上传前的准备 在表单中必须有一个上传的控件 <input type="file" name="testImg"/> 因为 GET 方式 ...

  3. 使用vue-cli快速搭建大型单页面应用开发环境

    工作环境:terminal,已经全局安装了vue(可使用npm install -g vue) 全局安装vue-cli npm install -g vue-cli 创建一个基于webpack模板的项 ...

  4. Multipath在OpenStack中的faulty device的成因及解决(part 1)

    | 版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接.如有问题,可以邮件:wangxu198709@gmail.com 简介: Multip ...

  5. 最新的Windows环境搭建zeroMQ并使用java代码运行zeromq详细教程

    最近项目要用zeromq,linux上很好配置使用,但是windows上配置与使用没有找到合适的解决方案,看的很头疼,这里自己总结下供大家参考 准备工作: 1.libzmq下载地址:https://g ...

  6. 自行实现高性能MVC WebAPI

    wcf虽然功能多.扩展性强但是也面临配置忒多,而且restful的功能相当怪异,并且目前没法移植.asp.net core虽然支持webapi,但是功能也相对繁多.配置复杂.就没有一个能让码农们安安心 ...

  7. Windows下使用PSCP从Linux下载或上传文件

    1. 先下载putty包,然后解压 https://the.earth.li/~sgtatham/putty/latest/w64/putty.zip 2. 下载Linux文件到当前目录 PSCP.e ...

  8. [LeetCode] IP to CIDR 将IP地址转为CIDR无类别域间路由

    Given a start IP address ip and a number of ips we need to cover n, return a representation of the r ...

  9. python3全栈开发-socket编程

    一. 客户端/服务器架构 1.硬件C/S架构(打印机) 2.软件C/S架构 互联网中处处是C/S架构 如黄色网站是服务端,你的浏览器是客户端(B/S架构也是C/S架构的一种) 腾讯作为服务端为你提供视 ...

  10. 重拾Python(5):数据读取

    本文主要对Python如何读取数据进行总结梳理,涵盖从文本文件,尤其是excel文件(用于离线数据探索分析),以及结构化数据库(以Mysql为例)中读取数据等内容. 约定: import numpy ...