查看: 3038|回复: 15

[技术交流] 解决ios无法触发摇一摇兼容,Cordova实现模仿微信摇一摇

[复制链接]
发表于 2019-6-28 21:57:23 | 显示全部楼层 |阅读模式
本帖最后由 哈哈镜子 于 2019-6-28 22:00 编辑

一、概要

这次的实例主要是通过Cordova这个API来实现,主要是在原来书本上的案例个人拓展而来,纯属个人兴趣,不喜勿喷。

二、实现环境

1、API:Cordova
2、框架:jQuery Mobile
3、编辑器:Visual Studio Code

三、主要插件

通过Cordova的加速度计插件来实现,需要添加插件:        加速度计:cordova plugin cordova-plugin-device-motion和震动插件:cordova plugin add cordova-plugin-vibration。

四、流程图

解决ios无法触发摇一摇兼容,Cordova实现模仿微信摇一摇

解决ios无法触发摇一摇兼容,Cordova实现模仿微信摇一摇

五、执行代码

index.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>摇一摇</title>
  8. <script src="js/jquery.js"></script>
  9. <script src="js/jquery.mobile-1.4.5.js"></script>
  10. <link rel="stylesheet" href="css/index.css">
  11. <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
  12. </head>
  13. <body>
  14. <!-- -------------------第一页-------------------- -->
  15. <div data-role="page" id="page2" data-theme="b">
  16. <!-- 页眉 -->
  17. <div data-role="header" id="header2" data-position="fixed">
  18. <!-- <a data-rel="back" data-icon="back">返回</a> -->
  19. <a data-icon="gear" id="test1">开始摇一摇</a>
  20. <h1 style="font-weight:bold;">摇一摇</h1>
  21. </div>
  22. <!-- 内容 -->
  23. <div data-role="content" id="content2" class="content" style="background-color:#2a2a2a">
  24. <!-- 主视图图片 -->
  25. <div id="shake">
  26. <div id="shaketop">
  27. <img src="img/topShake.png" id="top">
  28. </div>
  29. <div id="shakebottom">
  30. <img src="img/bottomShake.png" id="bottom">
  31. </div>
  32. </div>
  33. <!-- 摇出来的图片 -->
  34. <div id="yaoimg">
  35. <img id="shakeimg">
  36. <h1 id="heci" style="text-align: center;display: none"></h1>
  37. </div>
  38. </div>
  39. <!-- 页脚 -->
  40. <div data-role="footer" id="foot2" data-position="fixed" class="foot" style="border-style: none;">
  41. <div data-role="navbar">
  42. <ul id="ul1">
  43. <li><a data-icon="user" style="background-color: #2a2a2a;border-style: none; color: darkkhaki">人</a></li>
  44. <li><a data-icon="user" style="background-color: #2a2a2a;border-style: none;color: darkkhaki">人</a></li>
  45. <li><a data-icon="user" style="background-color: #2a2a2a;border-style: none;color: darkkhaki">人</a></li>
  46. </ul>
  47. </div>
  48. </div>
  49. </div>
  50. <script src="cordova.js"></script>
  51. <script src="js/index.js"></script>
  52. </body>
  53. </html>
