IOS安全内边距safe-area-inset-bottom IOS全面屏底部有小黑线，存在安全距离。位于底部的元素会被黑线阻挡，可以使用以下样式： padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */获取高度时，可用： height: calc(100% - constant(safe-area-inset-bottom)); height: calc(100% - env(safe-area-inset-bottom));{callout color="red"}tips:先使用constant 再使用 env{/callout}自定义顶部导航栏顶部存在状态栏，也就是显示信号、时间等信息的状态栏padding-top: var(--status-bar-height);{callout color="#ef4d4d"}　　可以在页面的最外层的盒子加内上边距 padding-top: var(–status-bar-height) 避免顶部导航栏与状态栏重叠；并且需要给最外层盒子设置背景色与页面背景色一致，不然会出现状态栏的背景色和页面背景色不一致的情况{/callout}uniapp css变量uniapp css变量 注意：var(--status-bar-height) 此变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度。当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。由于在 H5 端，不存在原生导航栏和 tabbar，也是前端 div 模拟。如果设置了一个固定位置的居底 view，在小程序和 App 端是在 tabbar 上方，但在 H5 端会与 tabbar 重叠。此时可使用--window-bottom，不管在哪个端，都是固定在 tabbar 上方。目前 nvue 在 App 端，还不支持 --status-bar-height变量，替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度，然后通过 style 绑定方式给占位 view 设定高度。下方提供了示例代码代码块快速书写 css 变量的方法是：在 css 中敲 hei，在候选助手中即可看到 3 个 css 变量。（HBuilderX 1.9.6 以上支持）示例 1 - 普通页面使用 css 变量：<template> <!-- HBuilderX 2.6.3+ 新增 page-meta, 详情：https://uniapp.dcloud.io/component/page-meta --> <page-meta> <navigation-bar /> </page-meta> <view> <view class="status_bar"> <!-- 这里是状态栏 --> </view> <view>状态栏下的文字</view> </view> </template> <style> .status_bar { height: var(--status-bar-height); width: 100%; } </style><template> <view> <view class="toTop"> <!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px--> </view> </view> </template> <style> .toTop { bottom: calc(var(--window-bottom) + 10px); } </style>示例 2 - nvue 页面获取状态栏高度<template> <view class="content"> <view :style="{ height: iStatusBarHeight + 'px'}"></view> </view> </template> <script> export default { data() { return { iStatusBarHeight: 0, }; }, onLoad() { this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight; }, }; </script>知识点扫盲下面把相关知识点整理如下： env() 与 constant() 设置安全区域，是css里IOS11新增的属性，webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：safe-area-inset-top: 安全区域距离顶部边界的距离safe-area-inset-left: 安全区域距离左边界的距离safe-area-inset-right: 安全区域距离右边界的距离safe-area-inset-bottom: 安全区域距离底部边界的距离获取上安全距离：env(safe-area-inset-top)获取左安全距离：env(safe-area-inset-left)获取右安全距离：env(safe-area-inset-right)获取下安全距离：env(safe-area-inset-bottom)需要的注意一点：H5网页设置 viewport-fit=cover 的时候才会生效，小程序里的 viewport-fit 默认是 cover 。为了更好的理解上文意思，我们来看一下未适配的底部效果：适配后的效果：

