移动教学APP

Menu User

用户登录

APP简介

云南大学移动教学APP是为实施MOOC(慕课)课程的校本教学、基于BYOD(自带设备)的无线网络交互式课堂教学、任务驱动式教学等新兴教学理念和教学形式而开发的移动应用,目的是实现线上教学与线下教学、实验、实训深度融合的混合式教学模式,帮助学生和教师提高学习和教学的效率和质量。

当前课程

《APP的设计与开发入门》

APP网址:

打开

H5前部(不能修改):

H5(代码写在下面):

H5后部(不能修改):

JS前部(不能修改):

JS(代码写在下面):

JS后部(不能修改):

CSS(自定义的CSS):

H5 底部栏:


<!-- 底部栏 -->
<div data-role="footer" data-theme="a" data-position="fixed">
<div class="ui-grid center">
<div class="ui-block">
<div data-role="navbar" data-position="fixed">
<ul>
<li><a id="button1" href="#page1" data-prefetch="true" data-icon="grid">平铺</a></li>
<li><a id="button2" href="#page2" data-prefetch="true" data-icon="bars">列表</a></li>
<li><a id="button3" href="#pageHome" data-prefetch="true" class="ui-btn-active" data-icon="home">首页</a></li>
<li><a id="button4" href="#page3" data-prefetch="true" data-icon="edit">发布</a></li>
<li><a id="button5" href="#page4" data-prefetch="true" data-icon="user">我</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- /底部栏 -->
							

H5 pageHome(首页):


<!-- pageHome -->
<div data-role="page" data-theme="a" class="jqm-demos" id="pageHome" data-title="首页">

<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h2 id="appHomeTile">APP名称</h2>

<div id="appHomeIntro">
简介内容。
</div>
</div>

</div>
<!-- /pageHome -->
							

H5 pageDefault(登陆后的默认页):


<!-- pageDefault -->
<div data-role="page" data-theme="a" class="jqm-demos" id="pageDefault" data-title="默认页">

<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h2 id="appDefaultTile">标题</h2>

<div id="appDefaultContent">
内容。
</div>
</div>

</div>
<!-- /pageDefault -->
							

H5 page1(平铺):


<!-- page1 -->
<div data-role="page" data-theme="a" class="jqm-demos" id="page1" data-title="平铺">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h2>平铺显示</h2>

<div id="page1Content">

</div>

</div>
</div>
<!-- /page1 -->
							

H5 page2(列表):


<!-- page2 -->
<div data-role="page" data-theme="a" class="jqm-demos" id="page2" data-title="列表">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h2>列表显示</h2>

<div id="page2Content">

</div>

</div>

</div>
<!-- /page2 -->
							

H5 page3(发布):


<!-- page3 -->
<div data-role="page" data-theme="a" class="jqm-demos" id="page3" data-title="发布">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h2>内容发布</h2>

<div id="page3Content">
	
<form id="publishForm">
<input type="text" name="标题" id="title" placeholder="输入标题" value="">
<textarea cols="40" rows="8" name="内容" id="content" placeholder="输入内容"></textarea>
<span>上传图片(PNG / JPG / GIF):</span>
<input type="file" name="图片选择" id="imageSelect" value="">
<input type="hidden" name="图片" id="image" value="">
<span>上传音频(MP3 / M4A / OGG):</span>
<input type="file" name="音频选择" id="audioSelect" value="">
<input type="hidden" name="音频" id="audio" value="">
<span>上传视频(MP4 / WebM / OGG):</span>
<input type="file" name="视频选择" id="videoSelect" value="">
<input type="hidden" name="视频" id="video" value="">
<span>上传附件(任何格式):</span>
<input type="file" name="附件选择" id="attachSelect" value="">
<input type="hidden" name="附件" id="attach" value="">
<a id="submit" href="#" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-star">提交</a>
</form>

</div>
</div>

</div>
<!-- /page3 -->
							

H5 page4:(我)


<!-- page4 -->
<div data-role="page" data-theme="a" class="jqm-demos" id="page4" data-title="我">
<div data-role="content">
<div data-role="collapsible" data-collapsed="false">
<h3>个人信息</h3>
<p>
<div id="qrCode"></div>
<table id="tableUserBrief" class="verTable tablepress tablepress-id-demo-responsive tablepress-responsive-all">
</table>
</p>
</div>
</div>
</div>
<!-- /page4 -->
							

JS 修改APP信息:


//修改APP信息 
var appTitle = 'APP的名字'; 
var appAuthor = '作者的名字'; 
var appAuthorIntro = '作者的个人简介'; 
var appIntro = 'APP简介';
							

JS 个人信息表格:


$(document).on("pagebeforeshow", "#page4", function() {
    userInfoTable('#tableUserBrief', ["用户名", "姓名"]);
});
							

JS 设定页面必须登陆后才能访问:


//以page3为例,可以改成任意一个Page ID。
$(document).on("pageshow", "#page3", function () {
	// checkLogin()返回false表示没有登录,返回true则是已经登录。
    if (checkLogin() == false) {
        denyMsg('此功能要登陆才能用哦。');
    }
});
							

