Cordova实现模仿微信摇一摇（简单版）

最新推荐文章于 2023-08-27 22:36:32 发布

Minro_

最新推荐文章于 2023-08-27 22:36:32 发布

阅读量532

点赞数

分类专栏： Cordova 文章标签： Cordova JavaScript jQuery

本文链接：https://blog.csdn.net/Balladry/article/details/89004025

版权

本文介绍了一位大三计算机学生如何使用Cordova和jQuery Mobile实现模仿微信摇一摇的功能。通过Cordova的加速度计和震动插件，结合jQuery实现动画效果。在加速度值达到一定条件时触发动画和随机展示内容。源代码和项目已上传至GitHub，供读者参考学习。

摘要由CSDN通过智能技术生成

Cordova模仿微信摇一摇（简单版）

一、概要

这次的实例主要是通过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。

四、流程图

五、执行代码

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>摇一摇</title>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.4.5.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
</head>

<body>
    <!-- -------------------第一页-------------------- -->
    <div data-role="page" id="page2" data-theme="b">
        <!-- 页眉 -->
        <div data-role="header" id="header2" data-position="fixed">
            <!-- <a data-rel="back" data-icon="back">返回</a> -->
            <a data-icon="gear" id="test1">开始摇一摇</a>
            <h1 style="font-weight:bold;">摇一摇</h1>
        </div>
        <!-- 内容 -->
        <div data-role="content" id=

最低0.47元/天解锁文章

Minro_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
Cordova实现模仿微信摇一摇（简单版）

Cordova模仿微信摇一摇（简单版）一、概要二、实现环境三、主要插件四、流程图五、执行代码六、执行效果总结一、概要这次的实例主要是通过Cordova这个API来实现，主要是在原来书本上的案例个人拓展而来，纯属个人兴趣，不喜勿喷。本人一名大三计算机学生，一个前端小菜鸟，可能有些代码写得不太规范，请多多指教！！二、实现环境1、API：Cordova2、框架：jQuery Mobile3...
复制链接

扫一扫