51工具盒子人们不太看重自己的力量------这就是他们软弱的原因。------高尔基
播放音频的代码很简单：
|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 | hljs vue const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.src = '/imgs/oss/picGo/kuangstudy9664a946-42a5-4111-80e7-65e735932ef7.wav'; innerAudioContext.play(); |
官方文档：
https://uniapp.dcloud.io/api/media/audio-context
除了播放、暂停、停止等也都能实现
完整代码：
|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | hljs vue <template> <view class="content"> <image :class="{ widther: play }" class="logo" src="/static/logo.png"></image> <view class="text-area"> <text class="title">{{ title }}</text> </view> <navigator :class="{ widther: play }" url="/pages-user/list">user-list</navigator> <navigator :class="{ widther: play }" url="/pages-news/list">news-list</navigator> <view>{{ val }}</view> <view @tap="parentEvent"><view @tap.stop="childEvent">触发触发</view></view> <view @tap="parentEvent"><view @touchend="childEvent">触发触发</view></view> </view> </template> <script> export default { data() { return { title: 'Hello', play: false, val: 0 }; }, onLoad() { const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.src = '/imgs/oss/picGo/kuangstudy9664a946-42a5-4111-80e7-65e735932ef7.wav'; innerAudioContext.play(); setTimeout(() => (this.play = true), 1000); uni.$on('add', this.add); }, methods: { add(e) { console.log('主页的add被触发了！: ', e); this.val += e.data; }, parentEvent(e) { console.log('parentEvent'); }, childEvent(e) { console.log('childEvent'); e.stopPropagation(); } } }; </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 0; width: 0; /* #ifndef APP-PLUS-NVUE */ transition: all 1s; /* #endif */ /* #ifdef APP-PLUS-NVUE */ transition: width, height 1s; /* #endif */ } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } .widther { width: 200rpx; height: 200rpx; } </style> |
