vue配合其他ui框架除了开发一个完整的web项目外，也有不少的项目做一些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
引用：
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
（这个js写的好像有点问题，在vue 单个组件里面进行引用的时候，无法使用，还没找出原因，我是直接在index.html 中 script 引用的）
使用：
<audio id="shakeAudio" :src="/5218.mp3" preload ref="shakeAudio"></audio>
methods： {
palyAudio () {
window.wx.config({ debug: false, appId: '', timestamp: 1, nonceStr: '', signature: '', jsApiList: [] }); window.wx.ready(function () { document.getElementById('shakeAudio').play(); });
}
}
给window的全局对象增加一个方法，然后我们对这个方法进行配置调用。
如果不引用线上的地址，想下载到本地来，在index.html里面应该怎么引入呢？
因为这个是vue-cli的打包工具使用的，可以利用这个webpack的环境变量 来帮助我们找到这个相对路径。因为我们知道，这个项目部署上线的时候，是需要npm run build 的，打包后，会把开发文件打包成一个index.html 文件和一个static的静态文件夹，我们开发需要的css,js文件等都会打包到这static文件夹，所以，当我们把目标js文件放进开发时候的static文件，要打包下。废话那么多，只有一行可用的代码：
<script src="<%= htmlWebpackPlugin.files.publicPath %>static/js/jweixin.js"></script>
查看下目标js文件是否打包成功：
执行 npm run build
.... (打包中)
查看打包后的文件夹下面的index.html ,格式化代码如下
<!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地址已经隐藏）
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：电荷为什么不随运动而变化 下一篇：火麻油的功效与作用 火麻油怎么吃