play() failed because the user didn't interact with the document first 问题：在浏览器加载完毕后，自动播放视频：出现错误 play() failed because the user didn't interact with the document first.解决方法：给video标签加入 静音即可。Chrome 66为了避免标签产生随机噪音。声音无法自动播放这个在IOS/Android上面一直是个惯例，桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能，紧接着在2018年4月份发布的Chrome 66也正式关掉了声音自动播放，也就是说 在桌面版浏览器也将失效。最开始移动端浏览器是完全禁止音视频自动播放的，考虑到了手机的带宽以及对电池的消耗。但是后来又改了，因为浏览器厂商发现网页开发人员可能会使用GIF动态图代替视频实现自动播放，正如IOS文档所说，使用GIF的带宽流量是Video(h264)格式的12倍，而播放性能消耗是2倍，所以这样对用户反而是不利的。又或者是使用Canvas进行hack，如Android Chrome文档提到。因此浏览器厂商放开了对多媒体自动播放的限制，只要具备以下条件就能自动播放：（1）没音频轨道，或者设置了muted属性（2）在视图里面是可见的，要插入到DOM里面并且不是display: none或者visibility: hidden的，没有滑出可视区域。换句话说，只要你不开声音扰民，且对用户可见，就让你自动播放，不需要你去使用GIF的方法进行hack.桌面版的浏览器在近期也使用了这个策略，如升级后的Safari 11的说明：这个策略无疑对视频网站的冲击最大，如在Safari打开tudou的提示：添加了一个设置向导。Chrome的禁止更加人性化，它有一个MEI的策略，这个策略大概是说只要用户在当前网页主动播放过超过7s的音视频（视频窗口不能小于200 x 140），就允许自动播放。对于网页开发人员来说，应当如何有效地规避这个风险呢？Chrome的文档给了一个最佳实践：先把音视频加一个muted的属性就可以自动播放，然后再显示一个声音被关掉的按钮，提示用户点一下打开声音。对于视频来说，确实可以这样处理，而对于音频来说，很多人是监听页面点击事件，只要点一次了就开始播放声音，一般就是播放个背景音乐。但是如果对于有多个声音资源的页面来说如何自动播放多个声音呢？首先，如果用户还没进行交互就调用播放声音的API，Chrome会这么提示： DOMException: play() failed because the user didn't interact with the document first. Safari会这么提示： NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. 　　Chrome报错提示最为友善，意思是说，用户还没有交互，不能调play。用户的交互包括哪些呢？包括用户触发的touchend, click, doubleclick或者是 keydown事件，在这些事件里面就能调play　　所以上面提到很多人是监听整个页面的点击事件进行播放，不管点的哪里，只要点了就行，包括触摸下滑。这种方法只适用于一个声音资源，不适用多个声音，多个声音应该怎么破呢？这里并不是说要和浏览器对着干，“逆天而行”，我们的目的还是为了提升用户体验，因为有些场景如果能自动播放确实比较好，如一些答题的场景，需要听声音进行答题，如果用户在答题的过程中能依次自动播放相应题目的声音，确实比较方便。同时也是讨论声音播放的技术实现。　　原生播放视频应该就只能使用video标签，而原生播放音频除了使用audio标签之外，还有另外一个API叫AudioContext，它是能够用来控制声音播放并带了很多丰富的操控接口。调audio.play必须在点击事件里面响应，而使用AudioContext的区别在于只要用户点过页面任何一个地方之后就都能播放了。所以可以用AudioContext取代audio标签播放声音。　　我们先用audio.play检测页面是否支持自动播放，以便决定我们播放的时机。1.页面自动播放检测方法很简单，就是创建一个audio元素，给它赋一个src，append到dom里面，然后调用它的play，看是否会抛异常，如果捕获到异常则说明不支持，如下代码所示：function testAutoPlay () { // 返回一个promise以告诉调用者检测结果 return new Promise(resolve => { let audio = document.createElement('audio'); // require一个本地文件，会变成base64格式 audio.src = require('@/assets/empty-audio.mp3'); document.body.appendChild(audio); let autoplay = true; // play返回的是一个promise audio.play().then(() => { // 支持自动播放 autoplay = true; }).catch(err => { // 不支持自动播放 autoplay = false; }).finally(() => { audio.remove(); // 告诉调用者结果 resolve(autoplay); }); }); }这里使用一个空的音频文件，它是一个时间长度为0s的mp3文件，大小只有4kb，并且通过webpack打包成本地的base64格式，所以不用在canplay事件之后才调用play，直接写成同步代码，如果src是一个远程的url，那么就得监听canplay事件，然后在里面play.在告诉调用者结果时，使用Promise resolve的方式，因为play的结果是异步的，并且库函数不推荐使用await.2. 监听页面交互点击如果当前页面能够自动播放，那么可以毫无顾忌地让声音自动播放了，否则就得等到用户开始和这个页面交互了即有点击操作了之后才能自动播放，如下代码所示：let audioInfo = { autoplay: false, testAutoPlay () { // 代码同，略... }, // 监听页面的点击事件，一旦点过了就能autoplay了 setAutoPlayWhenClick () { function setAutoPlay () { // 设置自动播放为true audioInfo.autoplay = true; document.removeEventListener('click', setAutoPlay); document.removeEventListener('touchend', setAutoPlay); } document.addEventListener('click', setCallback); document.addEventListener('touchend', setCallback); }, init () { // 检测是否能自动播放 audioInfo.testAutoPlay().then(autoplay => { if (!audioInfo.autoplay) { audioInfo.autoplay = autoplay; } }); // 用户点击交互之后，设置成能自动播放 audioInfo.setAutoPlayWhenClick(); } }; audioInfo.init(); export default audioInfo;　　上面代码主要监听document的click事件，在click事件里面把autoplay值置为true。换句话说，只要用户点过了，我们就能随时调AudioContext的播放API了，即使不是在点击事件响应函数里面，虽然无法在异步回调里面调用audio.play，但是AudioContext可以做到。　　代码最后通过调用audioInfo.init，把能够自动播放的信息存储在了audioInfo.autoplay这个变量里面。当需要播放声音的时候，例如切到了下一题，需要自动播放当前题的几个音频资源，就取这个变量判断是否能自动播放，如果能就播，不能就等用户点声音图标自己去播，并且如果他点过了一次之后就都能自动播放了。　　那么怎么用AudioContext播放声音呢？3. AudioContext播放声音先请求音频文件，放到ArrayBuffer里面，然后用AudioContext的API进行decode解码，解码完了再让它去play，就行了。我们先写一个请求音频文件的ajax：function request (url) { return new Promise (resolve => { let xhr = new XMLHttpRequest(); xhr.open('GET', url); // 这里需要设置xhr response的格式为arraybuffer // 否则默认是二进制的文本格式 xhr.responseType = 'arraybuffer'; xhr.onreadystatechange = function () { // 请求完成，并且成功 if (xhr.readyState === 4 && xhr.status === 200) { resolve(xhr.response); } }; xhr.send(); }); }这里需要注意的是要把xhr响应类型改成arraybuffer，因为decode需要使用这种存储格式，这样设置之后，xhr.response就是一个ArrayBuffer格式了。接着实例化一个AudioContext，让它去解码然后play，如下代码所示：// Safari是使用webkit前缀 let context = new (window.AudioContext || window.webkitAudioContext)(); // 请求音频数据 let audioMedia = await request(url); // 进行decode和play context.decodeAudioData(audioMedia, decode => play(context, decode));play的函数实现如下：function play (context, decodeBuffer) { let source = context.createBufferSource(); source.buffer = decodeBuffer; source.connect(context.destination); // 从0s开始播放 source.start(0); }这样就实现了AudioContext播放音频的基本功能。如果当前页面是不能autoplay，那么在 new AudioContext的时候，Chrome控制台会报一个警告：这个的意思是说，用户还没有和页面交互你就初始化了一个AudioContext，我是不会让你play的，你需要在用户点击了之后resume恢复这个context才能够进行play.假设我们不管这个警告，直接调用play没有报错，但是没有声音。所以这个时候就要用到上一步audioInfo.autoplay的信息，如果这个为true，那么可以play，否则不能play，需要让用户自己点声音图标进行播放。所以，把代码重新组织一下：function play (context, decodeBuffer) { // 调用resume恢复播放 context.resume(); let source = context.createBufferSource(); source.buffer = decodeBuffer; source.connect(context.destination); source.start(0); } function playAudio (context, url) { let audioMedia = await request(url); context.decodeAudioData(audioMedia, decode => play(context, decode)); } let context = new (window.AudioContext || window.webkitAudioContext)(); // 如果能够自动播放 if (audioInfo.autoplay) { playAudio(url); } // 支持用户点击声音图标自行播放 $('.audio-icon').on('click', function () { playAudio($(this).data('url')); });调了resume之后，如果之前有被禁止播放的音频就会开始播放，如果没有则直接恢复context的自动播放功能。这样就达到基本目的，如果支持自动播放就在代码里面直接play，不支持就等点击。只要点了一次，不管点的哪里接下来的都能够自动播放了。就能实现类似于每隔3s自动播下一题的音频的目的：// 每隔3秒自动播放一个声音 playAudio('question-1.mp3'); setTimeout(() => playAudio(context, 'question-2.mp3'), 3000); setTimeout(() => playAudio(context, 'question-3.mp3'), 3000);这里还有一个问题，怎么知道每个声音播完了，然后再隔个3s播放下一个声音呢？可以通过两个参数，一个是解码后的decodeBuffer有当前音频的时长duration属性，而通过context.currentTime可以知道当前播放时间精度，然后就可以弄一个计时器，每隔100ms比较一下context.currentTime是否大于docode.duration，如果是的话说明播完了。soundjs这个库就是这么实现的，我们可以利用这个库以方便对声音的操作。这样就实现了利用AudioContext自动播放多个音频的目的，限制是用户首次打开页面是不能自动播放的，但是一旦用户点过页面的任何一个地方就可以了。AudioContext还有其它的一些操作。4. AudioContext控制声音属性例如这个CSS Tricks列了几个例子，其中一个是利用AudioContext的振荡器oscillator写了一个电子木琴：这个例子没有用到任何一个音频资源，都是直接合成的，感受如这个Demo：Play the Xylophone (Web Audio API).还有这种混响均衡器的例子：见这个codepen：Web Audio API: parametric equalizer.最后，一直以来都是只有移动端的浏览器禁掉了音视频的自动播放，现在桌面版的浏览器也开始下手了。浏览器这样做的目的在于，不想让用户打开一个页面就各种广告或者其它乱七八糟的声音在播，营造一个纯静的环境。但是浏览器也不是一刀切，至少允许音视频静音的播放。所以对于视频来说，可以静音自动播放，然后加个声音被关掉的图标让用户点击打开，再加添加设置向导之类的方法引导用户设置允许当前网站自动播放。而对于声音可以用AudioContext的API，只要页面被点过一次AudioContext就被激活了，就能直接在代码里面控制播放了。以上可作为当前网页多媒体播放的最佳实践参考。参考链接：https://juejin.im/post/5af7129bf265da0b8262df4c转载于:https://www.cnblogs.com/Neilisme/p/9412315.html

