在JavaScript世界里，有些操作会让你无法理解，但是却无比优雅! 有时候读取变量属性时，他可能不是Ojbect。这个这个你就要判断这个变量是否为对象，如果是在如引用 [代码]var obj; if(obj instanceof Object){ console.log(obj.a); }else{ console.log('对象不存在'); } [代码] ES6中有简便写法，可以帮我们简短代码，从而更加明确 [代码]var obj; console.log(obj?.a || '对象不存在'); [代码] 1,2,3,4,5,6…10,11,12 小于10的前面补0 其实我们用slice函数可以巧妙解决这个问题 slice(start,end); start:必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。 end :可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。 [代码]var list=[1,2,3,4,5,6,7,8,9,10,11,12,13]; list=list.map(ele=>('0' + ele).slice(-2)); console.log(list); [代码] [图片] 打印可视化console.table() [代码]var obj = { name: 'Jack' }; console.table(obj); obj.name= 'Rose'; console.table(obj); [代码] [图片] 获取数组中的最后的元素 数组方法slice()可以接受负整数，如果提供它，它将从数组的末尾开始截取数值，而不是开头。 [代码]let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(array.slice(-1)); // Result: [9] console.log(array.slice(-2)); // Result: [8, 9] console.log(array.slice(-3)); // Result: [7, 8, 9] [代码] es6模板字符串 [代码]let name = "Charlse" let place = "India"; let isPrime = bit =>{ return (bit === 'P'? 'Prime' : 'Nom-Prime') } let messageConcat = `Mr.name' is form ${place} .He is a ${isPrime('P')} member`; [代码] H5语音合成 在网页端实现将指定的文字进行语音合成并进行播报。 使用HTML5的Speech Synthesis API就能实现简单的语音合成效果。 [代码]<input id="btn1" type="button" value="点我" onclick="test();" /> <script> function test() { const sos = `阿尤！不错哦`; const synth = window.speechSynthesis; let msg = new SpeechSynthesisUtterance(sos); synth.speak(msg) } </script> [代码] 然后点击按钮，就会触发test方法的执行实现语音合成 这里推荐使用Chrome浏览器，因为HTML5的支持度不同 数字取整 [代码]let floatNum = 100.5; let intNum = ~~floatNum; console.log(intNum); // 100 [代码] [图片] 字符串转数字 [代码]let str="10000"; let num = +str; console.log(num); // 10000 [代码] 交换对象键值 [代码]let obj = { key1: "value1", key2: "value2" }; let revert = {}; Object.entries(obj).forEach(([key, value]) => revert[value] = key); console.log(revert); [代码] [图片] 数组去重 [代码]let arrNum = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ]; let arrString = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0" ]; let arrMixed = [ 1, "1", "2", true, false, false, 1, 2, "2" ]; arrNum = Array.from(new Set(arrNum)); arrString = [...new Set(arrString)]; arrMixed = [...new Set(arrMixed)]; console.log(arrNum); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0] console.log(arrString); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"] console.log(arrMixed); // [1, "1", "2", true, false, 2] [代码] 数组转化为对象 [代码]const arr = [1,2,3] const obj = {...arr} console.log(obj) [代码] 合并对象 [代码]const obj1 = { a: 1 } const obj2 = { b: 2 } const combinObj = { ...obj1, ...obj2 } console.log(combinObj) [代码] 也就是通过展开操作符(spread operator)来实现。 获取数组中的最后一项 [代码]let arr = [0, 1, 2, 3, 4, 5]; const last = arr.slice(-1)[0]; console.log(last); [代码] 一次性函数，适用于初始化的一些操作 [代码]var sca = function() { console.log('msg')//永远只会执行一次 sca = function() { console.log('foo') } } sca() // msg sca() // foo sca() [代码] 提高工作效率，减少代码量，降低键盘磨损程度 我希望你喜欢它并学到了一些新东西 感谢你的阅读，编程快乐！

