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: ,

    　　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地址已经隐藏）

 
 
 

用vue 写h5页面-摇一摇的更多相关文章

  1. vue 写h5页面-摇一摇

    依赖的第三方的插件 shake.js github地址: https://github.com/alexgibson/shake.js 提供一个摇一摇音效下载地址:http://aspx.sc.chi ...

  2. Vue的H5页面唤起支付宝支付

    目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支 ...

  3. 【实战问题】【4】Vue写的页面在微信手机端和微信web开发者工具中都能正常显示，但是在微信pc端上显示空白

    原因:pc端微信浏览器不支持es6,而代码中使用了 let . 解决:将 let 改为 var(若使用 es6 语法比较多,可以进行转换,将 es6 语法转为 es5) 参考博客: 1,h5微信页面在 ...

  4. 【vue】使用vue构建多页面应用

    先了解一些单页面和多页面的区别 mm 多页应用模式MPA 单页应用模式SPA 应用构成 由多个完整页面构成 一个外壳页面和多个页面片段构成 跳转方式 页面之间的跳转是从一个页面跳转到另一个页面 页面片 ...

  5. H5页面通用头部设置

    见到很多人写H5页面都不设置头部,不忍直视,于是整理一篇文章,不定期更新,为了让自己显得专业一点,也为了方便自己复制粘贴 一般来说必须设置项 <!-- 页面编码 --> <meta ...

  6. 用vuex写了一个购物车H5页面的示例代码

    用vuex写了一个购物车H5页面的示例代码:https://www.jb51.net/article/152008.htm 通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是 ...

  7. Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template

    pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言 想必你一定使用过易企秀或百度H5等微场景生成工具 ...

  8. H5实现摇一摇技术总结

    摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...

  9. H5摇一摇遇到的问题

    一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像 ...

随机推荐

  1. 父进程结束，其子进程不会结束，会挂到init进程下

    结论:一个父进程产生子进程,父进程结束(kill),子进程不会结束,子进程被init进程托管 下面是过程: d.sh脚本是一个ping命令,执行d.sh 目前,103310 进程为父进程,103344 ...

  2. Python 执行 shellcode

    import urllib2 import ctypes import base64 # 从我们的web服务器上下载shellcode url = "http://rinige.com/sh ...

  3. jexus部署webapi或mvc报错处理

    1路径错误:因为Windows和Linux的路径问题大小写问题. 解决: 修改jexus下的jws把export MONO_IOMAP=all注释去掉放出来. 2, 解决: 卸载

  4. lr12 websocket

    loadrunner12以上版本支持websocket,在http/html协议录制时可以直接录制websocket相关内容信息. 网上找的一个测试websocket网址:http://www.blu ...

  5. Android艺术——Bitmap高效加载和缓存（1）

    通过Bitmap我们可以设计一个ImageLoader,实现应该具有的功能是: 图片的同步加载:图片的异步加载:图片的压缩:内存缓存:磁盘缓存:网络获取: 1.加载 首先提到加载:BitmapFact ...

  6. Monkey参数介绍

    monkey 参数 参数分类 常规类参数 事件类参数 约束类参数 调试类参数 常规类参数 常规类参数包括帮助参数和日志信息参数.帮助参数用于输出Monkey命令使用指导:日志信息参数将日志分为三个级别 ...

  7. linux 命令mkdir、cd

    mkdir 创建文件夹 -p 递归创建文件夹 可以一次性创建多个目录 cd pwd 显示当前目录的绝对路径 rmdir  删除空目录  只能删除空目录  鸡肋,基本用rm cp  复制文件产品 -r ...

  8. python学习日记（内置、匿名函数练习题）

    用map来处理字符串列表 用map来处理字符串列表,把列表中所有水果都变成juice,比方apple_juice fruits=['apple','orange','mango','watermelo ...

  9. BZOJ4259残缺的字符串

    题目描述 很久很久以前,在你刚刚学习字符串匹配的时候,有两个仅包含小写字母的字符串A和B,其中A串长度为m,B串长度为n.可当你现在再次碰到这两个串时,这两个串已经老化了,每个串都有不同程度的残缺. ...

  10. 【译】1. Java反射——引言

    原文地址:http://tutorials.jenkov.com/java-reflection/index.html *By Jakob Jenkov Java的反射机制使得它可以在运行时检查类.接 ...