uniapp获取图片base64 1.从相册中获取图片uni.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album'], // 从相册选择 success: (res) => { this.img = res.tempFilePaths } })2.图片转成base64uni.getFileSystemManager().readFile({ filePath: this.img[0], encoding: 'base64', success: r => { console.log("base64===="+r.data) }, fail: (errr) => { uni.hideLoading() } })

uniapp使用computed和store遇坑 1.用户登录后存储用户信息到 uni.setStorageSync(userInfo) 2.在 vuex 中 state 中写方法 state: { userInfo: () => Storage.getUserInfo() }, getters: { getUserInfo(state) { return state.userInfo() }, }, mutations: { setUserInfo(state, data) { state.userInfo = () => data }, }, actions: { setUserInfo(context, data) { context.commit('setUserInfo', data) } }试探过的无效方法：getters: { getUserInfo(state) { return Storage.getUserInfo() } },3.个人中心页面 user-center.vue 是 tabbar.vue 的子组件页面，在 user-center.vue 中的 computed 中直接使用 this.$Storage.getUserInfo() 方法 无法及时获取数据更新 遂不得已而采用vuex机制来保证页面数据及时更新computed: { syncUserInfo: function() { return this.$store.getters.getUserInfo || {} } },以上方法，只更新 Storage.getUserInfo() 数据，state变量是不会同步渲染更新的，必须调用this.$store.commit('setUserInfo', userInfo)来更新用户信息后才会全局更新4.vuex是非持久化数据，所以（1）通过 uni.setStorageSync(userInfo) 来做数据持久化（2）通过vuex机制来做数据的全局同步更新（3）两者结合实现App全局变量数据更新5.解决了以下几个问题（1）诸如用户信息、用户财务信息等App全局变量的数据一致性（2）避免了在不同页面频繁请求同一接口获取用户信息（3）在用户登录时获取用户信息后提前渲染用户信息页面，增强用户前端体验

