vue 写h5页面-摇一摇
依赖的第三方的插件 shake.js
github地址: https://github.com/alexgibson/shake.js
提供一个摇一摇音效下载地址:http://aspx.sc.chinaz.com/query.aspx?keyword=%E6%91%87%E4%B8%80%E6%91%87&classID=14
安装包shake.js:
npm install shake.js --save
vue组件内容:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<span @click="toastDemo"> 123</span>
<h4>手机摇一摇的功能</h4>
<div>
<audio src="../../static/5018.wav" ref="shakeAudio">
您的浏览器不支持 audio 标签。
</audio>
</div>
</div>
</template> <script>
// var Shake = require('shake.js'); // commonjs 的方式引入
import Shake from 'shake.js'; // es6的方式导入
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
created () {
},
mounted () {
let myShakeEvent = new Shake({
threshold: 12, // optional shake strength threshold
timeout: 500 // optional, determines the frequency of event generation
});
myShakeEvent.start();
window.addEventListener('shake', this.shakeEventDidOccur, false);
},
methods: {
toastDemo () {
// toastPlugin('你好,npm package')
},
shakeEventDidOccur () {
// alert("it's shake!")
// myShakeEvent.stop();
let audio = this.$refs.shakeAudio;
if (window.navigator.vibrate) {
navigator.vibrate(500);
}
audio.play()
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
需要注意的是在微信里面,ios内置的浏览器是没有声音的,这时候需要,引入微信的api,通过他触发声音的播放。
methods: {
palyAudio () {
window.wx.config({
debug: false,
appId: '',
timestamp: 1,
nonceStr: '',
signature: '',
jsApiList: []
});
window.wx.ready(function () {
document.getElementById('shakeAudio').play();
});
}
}
vue 写h5页面-摇一摇的更多相关文章
- 用vue 写h5页面-摇一摇
vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目 准备插件(包):依赖的 ...
- Vue的H5页面唤起支付宝支付
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支 ...
- 【实战问题】【4】Vue写的页面在微信手机端和微信web开发者工具中都能正常显示,但是在微信pc端上显示空白
原因:pc端微信浏览器不支持es6,而代码中使用了 let . 解决:将 let 改为 var(若使用 es6 语法比较多,可以进行转换,将 es6 语法转为 es5) 参考博客: 1,h5微信页面在 ...
- 【vue】使用vue构建多页面应用
先了解一些单页面和多页面的区别 mm 多页应用模式MPA 单页应用模式SPA 应用构成 由多个完整页面构成 一个外壳页面和多个页面片段构成 跳转方式 页面之间的跳转是从一个页面跳转到另一个页面 页面片 ...
- H5页面通用头部设置
见到很多人写H5页面都不设置头部,不忍直视,于是整理一篇文章,不定期更新,为了让自己显得专业一点,也为了方便自己复制粘贴 一般来说必须设置项 <!-- 页面编码 --> <meta ...
- 用vuex写了一个购物车H5页面的示例代码
用vuex写了一个购物车H5页面的示例代码:https://www.jb51.net/article/152008.htm 通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是 ...
- Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template
pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言 想必你一定使用过易企秀或百度H5等微场景生成工具 ...
- H5实现摇一摇技术总结
摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...
- H5摇一摇遇到的问题
一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像 ...
随机推荐
- matplotlib添加子图(拼图功能)
我们已经知道,matplotlib是python中的一个十分好用的作图库,它的简单的使用方法可以在之前的随笔中找到.传送门:https://www.cnblogs.com/chester-cs/p/1 ...
- 操作系统 I/O 全流程详解
我们之前的文章提到了操作系统的三个抽象,它们分别是进程.地址空间和文件,除此之外,操作系统还要控制所有的 I/O 设备.操作系统必须向设备发送命令,捕捉中断并处理错误.它还应该在设备和操作系统的其余部 ...
- react 使用的方法:
react 使用方法: 第一步: 初始化react 项目 (1)安装node npm (2)npm install --global create-react-app (3)create-react ...
- C语言副本机制
1.除了数组外,其他都有副本机制(包括结构体数组) 2.结构体作为参数具有副本机制,结构体返回值也有副本机制 . 3.函数的参数和返回值都有他的副本机制. #include<stdio.h> ...
- Jmeter系列(26)- 详解 JSON 提取器
果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html 为什么要用 JSON 提取器 JSON ...
- java并发——copyonwrite
今天在网上看到一个问题,问除了加锁之外,有没有其他方法来保证线程安全? ---- copyonwrite机制 一.copyonwrite机制 机制实现:写时复制, 在往集合中添加数据的时候,先拷贝存储 ...
- 用一杯茶时间搭建Gitea服务器
一.简单介绍 Gitea搭建局域网内的基于git的代码托管服务器,可以实现的功能包括:组织管理.团队管理.组织仓库设定.团队仓库分配.组织及团队权限分配管理.仓库添加PC协作者.仓库添加组织团队.分 ...
- C#数据结构与算法系列(二十):插入排序算法(InsertSort)
1.介绍 插入排序算法属于内部排序算法,是对于欲排序的元素以插入的方式找寻该元素的适当位置,以达到排序的目的 2.思想 插入排序(Insertion Sorting)的基本思想是:把n个待排序的元素看 ...
- 佛祖保佑,永无BUG d=====( ̄▽ ̄*)b
博主最近在网上看到了一个佛祖保佑永无BUG的帖子,各种符号画像层出不穷.也不知道是哪个人开的头,一堆人跟着转载. /** * 江城子 . 程序员之歌 * * 十年生死两茫茫,写程序,到天亮. * 千行 ...
- SpringBoot--使用redis实现分布式限流
1.引入依赖 <!-- 默认就内嵌了Tomcat 容器,如需要更换容器也极其简单--> <dependency> <groupId>org.springframew ...