用vue 写h5页面-摇一摇
vue配合其他ui框架除了开发一个完整的web项目外，也有不少的项目做一些h5的活动页面开发。你的页面现在需要模拟微信的摇一摇动作。
项目环境： vue-cli 完成的一个项目
准备插件（包）：依赖的第三方的插件（后续会完成如何写vue插件的方法）shake.js ,github地址： https://github.com/alexgibson/shake.js 我使用的github 项目要点赞（现在要养成习惯）
使用：在vue的一个组件里使用这个 插件。
接下来我们看这个插件提供的api,灵不灵照书行。
shake.js 到是没有提供一个完成的 vue 使用的demo api ，现在要尝试使用这个
安装包： npm install shake.js --save
使用包
基本上是按照api 文档上来搬的代码。我们在摇一摇的时候，处理发出声音并振动。
查看我们的摇一摇的结果：
因为在pc 上无法完成我们的摇一摇，所以要在手机上查看。在一个局域网下，发送可以访问自己电脑的ip给你的 小 phone，然后就是使劲的要吧。 顺便提供一个摇一摇的声音下载地址：http://sc.chinaz.com/yinxiao/
附件：本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，通过他触发声音的播放
地址：
https://res.wx.qq.com/open/js/jweixin-1.0.0.js
methods： {
palyAudio () {
window.wx.config({
debug: false,
appId: '',
timestamp: ,
nonceStr: '',
signature: '',
jsApiList: []
});
window.wx.ready(function () {
document.getElementById('shakeAudio').play();
});
}
}
给window的全局对象增加一个方法，然后我们对这个方法进行配置调用。
<!DOCTYPE html>
<html> <head>
<meta http-equiv=Content-Type charset=UTF-8>
<meta http-equiv=Cache-Control content=no-cache>
<title></title>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<meta name=format-detection content="telephone=no">
<meta name=format-detection content="email=no">
<meta name=keywords content="">
<meta name=description content="">
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">
<script src=http://***ip***/app_4.5/static/js/jweixin.js></script> //look， 打包过来了
<link href=http://****ip***/app_4.5/static/css/app.177c68abba2e90f66c73548a7aaaaa1d.css rel=stylesheet>
</head> <body>
<div id=app>
<router-view></router-view>
</div>
<script type=text/javascript src=http://*****ip**/app_4.5/static/js/manifest.7baf77e3b1560c6272e5.js></script>
<script type=text/javascript src=http://*****ip*****/app_4.5/static/js/vendor.5ec5b947fd6c3ef44af7.js></script>
<script type=text/javascript src=http://*****ip****/app_4.5/static/js/app.fc7bdc24d6e737613193.js></script>
</body> </html>
（打包后相关的ip地址已经隐藏）
用vue 写h5页面-摇一摇的更多相关文章
- vue 写h5页面-摇一摇
依赖的第三方的插件 shake.js github地址: https://github.com/alexgibson/shake.js 提供一个摇一摇音效下载地址:http://aspx.sc.chi ...
- 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摇一摇遇到的问题
一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像 ...
随机推荐
- GEC6818连接Ubuntu，下载程序至开发板
使用 secure CRT连接开发板,可视化操作 连接成功 设置临时ip ubuntu 要跟 开发板同一网段: ip前三位相同 代码:sudo service tftpd-hpa restart 代 ...
- Mysql完整约束性
一.介绍 约束条件与数据类型的宽度一样,都是可选参数 作用:用于保证数据的完整性和一致性主要分为: PRIMARY KEY (PK) 标识该字段为该表的主键,可以唯一的标识记录 FOREIGN KEY ...
- pyspider安装出现问题参考
File "c:\users\13733\appdata\local\programs\python\python37\lib\site-packages\pyspider\run.py&q ...
- spring boot 表单验证
1 设置某个字段的取值范围 1.1 取值范围验证:@Min,@Max ① 实例类的属性添加注解@Min ② Controller中传入参数使用@Valid注解 1.2 不能为空验证:@NotNull ...
- T66597 小xzy的任务 题解
T66597 小xzy的任务 题目背景 今天,小xzy的班主任交给他一个严肃的任务,匹配羽毛球运动员! ! ! 题目描述 羽毛球队有男女运动员各n人.给定2个n×n矩阵P和Q.Pij是男运动员i和女 ...
- EntityManagerFactory 是多线程的 将其变成一个单线程(使用静态方法)提交效率
由于EntityManagerFactory 是一个线程安全的对象(即多个线程访问同一个EntityManagerFactory 对象不会有线程安全问题),并且EntityManagerFactory ...
- mpvue——引入iconfont字体图标
前言 有问题可以随时提问,评论私信,只要我有时间我都会第一时间回复.当大家发现这篇文章不适用的时候烦请告知下,我好做好更改! 放置 下载好的字体图标放在static目录下,我是自己又创建了一个icon ...
- [SDOI2011]消耗战（虚树）
洛古题面 题意:给定一棵树,割断每一条边都有代价,每次询问会给定一些点,求用最少的代价使所有给定点都和1号节点不连通 暴力\(DP\) 我们先考虑暴力怎么做 设\(dp[u]\)为以\(u\)为根的子 ...
- Java EE之表达式语言EL（上）
1.了解表达式语言 表达式语言(EL)用于在不使用脚本.声明或者表达式的情况下,在JSP页面中渲染数据. EL曾是JSTL 1.0规范(与JSP 1.2)中的一部分,并且只可以用作JSTL标签的特性. ...
- 第十九节、基于传统图像处理的目标检测与识别(词袋模型BOW+SVM附代码)
在上一节.我们已经介绍了使用HOG和SVM实现目标检测和识别,这一节我们将介绍使用词袋模型BOW和SVM实现目标检测和识别. 一 词袋介绍 词袋模型(Bag-Of-Word)的概念最初不是针对计算机视 ...