小程序支持播放和录制音频。小程序播放音频的方式有两种：内部音频和背景音频。 1.内部音频支持用户在使用小程序过程中播放音效; 2.背景音频支持在用户离开小程序后继续播放音效。 一、播放音频 (一)背景音频 播放背景音频 背景音频接口适用于音乐类小程序，如“音乐站”、“QQ 音乐小电台”。通过 wx.getBackgroundAudioManager() 接口可以获取全局唯一的背景音频管理器，所有关于背景音频的操作都由它来实现。 微信内只有一个背景音频，一个小程序开始播放背景音频之后，就持有背景音频播放器，只要当前小程序持有背景音频播放器，即使这个小程序进入后台（即用户离开小程序），也可以继续使用背景音频接口，且当前小程序不会被微信主动回收；一旦背景音频播放器被抢占（可能是其他小程序、微信内其他音乐、其他 App 的音乐），则小程序不再持有背景音频播放器。 [图片] [图片] （音乐站小程序） 在系统播放面板显示和控制 通过设置标题、专辑名、歌手名、封面图等属性，小程序音频接口支持在系统音乐播放面板显示出来。通过响应系统面板的点击事件（[代码]onPrev[代码]，[代码]onNext[代码]），可以实现列表播放。 [图片] （系统播放面板控制效果） (二)内部音频播放内部音频内部音频适用于所有小程序，尤其是游戏类目的小程序，如“跳一跳”。通过 wx.createInnerAudioContext() 接口可以创建一个音频实例。 [图片] 每个小程序可以同时持有和播放多个内部音频，但一旦小程序进入后台（onHide），所有内部音频都会被暂停，且在用户回到前台（即打开小程序）之前无法再被播放。 静音下也能播放在 iOS 系统中，内部音频默认遵循静音键设置。如果希望在静音时也能播放，可以设置 [代码]obeyMuteSwitch[代码] 为 [代码]false[代码]。 [图片] 安卓系统没有统一的静音开关，暂不支持此特性。 处理音频中断事件以游戏为例，在游戏中，经常有播放使用内部音频来播放游戏背景音乐的场景。音频中断事件指的是在游戏期间，音频被系统打断时触发的事件。音频中断事件分为中断开始和中断结束事件，分别使用 wx.onAudioInterruptionBegin() 和 wx.onAudioInterruptionEnd() 来监听。 以下事件会触发音频中断开始事件：接到电话、闹钟响起、系统提醒、收到微信好友的语音/视频通话请求。被中断之后，小游戏内所有音频会被暂停，并在中断结束之前都不能再播放成功。 中断结束之后，被暂停的音频不会自动继续播放，游戏可监听音频中断结束事件，并在收到中断结束事件之后调用背景音乐继续播放。 [图片] 如果游戏的逻辑强依赖音乐的播放（如音乐类游戏），需要在音频开始中断的时候暂停游戏 [图片] [图片] （跳一跳小游戏） 二、录制音频 通过 wx.getRecorderManager 接口，可以获取全局唯一的录音管理器。 [图片] 实现边录边传 默认情况下，录音结束后会生成一个本地文件，并通过回调返回本地文件的地址。对于实时性要求比较高的小程序（如“面对面翻译”），可以通过设置 [代码]frameSize[代码] 参数来设置一个帧的大小，这样每录制指定帧大小的内容后，会通过 [代码]onFrameRecorded[代码] 回调返回本次分片的数据。 [图片] 注意事项：不建议使用的历史接口上述接口可以满足所有音频相关的需求。除了上述接口，小程序内还有若干跟音频相关的接口（如 [代码]wx.startRecord[代码]、[代码]wx.playVoice[代码]、[代码]wx.playBackgroundAudio[代码] 等）。这些接口由于早期设计存在一些缺陷，我们不建议继续使用。

需求描述： 1、可以在图片上写入文字。 2、可以随意拖动文字的位置，并且最终会在拖动后图片对应的位置绘制对应的文字。 [图片] 开始的做法 1、通过touchmove事件，实时获取x，y轴的位置，实时setData到Data中，然后响应到页面中的输入框元素的top，left。 遇到的问题 1、过于频繁的操作移动，特别是恶意拖动的时候，会卡顿。 解决办法：使用wxs来解决，实现思路，在wxs中定义touch事件，移动时在wxs中先设置输入框的top，left位置。等touchend事件时在把top，left位置同步到页面的事件。相关代码如下 1、在页面目录下创建 页面名.wxs 的文件 2、在wxs文件中编写对应的js代码，在wxs中不能使用let，const，只能使用var定义变量名 // 元素x,y 0 位置跟 鼠标点击位置的距离 var moveX = 0, moveY = 0, x = 0, y = 0 // 开始移动文字 function touchstartByText(e, ownerInstance) { moveX = e.changedTouches[0].clientX - e.target.offsetLeft moveY = e.changedTouches[0].clientY - e.target.offsetTop } // 移动文字中 function touchmoveByText(e, ownerInstance) { // 移动图片 x = e.changedTouches[0].clientX - moveX y = e.changedTouches[0].clientY - moveY // 控制移动样式 e.instance.setStyle({ left: x + 'px', top: y + 'px' }) } // 移动位置结束 function touchendByText(e, ownerInstance) { if (x > 0 && y > 0) { // 操作的下标 var idx = e.target.dataset.idx || 0 // 同步页面数据 ownerInstance.callMethod('touchendByText', { idx: idx, x: x, y: y }) } } module.exports = { touchstartByText: touchstartByText, touchmoveByText: touchmoveByText, touchendByText: touchendByText } 小程序页面的.js文件定义给wxs中调用的函数 // 文字输入框移动结束在页面中js中的操作 touchendByText(data) { // 页面中处理的具体逻辑  } 小程序页面中的相关代码 引入wxs文件到页面中 wxs src="./ImgComments.wxs" module="move" /> 小程序页面中使用wxs中的事件，跟调用js不太一样的地方是需要使用{{}}扩起来，然后用引入的wxs文件定义的module的名称点击函数名。 input bindtouchstart="{{move.touchstartByText}}" bindtouchmove="{{move.touchmoveByText}}" bindtouchend="{{move.touchendByText}}" bindtap="selTextInput" bindinput="textInput" data-item="{{item}}" data-idx="{{idx}}" class="ipt" cursor-spacing="20" placeholder="输入内容..." placeholder-style="color:{{item.c}}" value="{{item.content}}" style="left:{{item.x}}px; top:{{item.y}}px; font-size:{{item.s}}px; color:{{item.c}};">/input>