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. UNICODE与ASCII

    1.ASCII的特点 ASCII 是用来表示英文字符的一种编码规范.每个ASCII字符占用1 个字节,因此,ASCII 编码可以表示的最大字符数是255(00H—FFH).这对于英文而言,是没有问题的 ...

  2. 我用Python实现了一个小说网站雏形

    前言 前段时间做了一个爬取妹子套图的小功能,小伙伴们似乎很有兴趣,为了还特意组建了一个Python兴趣学习小组,来一起学习.十个python九个爬,在大家的印象中好像Python只能做爬虫.然而并非如 ...

  3. 为奋战在HIS创新路上的医院信息科赋能

    为奋战在HIS创新路上的医院信息科赋能 南京都昌信息科技有限公司 袁永福 2017-7 ◆◆前言 近日,上海瑞金医院向我司表示:“我院从2000年开始自主开发医院信息系统,走出了一条可持续的信息化发展 ...

  4. PHP(SentCMS)网站 “新手”捉虫记

    我拖着疲惫的身躯,努力打开眼皮在写...... 昨晚弄到12点,我感觉应该弄好了. 故事开头是这样的:我呢朋友有个网站需要开发,我当时没时间就包给外面的公司了,由于外面公司维护费用比较贵. 那么网站维 ...

  5. js计算两个日期的月份差？

    //两个日期 var date1 = '2013-03-26'; var date2 = '2011-01-10'; // 拆分年月日 date1 = date1.split('-'); // 得到月 ...

  6. DAY17、常用模块

    一.time模块 1.时间戳(timestamp):time.time()     #可以作为数据的唯一标识   是相对于1970-1-1-0:0:0时间插值 2.延迟线程的运行:time.sleep ...

  7. JQ——利用一个开关，点击一个按钮完成展开收起功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. java编译过程（字节码编译和即时编译）

    Javac编译与JIT编译 简介: 编译包括两种情况: 1,源码编译成字节码 2,字节码编译成本地机器码(符合本地系统专属的指令) 解释执行也包括两种情况: 1,源码解释执行 2,字节码解释执行 解释 ...

  9. 【LR9】【LOJ561】CommonAnts 的调和数 数论 筛法

    题目大意 有一个长度为 \(n\) 的序列. 有 \(m\) 次修改,每次给你 \(x,y\),令 \(\forall 1\leq i\leq \lfloor\frac{n}{x}\rfloor,a_ ...

  10. pestle.phar

    nstalll: 1,cd /usr/local/bin && curl -LO http://pestle.pulsestorm.net/pestle.phar : 2,chmod  ...