一个挺简单的纯前端的面包订购系统，此订购系统，不是完全的纯自己写的，大体框架都是书本上的一个订购系统的例子，只是在原有代码的基础上的修修改改。虽不完全是自己写的，但算也是体验了一次把html5打包成apk，在手机上展示的过程。html打包成apk用的是Hbuilder软件，挺方便的的。
附上本次课设的代码和apk以及录屏展示：
链接：https://pan.baidu.com/s/1mmwtazGNdc3nOEWvHITGTQ
提取码：q44y
面包系统界面图：
![]()
本来是没有写这篇文章的必要，但是遇到了一些问题，就在这里做做笔记。
不同html文件的页面跳转
第一个主要是关于JQuery Mobile跳转页面后css和js的加载问题。
在JQuery Mobile中，页面跳转时默认使用ajax跳转，而页面跳转时默认使用ajax跳转时，只会把在中也内容加载，而之外的代码及文件则不会加载，以致外的js和css失效。
举个栗子： 从某个页面跳转到下面这个页面 ， 下面的page之外css和script将不会被加载。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<head>
<meta>...</meta>
<link>...</link>
<script>...</script>
<style type="text/css">
</style>
</head>
<body>
<div id="#####" data-role="page">
</div>
</body>
</html>
|
最简单的解决办法：
1.标签中使用data-ajax=”false”来禁用页面默认的ajax跳转或者rel=”external” ，从而使用默认的请来求方法请求页面。
2.另外的办法：我们可以设置一个全局的禁止ajax方式的跳转，代码：
1
2
3
|
$（document）.on("mobileinit",function(){
$.mobile.ajaxEnabled=false;
})；
|
若使用此法，需要将此代码片段放在你引入的JQuery Mobile的js文件之前（初始化的设置都需放入此处）
3.将b页面需要用到的css以及js放在div内(不建议)
同一HTML文件跳转到另一页面问题
举个栗子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
//点击跳转到百度地图api调用的页面
<script type="text/javascript">
function getmap(longitude,latitude){
$.mobile.changePage($("#second"), {transition: 'pop', role: 'dialog' });
mapdiv=document.getElementById("allmap")
mapdiv.style.width = '500px';
mapdiv.style.height = '500px';
map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(118.089351,24.460571),13);
//map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.clearOverlays();
var new_point = new BMap.Point(longitude,latitude);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
var opts = {
width : 100, // 信息窗口宽度
height: 50, // 信息窗口高度
title : "Shop is here" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("Welcome to you", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
}
</script>
// 地图的显示区域
<div id="allmap" style="width=500px；height=500px;" ></div>
|
![]()
按我的理解 id=”allmap”的div都高度和宽度都已经赋值了，为什么还要我mapdiv=document.getElementById("allmap") 重新赋值一下，才会显示地图，我现在还是不太理解。
另外一个栗子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//跳转到支付页面
function getpayment(){
$.mobile.changePage($("#second"), {transition: 'pop' , role: 'dialog'});
mapdiv=document.getElementById("images")
mapdiv.style.width = '360px';
mapdiv.style.height = '363px';
if($("#payment").size()<=0){
var imgHTM="<img src='images/payment.png' id='payment' style='width:360px ;height:360px;'>" ;
$("#images").append(imgHTM);
}
}
//图片的显示区域
<div id="images" ></div>
|
为什么div的宽和高，还有div中加入一张图片都要js动态赋值和添加才可以显示图片。很疑惑？
感觉还是自己太菜了，才搞不懂，继续努力。
参考文章：
百度地图JavaScript API开发手册：http://lbsyun.baidu.com/index.php?title=jspopular/guide/helloworld
轻松构造APP与引动网站：https://book.douban.com/subject/26330396/
JQuery Mobile跳转页面后css和js失效:https://blog.csdn.net/rosemarrytop/article/details/52770930
FROM :blog.cfyqy.com | Author:cfyqy
评论