复制代码
index.js:

  1. document.addEventListener("deviceready", onDeviceready);
  2. var pic = new Array('car.png', 'house.png', 'money.png');
  3. var name = new Array("车房钱");
  4. var all_roll = 0;
  5. var u_roll = 0;
  6. function onDeviceready() {
  7. console.log('启动。。。');
  8. $('#test1').click(function () {
  9. //重置样式
  10. $("#shake").css("display","none");
  11. $('#test1').text("再摇一次");
  12. $("#yaoimg").animate({
  13. height: '0',
  14. width: '0',
  15. borderWidth:'0px'
  16. });
  17. $('#heci').css("display", "none");
  18. $('#shakeimg').css("display", "none");
  19. console.log('触发按钮');
  20. startWatch();
  21. });
  22. }
  23. // ---用于处理动画---
  24. function start() {
  25. var rang = Math.floor(Math.random() * 3); //随机生成0-2的数字,方便取出图片
  26. console.log(rang);
  27. $('#shakeimg').attr("src", "img/" + pic[rang]);
  28. console.log(pic[rang]);
  29. $('#heci').text("恭喜你,摇出了:" + name[rang] + "!!!");
  30. console.log(name[rang]);
  31. $("#shakebottom").animate({
  32. height: '+=150px',
  33. marginTop: '0px'
  34. });
  35. console.log("下滑1");
  36. $("#shaketop").animate({
  37. height: '+=150px',
  38. marginBottom: '0px'
  39. }, function () {    //用动画显示随机生成的图片
  40. $("#yaoimg").animate({
  41. height: '50%',
  42. width: '80%',
  43. opacity: '1',
  44. borderWidth:'5px'
  45. });

  46. $("#shakeimg").css({
  47. "height": "150px",
  48. "width": "150px",
  49. "display": "block"
  50. });
  51. console.log("显示照片");
  52. $("#heci").fadeIn(2000);
  53. console.log("显示文字");
  54. $("#shake").css("display","none");
  55. });
  56. console.log('上滑1');
  57. }
  58. //---监视设备的加速度
  59. function startWatch() {
  60. //每0.3s更新一次加速度信息
  61. var options = {
  62. frequency: 300
  63. };
  64. wachID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
  65. console.log('调用插件');
  66. console.log(wachID);
  67. }
  68. //---停止监视设备的加速度
  69. function stopWatch() {
  70. u_roll = 0;
  71. all_roll = 0;
  72. navigator.accelerometer.clearWatch(wachID);
  73. }
  74. //---获取加速度成功事件
  75. function onSuccess(accelerometer) {
  76. var pow_v = Math.pow(accelerometer.x, 2) + Math.pow(accelerometer.y, 2) + Math.pow(accelerometer.z, 2);
  77. var v = Math.sqrt(pow_v);
  78. console.log(u_roll);
  79. if (v > 15) {
  80. all_roll++; //全部摇动次数
  81. u_roll++; //有效摇动次数
  82. navigator.vibrate(300); //震动反馈
  83. if (u_roll > 1) { //判定这个为摇动,开始显示图片
  84. //摇一摇的动画
  85. $("#shake").css("display","block");
  86. $("#shakebottom").animate({
  87. height: '-=150px',
  88. marginTop: '150px'
  89. });
  90. console.log("下滑");
  91. $("#shaketop").animate({
  92. height: '-=150px',
  93. marginBottom: '150px'
  94. });

  95. console.log('上滑');
  96. stopWatch();
  97. console.log("停止插件");
  98. //调用函数开始显示图片
  99. start();
  100. console.log('显示动画并开始显示图片');
  101. }
  102. } else {
  103. all_roll++;
  104. console.log('摇晃角度不够。');
  105. }
  106. }
  107. //---获取加速度失败事件
  108. function onError() {
  109. alert("错误!");
  110. }
