uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置 | --window-top和--window-bottom
刘海屏 顶部安全区|状态栏高度 var(–status-bar-height) 此变量在微信小程序环境为固定 25px，在 5+App 里为手机实际状态栏高度。 当设置 “navigationStyle”:“custom” 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(–status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。 由于在H5端，不存在原生导航栏和tabbar，也是前端div模拟。如果设置了一个固定位置的view，在小程序和App端是在tabbar上方，但在H5端会与tabbar重叠。此时可使用–window-bottom，不管在哪个端，都是固定在tabbar上方。 底部安全区 iOS方案一：使用原生占位（仅App端支持） manifest.json 文件 app-plus 节点下配下 safearea “safearea”: {undefined “background”: “#CCCCCC”, “bottom”: {undefined “offset”: “auto” } } iOS方案二：不使用原生占位（非App端可以不配置manifest） manifest.json 文件 app-plus 节点下配下 safearea “safearea”: {undefined “bottom”: {undefined “offset”: “none” } } 然后在需要适配的页面内使用 css 常量 constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 来适配，参考：为iPhoneX设计网站。微信小程序模拟器不支持，以真机为准。 比如为列表底部添加内边距避开安全区，在 iPhoneX 上列表底部会有内边距，在其他设备上没有内边距： 注意：使用了pages.json里的原生tabbar，不管manifest里安全区设置如何，在tabbar下方都会留出空隙。 判断是否为刘海屏的方法 使用5+ API （plus.navigator.hasNotchInScreen）可查询当前设备是否为刘海屏。 安卓底部虚拟按键背景色修改方式 使用Native.js修改： var Color = plus.android.importClass(“android.graphics.Color”); plus.android.importClass(“android.view.Window”); var mainActivity = plus.android.runtimeMainActivity(); var window_android = mainActivity.getWindow(); window_android.setNavigationBarColor(Color.GREEN); –window-top和–window-bottom APP 和微信的原生导航栏和tabbar下，元素区域坐标是不包含原生导航栏和tabbar的。而 H5 里原生导航栏和tabbar是 div 模拟实现的，所以元素坐标会包含导航栏和tabbar的高度。为了优雅的解决多端高度定位问题，uni-app新增了2个css变量：–window-top和–window-bottom，这代表了页面的内容区域距离顶部和底部的距离。举个实例，如果你想在原生tabbar上方悬浮一个菜单，之前写bottom:0。这样的写法编译到h5后，这个菜单会和tabbar重叠，位于屏幕底部。而改为使用bottom:var(–window-bottom)，则不管在app下还是在h5下，这个菜单都是悬浮在tabbar上浮的。这就避免了写条件编译代码。当然你也仍然可以使用 H5 的条件编译处理界面的不同。 CSS內使用vh单位的时候注意100vh包含导航栏，使用时需要减去导航栏和tabBar高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。’
vue中NODE_ENV和VUE_APP_
process.env.NODE_ENV是什么 process.env 是 Node.js 中的一个环境对象。 其中保存着系统的环境的变量信息。 可使用 Node.js 命令行工具直接进行查看。 命令行中执行 node -> process.env
HbuilderX 的初始页配置
HBuilder X安装及常用配置 一、下载并安装 下载地址： https://www.dcloud.io/hbuilderx.html 二、安装插件 2.1、安装插件 工具 -> 插件安装寻找到想要安装的插件直接点击安装就可以了。
关于wx.playVoice函数
一边学习老师的课程，我一边试着做点小东西，也熟悉下tencent提供的api，在使用wx.playVoice的时候 ，不管参数里的url给的是网上的歌曲链接还是本地的MP3都报错不能读取，请问老师这个url参数怎么赋值啊