App({
  // 全局数据
  globalData: {
    // 其他数据定义 ...
    
    isIPX: false,// 当前设备是否为 iPhone X
  },136);">// 小程序启动入口
  onLaunch: function (options) {
    // 其他启动代码...
    
    // 判断设备是否为 iPhone X
    this.checkIsIPhoneX()
  },checkIsIPhoneX: function() {
    const self = this
    wx.getSystemInfo({
      success: function (res) {
        // 根据 model 进行判断
        if (res.model.search('iPhone X') != -1) {
          self.globalData.isIPX = true
        }
        // 或者根据 screenHeight 进行判断
        // if (res.screenHeight == 812) {
        //   self.globalData.isIPX = true
        // }
      }
    })
  },}

const app = getApp()

Page({
  data: {
    // 页面其他数据...
    
    isIPX: app.globalData.isIPX,},136);">// 其他代码
}

.navi-bar-view {
  height: 64px;
  /* 其他样式值 */
}
.navi-bar-view-IPX {
  88px;
  /* 其他样式值 */
}

<view class="{{isIPX ? 'navi-bar-view-IPX' : 'navi-bar-view'}}">
@H_301_264@</view>

1 - 微信小程序开发 (安装软件和运行第一个微信小程序)

https://developers.weixin.qq.com/miniprogram/dev/

我的

 打开

 上传成功后

iphone虚拟键小黑条布局处理_安全区域(Safe Area)在微信小程序和H5的屏幕适配

一、iphone虚拟键小黑条布局处理_安全区域(Safe Area)在微信小程序和H5的屏幕适配

使用苹果官方推出适配方案css函数env()、constant()来适配 （推荐）

苹果官方推荐使用env()，constant()来适配，建议使用该方案，不需要管数值具体是多少。这2个方法是什么呢？

• env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
  • safe-area-inset-left：安全区域距离左边边界的距离
  • safe-area-inset-right：安全区域距离右边边界的距离
  • safe-area-inset-top：安全区域距离顶部边界的距离
  • safe-area-inset-bottom ：安全距离底部边界的距离

因为目标是需要对底部小黑条做适配，所以只需要关注safe-area-inset-bottom这个值。

而env()和constant()函数有个必要的使用前提，当网页设置viewport-fit=cover的时候才生效，根据微信小程序的表现和我在实际真机测试时这两个函数生效，推测小程序里的viewport-fit默认是cover。

有一点要注意，在IOS11.2系统以前，可以使用constant()函数，但是在IOS11.2系统以后，这个函数就被废弃了，被env()函数替代了。官方原话如下：

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

所以我们在做屏幕适配时，需要这样写：

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

**注意：**env()和constant()需要同时存在，而且顺序不能换。

3. 在H5上适配安全区域

在H5上适配安全区域就方便多了，采用viewport+env+constant方案。

viewport-fit 默认有3个值：

• contain：可视窗口完全包含网页内容（左图）
• cover：网页内容完全覆盖可视窗口（右图）
• auto：默认值，此值不影响初始布局视图端口，并且整个web页面都是可查看的。

contain和cover具体区别如下图：

而我们需要将viewport设置为cover，env和constant才能生效。设置代码如下：

meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

同时设置env和constant代码，同样env()和constant()需要同时存在，而且顺序不能换。

/* 可以通过增加padding-bottom来适配 */

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/

padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

/* 可以通过margin-bottom来适配 */

margin-bottom: constant(safe-area-inset-bottom);

margin-bottom: env(safe-area-inset-bottom);

1. /* 或者改变高度*/
   height: calc(55px + constant(safe-area-inset-bottom));
   
   height: calc(55px + env(safe-area-inset-bottom));

    

也可以在底部添加一个空白的div颜色块来做适配。

还有一种是使用 @supports 隔离兼容样式

