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. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

  2. 进程与线程的通信机制----Queue

    进程运行时候变量是隔离的,线程间共享全局变量. 进程: from multiprocessing import Process from threading import Thread def get ...

  3. Java this与super的仇与恨

    刚开始学习面向对象的时候,看到this和super觉得this就是指当前对象,super指最近的父级对象.觉得用处不大. 后来,随着学习的深入,看别人的代码越来越多,发现this和super的使用率贼 ...

  4. Kubernetes — 作业副本与水平扩展

    Deployment 看似简单,但实际上,它实现了 Kubernetes 项目中一个非常重要的功能:Pod 的“水平扩展 / 收缩”(horizontal scaling out/in). 这个功能, ...

  5. vue-百度地图-maker文字标签显示隐藏

    html: <div id="allmap" class="map"></div>   script:   mounted() { th ...

  6. centos7之关于时间和日期以及时间同步的应用

    在CentOS 6版本,时间设置有date.hwclock命令,从CentOS 7开始,使用了一个新的命令timedatectl. 基本概念: 一.GMT.UTC.CST.DST 时间 UTC 整个地 ...

  7. 面试题（一续Spring）

    9.Spring体系结构和jar用途 参考https://blog.csdn.net/sunchen2012/article/details/53939253 spring官网给出了一张spring3 ...

  8. golang运算与循环等

    一.golang运算符 1.算术运算符 + 相加- 相减* 相乘/ 相除% 求余++ 自增-- 自减 2.关系运算符 == 等于!= 不等于> 大于< 小于>= 大于等于<= ...

  9. Flask初识

    一.Flask初识 1.Flask介绍 Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug服务 ,模板引擎则使用 Jinja2 .Flask ...

  10. D. Maximum Diameter Graph 贪心+图论+模拟

    题意:给出n个点的度数列 上限(实际点可以小于该度数列)问可以构造简单路最大长度是多少(n个点要连通 不能有平行边.重边) 思路:直接构造一条长链  先把度数为1的点 和度数大于1的点分开  先把度数 ...