2015年10月1日至10月25日，两个本科生和一位研究生以及一位老师组成四人团队，开发某教育前端项目

所遇问题总结以及分享：

一、主要应用软件：sublime_text HBuilder

初学者可以在JQuery mobile的Demo中寻找代码（可以看图找代码仿写）

1.回退按钮设置： <a href="javascript:history.back(-1);" style="background:none;box-shadow:none;border:none;" data-ajax="false"><img src="img/arrow.png" id="img_arrow"></a>

效果图：

加上style的属性即可，去掉加载图片的背景颜色,前提是PS时将图片设置成透明背景

遇到分隔线的情况：

可以类似，使用两个div去分隔开，比使用margin-top或直接加入图片的方法更为简单

<div class="ui-grid-c" >
<div class="ui-block-a"><span></span>
<br><span >超越全校学生</span></div>
<div class="ui-block-b"><span></span>
<br><span >超越全市学生</span></div>
<div class="ui-block-c"><span ></span>
<br><span></span></div>
<div class="ui-block-d"><span> </span>
<br><span></span></div>
</div>

2.文字缩放问题：</html>之后加上
加上jQuery.fontFlex.js文件
头部加上：
<script src="js/jQuery.fontFlex.js"></script>

</html>之后加上 :
<script type="text/javascript">
$(function() {
// All elements
$('body').fontFlex(10, 18, 30);
$('#img_arrow').fontFlex(10 , 30, 70);
// H1 only
$('h1').fontFlex(15, 40, 60); });
</script>

加上javascript的脚本即可解决文字随浏览器大小自动改变

3.ExamCompare中绘图多次渲染解决方案
网址：
http://www.4byte.cn/question/455962/android-webview-html5-canvas-error.html

4.页面跳转问题加上data-ajax="false"
<a href="javascript:history.back(-1);" style="background:none;box-shadow:none;border:none;" data-ajax="false">
网址：
http://zhidao.baidu.com/link?url=GgSKh384-vVFvUDrL3UlPiL7OmVdLo5rOAQBwiyzabn4WhtogYFoNRHTMbrdcak_qFO6izpYADo5D9_DalxWP7RHy5Qr2Uqbf5mnaB7Lujy

页面跳转时应该加上data-ajax="false"，否则计算机上浏览器可以完美返回，到手机端着无法实现返回功能

5.alert在手机中改为无法被识别必须改为confirmJQM
JS文件夹中加入JQuery.Alert.js文件
<head>中加上：
<script src="js/JQuery.Alert.js"></script>

附件为用jquery写的提示框代码，请将此JS文件放入到js文件夹，并在head部分声明引用。
其后即可将每个javascript中出现的alert 替换为confirmJQM即可。

alert只能在计算机中实现，到在手机端中必须将alert改为confirmJQM

WebApp的前端所遇问题的更多相关文章

  1. webapp项目前端总结

    提纲 整体把握,从设计稿入手——技术选型 并行开发,从实现静态页面开始 前端自动化 前端js逻辑 前后端集成 小问题集合 总结 1.整体把握,从设计稿入手 —— 技术选型 新项目到手,算是运气好,设计 ...

  2. 前端--再遇jQuery

    一.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回第一个属性) attr(属性名|属性值) --一个参数是获取属性的值,两个参数是设置属性值 --点击图片加载示例 removeAttr(属 ...

  3. WebAPP移动前端性能优化规范和设计指导

  4. 【大前端之前后分离01】JS前端渲染VS服务器端渲染

    前言 之前看了一篇文章:@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离,文中论述了为何要前后分离,站在前端的角度来看,是很有必要的:但是如何说服团队使用前端渲染方案却是一个现 ...

  5. 安卓app开发方式之webApp

    1.phonegap: 专注于webapp调用native的功能.2.ionic: 专注于webapp的前端ui技术,需要与phonegap(准确的说是和Cordova配合使用).ionic是一个专注 ...

  6. 使用express， create-react-app， mongodb搭建react模拟数据开发环境

    提要 最近刚刚完成了一个vue的项目,其中涉及的用户数有6000多个以及其他数据也比较多,为了在前端能够真实的进行数据模拟,所有把全量数据拷贝下来放到了api.json中.这样导致整个api.json ...

  7. Java钉钉开发_02_免登授权（身份验证）（附源码）

    源码已上传GitHub: https://github.com/shirayner/DingTalk_Demo 一.本节要点 1.免登授权的流程 (1)签名校验 (2)获取code,并传到后台 (3) ...

  8. 大型NodeJS项目架构与优化

    使用场景: proxy(API冗余,跨域) vue ssr(服务端渲染) socket(大并发,通讯) 区块链(创业公司,新兴行业) 讨论什么? NodeJS异步IO原理及优化方案 NodeJS内存管 ...

  9. Spring+Hibernate+struts2+JPA 注解+跨域//完成手机端点击加载更多 下拉加载更多

    一.使用IDEA新建一个maven项目(student) 1.1.0编写pom文件,添加项目所需要的包 <?xml version="1.0" encoding=" ...

随机推荐

  1. Linux学习笔记（一）2015.4.13

    研究生由单片机转Linux学习 首先安装VMware虚拟机,用的是VMware 10.0 在VMware 10.0上安装视频上推荐的Red Hat Linux 5 安装后正式进入Linux学习 笔记1 ...

  2. Python标准库：内置函数hasattr(object, name)

    Python标准库:内置函数hasattr(object, name) 本函数是用来判断对象object的属性(name表示)是否存在.如果属性(name表示)存在,则返回True,否则返回False ...

  3. 开源License

    http://www.open-open.com/bbs/view/1319816219625 http://my.oschina.net/yangsheng/blog/190917

  4. WebAPI文件上传与下载

    http://www.cnblogs.com/GarsonZhang/p/5511427.html https://github.com/GarsonZhang/FileUpLoadAPI

  5. Autofac IContainer 测试

    using Autofac; using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  6. phpstorm webstorm安装主题 sublime样 还有都可以用的注册码

    注册码 webstorm phpstorm 基本所有版本通吃  webstrom9.0.3 通过 phpstorm 8.0.1 User Name: EMBRACE License Key: ==== ...

  7. RabbitMQ service is already present - only updating service parameters

    如果你安装RabbitMQ不是那么一番顺利..那么你有可能会重装多次.. So..问题来了..重装时你执行   rabbitmq-service install  的时候..有可能就会报这个错了.. ...

  8. CentOS7 mono环境连接WCF

    总结下在mono环境中使用Wcf出现的问题以帮助你快速解决问题. 1.昨天在内网Centos7下部署由Windows上开发完成的ASP.NET Mvc4项目,部署到mono环境下遇到了无法找到endp ...

  9. iOS- storyboard this class is not key value coding-compliant for the key xxx

    如图: 在使用storyboard的时候出现此问题,主要是因为给storybroad中的view拖线的时候,有时不小心线拖错了,或者再次拖线导致代码中控件的名字与之前拖线时定义的名字不同导致的. 解决 ...

  10. WAMP启动失败简单解决方法

    一般情况下,直接选择安装,突然出现问题了:提示:msvcp110.dll或msvcr110.dll问题, 那么你直接复制这个来百度就行. 在百度会提示让你一键安装并且修复的. 或者你可能会看网上其他教 ...