地图和GPS定位:

    

H5


<!-- 地图和GPS定位 -->
<button class="ui-btn ui-shadow ui-corner-all ui-btn-a" id="gpsButton">GPS定位</button>
<div data-role="content" id="allmap" style="height:400px;"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Svio9bXC42PyP9HSv7nyychPOzxD3OsD"></script>
<!-- /地图和GPS定位 -->
							

JS


//点击#gpsButton按钮定位到当前位置。
$("#gpsButton").click(function () {
    getLocation();
});
							

显示单条数据的通用表格:

    

H5


<!-- id必须是唯一的。-->
<!-- 把表格插入到某个page里,例如page2。 -->
<table id="myOneRecordTable" class="verTable tablepress tablepress-id-demo-responsive tablepress-responsive-all"></table>
							

JS


//当显示page的时候读取数据,以page2为例,插入到pageshow的事件里。
//参数说明:
//'#myOneRecordTable' 是表格的id。
//'学生信息' 是数据功能中创建的集合,可以是任何一个集合。
//'{"姓名": "韩梅梅"}' 是查询条件,查找姓名为韩梅梅的记录,如果没有条件就写成'{}',这样查询到的是最后一条记录。
// ["学院", "姓名", "专业", "性别"] 是集合里的字段,可以全部显示,也可以只显示部分。

$(document).on("pageshow", "#page2", function () { //如果JS里已经有page2的pageshow了,就直接插入下面的语句,不要重复写pageshow事件。
	oneRecordTable('#myOneRecordTable', '学生信息', '{"姓名": "韩梅梅"}',  ["学院", "姓名", "专业", "性别"]);
});
							

显示任意集合的通用表格:

    

H5


<!-- id必须是唯一的。-->
<!-- 把表格插入到某个page里,例如page2。 -->
<table id="myTable" class="stripe row-border order-column"></table>
							

JS


//当显示page的时候读取数据,以page2为例,插入到pageshow的事件里。
//参数说明:
//'#myTable' 是表格的id。
//'学生信息' 是数据功能中创建的集合,可以是任何一个集合。
//'{"学院": "信息学院"}' 是查询条件,如果没有条件就写成'{}',这样查询所有记录。
// ["学院", "姓名", "专业", "性别"] 是集合里的字段,可以全部显示,也可以只显示部分。

$(document).on("pageshow", "#page2", function () { //如果JS里已经有page2的pageshow了,就直接插入下面的语句,不要重复写pageshow事件。
	collectionTable('#myTable', '学生信息', '{"学院": "信息学院"}',  ["学院", "姓名", "专业", "性别"]);
});
							

在任意DIV里显示数据库里的任意数据:

    

H5


<!-- 可以在任意page插入一个DIV,但id必须是唯一的。-->
<div id="myDiv"></div>
							

JS


//当显示page的时候读取数据,以page2为例,插入到pageshow的事件里。
//参数说明:
//'#myDiv' 是DIV的id。
//'个人信息' 是数据功能中创建的集合,可以是任何一个集合。
//'{"姓名": "李雷"}' 是查询条件,可以是数据里存在的任何一个属性。
// '专业' 是需要取值的属性,可以是数据里存在的任何一个属性。

$(document).on("pageshow", "#page2", function () { //如果JS里已经有page2的pageshow了,就直接插入下面的语句,不要重复写pageshow事件。
	getDataValue('#myDiv', '个人信息',  '{"姓名": "李雷"}', '专业');
});
							

变换DIV的背景颜色:

    

H5


<button class="colorButton" style="background-color:white" value="white">白色</button> 
<button  class="colorButton" style="background-color:red" value="red">红色</button> 
<button  class="colorButton" style="background-color:green" value="green">绿色</button> 
<button  class="colorButton" style="background-color:yellow" value="yellow">黄色</button> 
<div id="colorDiv" style="height: 400px;">文字内容</div>
							

JS


$(".colorButton").click(
    function () {
        var color = this.value;
        $("#colorDiv").css("background-color", color);
    }
); 
							

通用的数据集合管理器:

    

H5


<!-- id必须是唯一的。-->
<!-- 把表格插入到某个page里,例如page2。 -->
<table id="myManager" class="stripe row-border order-column"></table>

<!-- 以下内容要与H5里的page并列,不能插入到任何一个page里。 -->
<!-- /数据管理器弹出框 -->
<div id="popupTableDialog" data-role="popup" data-overlay-theme="b" data-theme="a" data-dismissible="false" class="popupTable">
<div data-role="header" data-theme="a">
			<h1 id="tablePopupTitle">详情</h1>
		</div>
		<div role="main" class="ui-content">
			<table id="popupTable" class="verTable tablepress tablepress-id-demo-responsive tablepress-responsive-all"></table>
			<a id="popupTableOkButton" href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-rel="back">确定</a>
		</div>
</div>
<!-- /数据管理器弹出框 -->
							

JS