可以使用 @supports 来隔离兼容样式，当浏览器支持bottom: constant(safe-area-inset-bottom)或者bottom: env(safe-area-inset-bottom)的时候，bottom-button类就会新增margin-bottom的样式

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {

.bottom-button {

margin-bottom: constant(safe-area-inset-bottom);

margin-bottom: env(safe-area-inset-bottom);

更多：

微信小程序中实现多级联动方法、联动选择

微信小程序客服会话卡片、自定义客服消息卡片

uni-app开发小程序适配苹果端采坑总结

不得不说,任何一个开发者遇到苹果手机都会或多或少需要做适配,在使用uni-app开发小程序时,我就发现不少需要兼容的地方,今天做个小结

1.由于页面大多数内容都是动态获取,当页面高度不给固定值时,让其随内容的填充自适应的时候,iPhoneXS Max手机在页面底部会出现白版,安卓手机不会有此现象. 解决办法:

    //通过获取系统信息拿到屏幕宽高比,
    const SCREEN_WIDTH = 750
    const RATE = wx.getSystemInfoSync().screenHeight / wx.getSystemInfoSync().screenWidth
    data(){
        ScreenTotalH: SCREEN_WIDTH * RATE, //拿到真实手机高度
    }
    //展示内容高度
    <view:>
    //这样后苹果大屏手机内容底部不会白板

2.获取到时间字符串"2020-07-12 09:00:30" ,当我截取后取时和分为单位,如果时为"00"时,页面<text>{{dian}}点</text>,显示为''0''而不是我要的''00'',这个问题十分奇葩,虽然不是大的影响,加个三目判断:<text>{{dian==''00''?''00'':dian}}点</text>,就ok.
3.有时候小程序需要显示APP分享过来的H5页面,或者小程序本身需要显示H5页面时,需要配置https的域名,不然会无法正常显示。补充:(H5页面一般通过<web-view :src="src"></web-view>来展示,SRC里面的页面都是后台配置好的)
目前这是我遇到的苹果端适配问题以及解决办法,还有其他关于小程序苹果端的适配问题,大家网上去搜索一大把,解决办法大佬们都写了,我再此就不重复别人的成果了.

仿QQ微信小程序！我趟过的微信小程序开发坑

我们都知道微信小程序第一天发布内测版，并没有公开官方开发文档和开发工具，但是这阻止不了技术人的好奇心，通过破解以及先安装旧版本再用新版本覆盖安装一系列流程，即可体验微信小程序的魅力，当时为了使更少的人少走弯路，于是自己就写了微信小程序开发环境搭建一文。不过在文章发布第二天微信官方正式发布了官方文档，并且更新了开发工具，无·appid也可以体验小程序的开发。
因为自己对小程序也是很有兴趣的，感觉是很有意思的一个东西，所以以QQ练手，做一个，由于本人是Android开发者，平时很少接触前端的一些东西，水平有限，所以代码很多地方是不规范的，做的过程也就是一个学习的过程，一个提高的过程。

这篇文章主要写我在SmallAppForQQ这个项目进展的过程中遇到的一些问题。如果阅读此文的你有一定帮助，很是欣慰，欢迎star项目。

项目结构

文章开头，先简单介绍下项目结构，若没有安装开发工具，可去GitHub:

 搜索

bindtap:function(event){
wx.navigateto({
url: "search/search"
})
}

 搜索

bindtap:function(event){
wx.navigateto({
url: "search/search"
})
},

 "pages":[

"pages/message/message",
"pages/contact/contact",
"pages/dynamic/dynamic",
 "pages/dynamic/music/music",
"pages/index/index",
"pages/logs/logs"
]

Page({
data:{
// text:"这是一个页面"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数

},
onReady:function(){
// 页面渲染完成
//NavigationBarTitle如果此处和json文件都设置，最后展示此处的标题栏
wx.setNavigationBarTitle({
title: '音乐'
})
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})

{
"navigationBarTitleText": "音乐"
}

 

 

 
 

 {{item.title}}


{{item.message}}



{{item.time}}
0}}">{{item.count}}

 
 
 

/**作者：Code4Android
 * 项目地址：https://github.com/xiehui999/SmallAppForQQ
 * 新浪微博：http://weibo.com/745687294
 * CSDN:http://blog.csdn.net/xiehuimx?viewmode=contents
 * 简书 : http://www.jianshu.com/users/d5b531888b2b/latest_articles
 * */
Page({
data:{
// text:"这是一个页面"
isHiddenToast:true
}
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
console.log(options.title)
 console.log(options.message)

},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
bindtap:function(event){
wx.navigateto({
url: "/pages/message/search/search"
})
},
})