uni.navigateBack()返回时传递参数 假如从B页面返回A页面：var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; //上一个页面 prevPage.setData({ mdata:1 })经过测试，在uni.app中使用B页面使用setData设置A页面参数无法实现（应该是被更改为常量属性了）。打印console.log(prevPage)前一页面对象可得：方法1：我们可以使用A页面原有方法onHide: ƒ () onLoad: ƒ () onReady: ƒ () onResize: ƒ () onRouteEnd: ƒ () onShow: ƒ () onUnload: ƒ () options ...B页面传递：var object={ sx1:"参数1", sx2:"参数2", } prevPage.onShow(object); uni.navigateBack();A页面接收参数：onShow(object){ if(!!object){ console.log(object) } }方法2：A页面自定义方法接收参数B页面传递：var object={ sx1:"参数1", sx2:"参数2", } prevPage.$vm.otherFun(object);//重点$vm uni.navigateBack();A页面接收参数：otherFun(object){ if(!!object){ console.log(object) } }function navigateBack(o, tarFunName, params) { if (tarFunName && params) { let num = Common.isNumber(o) ? o + 1 : o.delta + 1 let pages = getCurrentPages(); let prevPage = pages[pages.length - num]; //上一个页面 prevPage.$vm[tarFunName](params); } uni.navigateBack(o) }