复制代码
index.css

  1. #yao {
  2. float: left;
  3. width: 100%;
  4. height: 100%;
  5. display: flex;
  6. justify-content: center;
  7. align-items: center;
  8. z-index: 9999;
  9. }
  10. .content {
  11. position: absolute;
  12. top: 0%;
  13. left: 0%;
  14. bottom: 0%;
  15. right: 0%;
  16. margin: 0%;
  17. padding: 0%;
  18. height: auto;
  19. }
  20. #content {
  21. background-color: #2a2a2a;
  22. }
  23. #content2 {
  24. margin: 0%;
  25. padding: 0%;
  26. position: absolute;
  27. top: 0%;
  28. left: 0%;
  29. bottom: 0%;
  30. right: 0%;
  31. background: url("../img/shakeIcon.png") no-repeat center;
  32. }
  33. #shake {
  34. display: none;
  35. background: url("../img/flower.png") #1d1d1d no-repeat center;
  36. position: absolute;
  37. top: 0%;
  38. left: 0%;
  39. bottom: 0%;
  40. right: 0%;
  41. }
  42. #shaketop {
  43. background-color: #2a2a2a;
  44. position: absolute;
  45. width: 100%;
  46. top: 0%;
  47. height: 50%;
  48. text-align: center;
  49. border-bottom-style: solid;
  50. border-bottom-color: #555555;
  51. border-bottom-width: 4px;
  52. display: flex;
  53. justify-content: center;
  54. align-items: flex-end;
  55. overflow: hidden;
  56. }
  57. #shakebottom {
  58. background-color: #2a2a2a;
  59. position: absolute;
  60. width: 100%;
  61. bottom: 0%;
  62. border-top-style: solid;
  63. border-top-color: #555555;
  64. border-top-width: 4px;
  65. text-align: center;
  66. display: flex;
  67. justify-content: center;
  68. align-items: flex-start;
  69. height: 50%;
  70. overflow: hidden;
  71. }
  72. #yaoimg {
  73. opacity: 0;
  74. background-color: #d81515;
  75. float: left;
  76. position: absolute;
  77. width: 70%;
  78. height: 50%;
  79. left: 50%;
  80. top: 50%;
  81. transform: translate(-50%, -50%);
  82. border-style: inset;
  83. border-width: 5px;
  84. border-color: aqua;
  85. }
  86. #heci {
  87. /* opacity: 0; */
  88. color: yellow;
  89. float: left;
  90. position: absolute;
  91. width: 90%;
  92. left: 50%;
  93. top: 80%;
  94. transform: translate(-50%, -50%);
  95. }
  96. #shakeimg {
  97. float: left;
  98. position: absolute;
  99. left: 50%;
  100. top: 40%;
  101. transform: translate(-50%, -50%);
  102. }
  103. .foot {
  104. background-color: #2a2a2a;
  105. }
  106. body {
  107. padding: 0%;
  108. margin: 0%;
  109. }
复制代码

解决ios无法触发摇一摇兼容,Cordova实现模仿微信摇一摇

解决ios无法触发摇一摇兼容,Cordova实现模仿微信摇一摇

解决ios无法触发摇一摇兼容,Cordova实现模仿微信摇一摇

解决ios无法触发摇一摇兼容,Cordova实现模仿微信摇一摇

解决ios无法触发摇一摇兼容,Cordova实现模仿微信摇一摇

解决ios无法触发摇一摇兼容,Cordova实现模仿微信摇一摇

参考资料:王亚飞.王洪飞.《Apache Cordova移动应用开发实战》

演示源码下载

游客,如果您要下载源码或者查看隐藏内容请回复

回复

使用道具 举报

发表于 2019-7-3 22:21:14 | 显示全部楼层
我是vip会员,需要下载源码
回复 支持 反对

使用道具 举报

发表于 2019-7-3 22:47:52 | 显示全部楼层
你的代码跑不起来,怎么处理??
回复 支持 反对

使用道具 举报

发表于 2019-7-3 22:51:21 | 显示全部楼层
下载了源码,在本地tomcat跑报错,没有cordova.js文件,能否看看处理下?
回复 支持 反对

使用道具 举报

发表于 2019-7-3 23:00:35 | 显示全部楼层
连cordova.js这个文件你都没引入
回复 支持 反对

使用道具 举报

发表于 2019-7-4 09:10:52 | 显示全部楼层
你测试过这个代码吗?这份文章直接从网上copy过来的吧?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-7-4 09:42:23 | 显示全部楼层
bear-大熊 发表于 2019-7-4 09:10
你测试过这个代码吗?这份文章直接从网上copy过来的吧?

Cordova是需要配置环境的,不懂的话建议百度,你网上看的那篇文章,我写的,只不过有人问,我搬过来而已。
回复 支持 反对

使用道具 举报

发表于 2019-7-4 09:44:44 | 显示全部楼层
那请问index.html中引入的cordova.js文件中没有怎么办?后续在微信中访问也要安装cordova?
回复 支持 反对

使用道具 举报

发表于 2019-7-4 12:15:02 | 显示全部楼层
bear-大熊 发表于 2019-7-4 09:44
那请问index.html中引入的cordova.js文件中没有怎么办?后续在微信中访问也要安装cordova?

在服务端安装环境即可,然后你再调用js,建立学习一下cordova插件,问的估计作者没有脾气了。
回复 支持 反对

使用道具 举报

发表于 2019-7-25 17:13:56 | 显示全部楼层
试试能不能用试试能不能用试试能不能用
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表