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. tomcat 启动窗口乱码

    在tomcat主目录下的conf文件夹里,找到logging.properties文件: 用记事本打开,找到以下内容 java.util.logging.ConsoleHandler.encoding ...

  2. Java 显示读取properties 乱码解决方案

    项目开发时,在配置springmvc 校验错误提示信息时,配置到properties的中文,在前端取出时,显示为乱码,可以确定properties 配置文件已经被设为UTF-8编码,在springmv ...

  3. 二、IIS部署WebApi

    一.项目发布 二.hosts 更改 C:\Windows\System32\drivers\etc 三.网站搭建 之后我将端口默认更改 8001   以防与80端口冲突 注意: 1.先测试IIS的lo ...

  4. VMware Workstation 10序列号：

    VMware Workstation 10序列号:1Y0LW-4WJ9N-LZ5G9-Z81QP-92PN7

  5. 动态dp学习笔记

    我们经常会遇到一些问题,是一些dp的模型,但是加上了什么待修改强制在线之类的,十分毒瘤,如果能有一个模式化的东西解决这类问题就会非常好. 给定一棵n个点的树,点带点权. 有m次操作,每次操作给定x,y ...

  6. LOJ#2339 通道

    题意:给你三棵树,求所有点对在三棵树上的距离和中的最大值. 解:首先有个暴力,然后还有个迭代乱搞,可以得到61分... namespace bf { inline void solve() { ; i ...

  7. python 爬虫之beautifulsoup（bs4）使用 --待完善

    #!/usr/bin/env python # -*- coding:utf- -*- from bs4 import BeautifulSoup import requests url = 'htt ...

  8. 你可能不知道的 Mac 技巧 - 文本操作

    找不到 Mac 上的 Home,End,PageUp?想截图还得打开 QQ?不知道 Mac 如何剪切文件?找不到全屏窗口的按钮?找不到隐藏文件夹?不知道如何向后删除?想少用鼠标,多用键盘?…… 希望我 ...

  9. 降维【PCA & SVD】

    PCA(principle component analysis)主成分分析 理论依据 最大方差理论 最小平方误差理论 一.最大方差理论(白面机器学习) 对一个矩阵进行降维,我们希望降维之后的每一维数 ...

  10. win7 远程连接服务器出现身份验证错误，又找不到加密Oracle修正

    今天想用远程桌面连接登录服务器,结果,弹出一个错误的提示框:发生身份验证错误,要求的函数不受支持. 然后在网上找了相关的教程,基本上所有的方法都是如下所示: 策略路径:"计算机配置" ...