//当显示page的时候读取数据,以page2为例,插入到pageshow的事件里。
//参数说明:
//'#myManager' 是table的id。
//'#popupTable' 是弹出框中数据详情表格的id。
//'#popupTableDialog' 是弹出框的id。
//'学生信息' 是数据功能中创建的集合,可以是任何一个集合。
//'{"学院": "信息学院"}' 是查询条件,如果没有条件就写成'{}',这样查询所有记录。
// ["学院", "姓名", "专业", "性别"] 是集合里的字段,可以全部显示,也可以只显示部分。

$(document).on("pageshow", "#page2", function () { //如果JS里已经有page2的pageshow了,就直接插入下面的语句,不要重复写pageshow事件。
	collectionManager('#myManager', '#popupTable', '#popupTableDialog', '学生信息', '{"学院": "信息学院"}',  ["学院", "姓名", "专业", "性别"]);
});
							

通用的数据插入接口:

    

H5


<!-- 例如用4个输入框接受用户输入,插入到学生信息集合。-->
<input type="text" data-clear-btn="true" data-mini="true" id="myID" value="" placeholder="输入学号">
<input type="text" data-clear-btn="true" data-mini="true" id="myName" value="" placeholder="输入姓名">
<input type="text" data-clear-btn="true" data-mini="true" id="myCollege" value="" placeholder="输入学院">
<input type="text" data-clear-btn="true" data-mini="true" id="myMajor" value="" placeholder="输入专业">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-a" id="newUserButton">插入学生</button>
							

JS


$("#newUserButton").click(function () { //当点击“插入学生”按钮时
	// 可以把一个JSON数据对象保存到任意集合
	// saveData( '学生信息',  '{"学号": "20171170077", "姓名": "莉莉", "学院" : "物理学院",  "专业": "理论物理"}');

	// 从输入框获得用户输入的数据
	var myID = $("#myID").val();
	var myName = $("#myName").val();
	var myCollege = $("#myCollege").val();
	var myMajor = $("#myMajor").val();
	// 保存数据
    saveData('学生信息',  '{"学号": "' + myID + '", "姓名": "' + myName + '", "学院" : "' + myCollege + '",  "专业": "' + myMajor + '"}');
});
							

通用的数据更新接口:

    

H5


<!-- 例如用2个输入框接受用户输入,更新学生信息。-->
<input type="text" data-clear-btn="true" data-mini="true" id="myName" value="" placeholder="输入姓名">
<input type="text" data-clear-btn="true" data-mini="true" id="myMajor" value="" placeholder="输入专业">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-a" id="updateUserButton">更新专业</button>
							

JS


$("#updateUserButton").click(function () { //当点击“更新专业”按钮时
	// 第一个参数是集合,第二个参数是查询的条件,第三个参数是要更新的属性和值,如果属性存在就直接更新,如果不存在则创建这个属性。
	// updateData('学生信息',  '{"姓名": "李雷"}', '{"专业": "理论物理"}');

	// 从输入框获得用户输入的数据
	var myName = $("#myName").val();
	var myMajor = $("#myMajor").val();
	// 更新数据
    updateData('学生信息',  '{"姓名": "' + myName + '"}', '{"专业": "' + myMajor + '"}');
});
							

平铺显示发布的内容:

    

H5


<!-- id必须是唯一的。-->
<!-- 把Div插入到某个page里,例如page1。 -->
<div id="allBlog">我的发布内容</div>
							

JS


$(document).on("pageshow", "#page1", function () { //如果JS里已经有page1的pageshow了,就直接插入下面的语句,不要重复写pageshow事件。
	allBlog('#allBlog');
});
							

列表显示发布的内容:

    

H5


<!-- id必须是唯一的。-->
<!-- 把表格插入到某个page里,例如page2。 -->
<table id="myListTable" class="stripe row-border order-column"></table>
							

JS


//当显示page的时候读取数据,以page2为例,插入到pageshow的事件里。
//参数说明:
//'#myListTable' 是表格的id。
//'blog' 是数据库中保存发布内容的集合。
//'{}' 是查询条件,查询所有记录。
// ["标题", "内容", "作者"] 是集合里的属性(字段/列)。

$(document).on("pageshow", "#page2", function () { //如果JS里已经有page2的pageshow了,就直接插入下面的语句,不要重复写pageshow事件。
	collectionTable('#myListTable', 'blog', '{}',  ["标题", "内容", "作者"]);
});
							

实验列表

实验1:page切换和基础事件

实验2:静态数据显示

实验3:动态数据显示

实验4:简单的CMS

实验5:地图和GPS定位

实验6:拍照(Android)

实验7:录音(Android)

实验8:录像(Android)

实验9:录音/录像/拍照(iOS / Android)

作业上传

文件列表

个人信息

姓名 学号 性别 院系 专业

周次 日期 内容 形式 平台 课时

更新日期

集合:

JSON:

条件:

数据:

条件:

JSON:

条件:

操作 序号 简称 状态 开始时间 结束时间
操作 摘要 获得EXP 描述 时间 备注

个人信息

姓名 学号 性别 院系 专业
返回

关于

云南大学慕课教改项目团队开发

 

©2016 云南大学信息技术中心

返回
序号 简称 全称 类型 要求 状态 开始时间 结束时间

内容

返回

标题

内容

取消

提示标题

提示内容

确定