图片的缩放，实现简单电子地图功能

jouky 2003-10-19 01:09:31
我现在想用bmp或jpg的图片来做简单电子地图，想知道怎样方便的实现放大，缩小及拖动的功能，图片上加的其它控件元件(按钮等)在图片缩放时怎样处理呢？
哪位有相关的经验吗？指点思路或代码吗？我的邮箱heshao2000@sina.com
多谢,多谢
...全文
96 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhxfzhxf1 2003-10-23
  • 打赏
  • 举报
 回复
使用MAPX控件
网上搜索呀！
jpyc 2003-10-23
  • 打赏
  • 举报
 回复
http://expert.csdn.net/Expert/topic/2155/2155919.xml?temp=.1921656
jouky 2003-10-22
  • 打赏
  • 举报
 回复
哪有免费Mapx控件下载呢？
hwyang80 2003-10-19
  • 打赏
  • 举报
 回复
怎么不试一试MAPX控件

那就方便多拉!
pankun 2003-10-19
  • 打赏
  • 举报
 回复
嗯,多看些例子吧..
huojiehai 2003-10-19
  • 打赏
  • 举报
 回复
看看delphi安装目录下的帮助

C:\Program Files\Borland\Delphi5\Help\Examples\Jpeg
C:\Program Files\Borland\Delphi7\Help\Examples\Jpeg
C:\Program Files\Borland\Delphi9\Help\Examples\Jpeg

不过这些例子简单了些,看看也有好处
电子地图标注软件 v6.4.zip
电子地图标注软件是一款专门为用户设计在电脑上进行地点查询的实用型工具。软件功能强大，可以搜索地图上本来有的位置和标注的位置，并支持电脑在线（离线）地图查看浏览，还支持无人机航拍地图导入。软件界面美观简洁、简单全面、实用方便，无需培训，即可快速上手，轻轻松松完成日常地点查询功能，真正做到简单全面实用。是用户实现地点查询功能的好帮手。 电子地图标注软件功能 1.支持谷歌在线（离线）混合地图，在软件界面上可以选择切换； 2.支持1-20级的地图随意缩放，鼠标右键拖动漫游。 3.支持下载图片格式选择，包括Jpg，Png，Gif，Bmp。 4.支持名称查询定位，可以输入地点名称后定位到所查询的位置。 5.支持坐标查询定位，可以输入坐标数值后定位的所查询的位置。 6.支持用户自定义的信息，信息查询，查询结果实时定位。 7.支持在地图上所选择的标注能点击查看详细信息。 8.支持添加地图标记，距离测量显示，地点名称显示。 9.支持保存您当前操作的文件，供日后打开再用，保证操作不会丢失。 10.支持全球地图操作预览。 11.支持添加自定义标识图标，用户可以更换图标。  电子地图标注软件 v6.4更新 更新了有时候无法打开地图的问题 更新了可以添加自定义图标 新增批量导入功能 新增地标显示 鼠标移动标注 增加皮肤 图标自动缩放 支持gps卫星定位 支持微软地图 电子地图标注软件软件截图
JQuery&CSS;&CSS;+DIV实例大全.rar
一、J Query实例大全 1)AjaxJavaScript资源 1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越火线游戏网 8.JS经典3款风格QQ客服在线浮动右侧与左侧代码 9.JS精简网页音乐播放器 浮动在页面顶部像工具栏 10.超强JS网页版泡泡龙游戏下载 11.兼容各浏览器JS+CSS水平和垂直无缝图片滚动效果代码 12.漂亮暖色调js+flash平滑过渡大屏图片切换的广告代码 13.实用国外JS内容选项卡DEMO下载 14.推荐通用文字图片JS不间断滚动封装类 代替Marquee 15.站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2.jQuery层拖拽插件之jquery仿QQ空间的模块拖动功能插件下载 3.jQuery动感图标切换网页Tab选项卡导航代码 4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 6.jquery制作自动播放的TAB切换特效 7.基于jQuery简单的Tab滑动门菜单代码(jQuery MoveTab) 8.简单jquery选项卡插件下载(支持鼠标移上切换、点击切换、Ajax方式切换等) 9.漂亮Tab插件之jQuery自动切换轮播Tab选项卡示例代码 10.实用jquery+CSS实现流畅tab切换效果(Coda-Slider 1.1.1)插件 11.实用jquery标签Tab插件下载可切换不同的颜色 12.推荐jquery仿淘宝网商品排行榜展示切换效果,适合电子商务网站使用 13.一款jQuery黑金钢动感Tab选项卡代码 14.站长推荐jQuery动画翻转选项卡(flip风格) 3)表单验证 1.jquery+css美化select下拉菜单插件(Stylish Select v0.3)下载 2.jQuery+CSS实现多项选择文本框的插件下载 3.jQuery表单验证插件EasyValidator 2.0带TIP提示效果 4.jQuery导航插件下载之支持三级的Menu暖色、动画、折叠功能的导航菜单 5.jquery美化CheckBox的插件下载 6.jQuery美化表单漂亮插件jqtransform下载 7.jquery强大表单字符输入限制插件jQuery AlphaNumeric下载 8.jQuery实现表格带排序功能的源码 9.jquery实现动感隐藏登录入口代码 10.jQuery限制input或texteara字符输入限制字数控制插件下载 11.jQuery支持三级菜单的超酷华丽炫彩动感多级渐显菜单下载 12.jQuery制作登录按钮实现Ajax带状态提示 13.jvalidate无刷新表单验证插件示例下载 14.分享jquery无刷新多功能表单验证插件并漂亮美化表单及错误输入提示效果 15.简单jQuery+CSS实现验证表单红色提示效果 16.简单表单input输入框提示插件1.0下载 17.另种效果的jQuery EasyValidator表单验证插件demo示例下载 18.漂亮绿色多级动感仿flash效果的jquery网站导航菜单 19.实用jQuery列表多项选择插件 20.实用jquery实现鼠标滚轮控制改变文本框数字的插件 21.实用jquery使用ul模拟表单select列表效果 22.实用jQuery无限级导航菜单源码下载 23.适合于网站注册的jQuery用户注册条款插件下载(带特效) 24.提升用户体验jquery Ajax表单输入检测验证示例代码 25.推荐jQuery美化Select下拉单选框模拟插件V1.3.6版本下载 26.推荐jQuery美化select下拉框样式漂亮效果 27.下载jQuery网页表单美化修饰插件(jQtransForm美化表单) 28.一款jquery实现表单输入提示的Autobox插件(基于jquery.ui) 29.一款美化表单下拉列表、复选框等的jquery combobox插件实例 30.站长必备jquery实现combox自动筛选,高亮显示功能 4)菜单 1.jquery+CSS超炫丽横向多级滑动导航菜单 2.jQuery+CSS漂亮蓝色三级菜单下载 3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮精致的多级导航栏菜单插件代码示例 8.jQuery+ul实现漂亮竖直下拉菜单 9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑菜单效果 13.jquery黑色循环滚动菜单特效插件下载 14.jquery灰色简洁风格横向三级网站导航菜单 15.jquery简洁动感支持三级的黑色导航菜单 16.jquery类似TAB一样的动感菜单下载 17.jquery绿色动感滑动下拉多级导航菜单代码下载 18.jQuery美化复选框Checkbox和radio单选框的插件hcheckbox示例 19.jQuery漂亮Flash卡通动感菜单示例 20.jQuery漂亮动感二级网站导航菜单源码下载 21.jquery漂亮苹果系统动画效果的导航菜单示例 22.jquery平滑效果黑色横向与纵向多级下拉菜单插件(支持5级) 23.jquery实现的动感菜单导航条源码 24.jquery实用滚动下拉菜单代码 25.jquery鼠标移动出现下拉菜单及提示特效代码 26.jquery外国滚动型多级展开菜单插件(jGlideMenu)下载 27.jquery自由滚动切换 标签式导航菜单示例 28.博客Blog横向jquery动态滑动菜单插件示例 29.打包50种实例的大型树形菜单控件JSTree(基于jQuery)下载 30.打包两款实用jquery+div横向滑动的下滑菜单代码(兼容性好)下载 31.非常帅jquery仿雅虎网超大菜单导航代码 32.分享jquery带阴影效果折叠菜单dropdown给大家 33.分享下载jquery+Css黑色风格版的手风琴菜单,带动感效果 34.分享一款jquery收缩展开的多级导航(附带手风琴效果示例) 35.国外漂亮动感jquery三级导航菜单插件(横向自动展开)下载 36.基于jquery美化表单效果的插件 37.兼容性好的jquery+div漂亮黑色动感下拉菜单 38.简单jquery背景滑动菜单插件示例 39.经典jQuery三级省、市、县级联菜单下载 40.漂亮jQuery+CSS橙黄色两级导航菜单示例下载 41.漂亮jQuery+CSS竖直菜单下拉展开菜单(手风琴)动画缓冲效果 42.漂亮jQuery四级滑出菜单插件带动画效果适合大多数网站 43.漂亮绿色jquery下拉菜单导航条源码下载 44.漂亮实用jquery绿色风格水平二级导航菜单 45.适合后台的jquery二级下滑菜单带展开与合拢功能 46.树形菜单jquery.popup支持文本框弹出层选择项插件 47.通用性强的jquery带箭头跟随的垂直菜单组(jquery vmenu)插件下载 48.推荐jQuery黑色多级横向菜单导航(带动画效果) 49.学习jQuery简单伸缩菜单代码实例 50.一款jquery仿flash滑动左侧菜单插件代码下载 51.一款jQuery实现伸缩型菜单源码下载 52.一款jQuery制作仿FLASH动感导航菜单效果(附PSD) 53.又一款jquery蓝色经典的三级动画网站菜单 54.又一款黑色风格jQuery支持多级的动感下拉菜单源码 55.增加用户体验之jQuery黑色下拉菜单插件下载 56.站长必备jQuery横向动感菜单代码下载 57.站长必备jQuery可展开与折叠的竖向手风琴内容展示菜单 58.支持3级的jquery天蓝色动画菜单下载,适合艺术类、儿童类网站使用 5)对话框 1.jquery仿div透明模态弹出窗插件下载 2.jquery实现多风格消息弹出框插件jGrowl下载 3.jQuery弹出层插件PopupDiv-v1.0下载(支持ajax、居中等效果) 4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery实现的多功能弹出窗插件weebox及示例代码 9.一款支持拖拽的jQuery层弹出窗口(TipsWindown1.0版本)下载 10.分享一款jquery Ajax弹出对话框插件SimpleModal 11.下载jQuery对话框Dialog弹出层插件演示与使用说明 12.实用jQuery漂亮浮动层插件,精美Dialog代码 13.带关闭按钮jquery+div消息弹出层代码例子 14.推荐jQuery+CSS实现图片放大浮动层带关闭按钮 15.通用jQuery对话框dialog或popup弹出层或提示窗口插件下载 6)工具提示 1.jquery+div随屏幕滚动特效(支持设置参数滚动) 2.jQuery字符插件之适合留言板的jquery文本框输入字符限制插件下载 3.jquery实现Tooltip提示(文字、链接、地图锚点),自带5种不同样式 4.jQuery实现支付宝隐藏层提示信息内容的功能 5.jquery实现鼠标划过网址名称显示网站截图功能 6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡提示效果的插件 8.又一款jquery实现链接Tip演示下载 9.常用jQuery弹出式链接提示效果Tooltip源码下载 10.相当牛的jQuery动感TipBox,鼠标移上去会动的提示框哦 11.简单实用jQuery用于登录弹出层例子代码(带动画的弹出层) 12.综合jquery实现表格隔行换色和鼠标经过提示效果源码 7)日历插件 1.jQuery简洁漂亮点阵数字时钟显示日期的插件 2.一款简单jQuery日历选择器代码 3.基于jquery实现倒计时钟插件下载,Flip-Down Clock特效效果 4.基于jquery实现多功能日历插件(weekcalendar)1.2版本下载 5.实用漂亮jQuery网页日历插件datePicker下载 6.简洁实用jquery日期选择插件之jQuery datePicker下载 8)图片展示 1.2款jQuery图片自动切换常用广告代码 2.jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3.jQuery+CSS实用图片收缩与放大效果插件 4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿flash产品图片多角度展示特效代码 8.jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9.jquery仿flash的图片幻灯片播放特效实例完整版 10.jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11.jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12.jQuery仿动感flash自动滚动图片切换广告插件 13.jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14.jquery仿苏宁易购商城产品图片全方位展示功能 15.jquery制作漂亮按钮示例打包 16.jQuery动态切换网页背景的大块图片的导航栏代码 17.jquery图文排行混合互相切换效果(仿Vancl效果) 18.jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19.jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20.jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21.jquery定时自动切换banner广告图片动画插件示例 22.jquery实现LightBox图片点击放大效果的图片盒子插件 23.jQuery实现slider图片滚动,单个滚动，成组滚动示例 24.jQuery实现产品图片循坏旋转的代码 25.jQuery实现动态图文分组排序切换源码 26.jQuery实现图片3D旋转特效插件 v1.1版本下载 27.jQuery实现图片3D立体感的前后轮番展示特效 28.jQuery实现图片取景器仿相机拍照功能的插件photoShoot 29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33.jQuery实现鼠标移到链接提示显示图片功能插件 34.jquery实现鼠标经过链接放大图片特效代码 35.jquery实用Banner大图片横向切换效果 36.jquery实用产品图片展示动感切换效果源码 37.jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38.jquery异步加载图片的插件jqGalScroll下载 39.jquery微型相册插件Micro Image Gallery下载 40.jQuery把图片放大及变亮特效插件下载 41.jquery拖动滚动条控制图片滚动及图片放大特效的示例 42.jquery旋转式图片切换并带图片放大功能 43.jQuery漂亮网页右上角双层撕角广告代码 44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45.jQuery演示Ajax加载并显示图片的相片画廊实例 46.jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) 47.jquery版自动滚动图片动画特效插件可处理图片JSON数据源 48.jQuery电子商务网站产品展示插件之仿苏宁易购商城产品图展示特效 49.jquery相册播放器插件实现无序图片列表转换成有序并播放 50.jQuery移动网页背景图浮云流水特效 51.jquery简单控制上下、左右四方向滚动的特效插件下载 52.jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53.jquery网站顶部滑动广告插件 54.jquery自动播放图片滚动漂浮式效果的示例 55.jquery贴图旋转及缩放插件下载 56.jquery门户网站首页全屏弹性伸缩至小屏的广告代码(非常实用) 57.jQuery黑色动感Ajax无刷新动态分组图片效果代码 58.jquery黑色风格左右带箭头的图片浏览控制插件下载 59.jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60.jQuery鼠标移上小图显示大缩略图功能 61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62.Supersized jQuery全屏相册图片自动切换插件 63.[荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64.[荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65.一款jQuery仿flash放大图片的相册插件 66.一款jQuery仿苹果mac os系统经典菜单效果源码 67.一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68.一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69.一款jquery实现图片放大插件imgBox下载 70.一款jQuery实现漂亮精美相册插件源码 71.一款jQuery左右箭头控制大图滚动切换的代码 72.一款jquery常用产品图片放大效果插件下载 73.一款jQuery插件slide幻灯片切换图片宽高自适应 74.一款jQuery漂亮淡出淡入焦点大图切换源码 75.一款jquery缩略图商品切换放大展示功能插件 76.一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery定时图片切换代码下载 78.一款实用经典jQuery图片切换展示插件下载 79.下载jQuery动感广告图片翻转插件(PictureRoll)示例版 80.下载JQuery淡入淡出效果插件InnerFade 81.下载jquery走马灯效果图片连续滚动的实例 82.几种简单实用jQuery焦点图片自动切换效果 83.分享jquery仿LightBox动感多样式图片放大插件zoomimage下载 84.分享jquery仿当当网店铺图片轮番切换(同时显示图片说明)代码下载 85.分享一款jQuery thumbnail惟美的图片Tip提示效果 86.分享一款jquery仿lightbox无刷新图片显示插件PrettyPhoto下载 87.分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88.动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89.参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90.又一款jquery自动轮播焦点图+内容的广告代码 91.又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92.基于jQuery带时间轴宽屏图片切换源码 93.基于jQuery的横向无缝图片滚动插件jcarousel 94.实用jquery焦点图源码2 95.常用jQuery新闻焦点图片切换效果插件 96.强大jQuery实现3D文字三维旋转效果代码下载 97.很帅的jquery焦点图切换源码可用于产品大图展示 98.很帅的jQuery鼠标移动预览图展示+简介内容展示特效代码 99.打包jQuery实用3个焦点图切换自动切换特效的代码 100.打包jquery拖动条拖动图片缩略图及放大图片效果插件(翻版thickbox插件) 101.打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102.推荐jquery仿Flash大banner图片切换播放特效,非常完美 103.推荐jQuery仿新浪QQ绝好图片轮播效果带左右控制插件 104.推荐jQuery兼容所有浏览器的自定义多样式图片幻灯片插件(KinSlideshow)下载 105.推荐jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大 106.推荐jQuery实用缩略图广告效果插件下载 107.推荐jQuery模拟Windows视窗的效果实现相册图片拖动特效插件 108.推荐jQuery网站首页三幅banner切换大图广告自动滚动代码下载 109.推荐jQuery购物类产品图片放大插件jqzoom v2.0下载 110.推荐实用jquery图片截取代码下载 111.站长推荐jQuery产品展示专用的图片幻灯+缩略图、左右控制按钮实例下载 112.站长推荐一款非常精美的jQuery 1.4漂亮相册程序打包给大家 113.站长素材推荐jQuery带箭头控制左右图片滚动效果 114.第二款jQuery左右移动图片+内容展示插件代码 115.简单jQuery实现产品图片自动左右滚动插件下载 116.编辑推荐jQuery超帅模拟图片翻页的展示Flash特效效果 117.适合网站内容推广淡入淡出特效的jQuery焦点图结合文字导航切换特效(很精美) 118.非常不错jQuery放大镜实例包下载(可放大图片与区域放大的AnythingZoomer插件) 119.非常不错jQuery网页内容图片分类插件带特效 120.非常实用的jquery幻灯切换广告源码 121.非常帅的jQeruy图片切换拖影变清淅的神奇特效 122.非常漂亮jQuery左右切换三屏大幅焦点图广告代码下载 二、CSS + DIV 1)CSS网页模版 1.一款DIV绿色效果网页模板 2.一款浅蓝色DIV+CSS企业软件宣传全站模板 3.一款深蓝色DIV商务网页模板 4.一款潮流前线CSS网页模板 5.一款简洁漂亮棕褐色网页模板(DIV+CSS实现) 6.一款纯DIV+CSS商店模板下载 7.一款纯DIV+CSS灰色风格的网页模板 8.个性网页模板之用花装饰的DIV网站模板打包 9.公司类模板下载之专业公司DIV+CSS网页模板 10.公司类网页模板推荐大气的公司CSS模板下载 11.博客模板下载之DIV+CSS实现纸张效果博客模板 12.博客模板下载之灰色blog模板 13.商业模板下载之纯DIV+CSS制作深褐色商务网页模板 14.圣诞节日网页模板之欢乐圣诞纯DIV网站模板下载 15.圣诞节模板下载之圣诞礼物CSS网页模板 16.室内装饰类企业网页模板下载 17.工程类公司DIV网页模板源码下载 18.整套完整版纯DIV+CSS律师事务所类整站全套模板 19.深蓝色DIV公司类网页模板下载 20.深蓝色网页模板整理2 21.漂亮HTML网页模板纯DIV编写 22.漂亮模板推荐之水鸭色DIV+CSS网页模板 23.漂亮纯DIV+CSS绿色风格网页模板 24.漂亮网页模板下载之DIV+CSS木质性网站模板 25.漂亮英文DIV+CSS餐厅网站模板源码 26.简单纯DIV橙色网页模板 27.纯DIV+CSS制作的黑绿风格植物类网站模板 28.纯绿色博客类DIV网页模板 29.经典黑色DIV公司网页模板 30.绿色清新效果DIV网页模板 31.网页博客模板下载之DIV+CSS黄色博客模板 32.适合旅游类DIV+CSS网站模板源码 2)DIV+CSS实例 1.CSS导航菜单之颜色淡绿色水平导航菜单源码 2.CSS橙色一级导航菜单示例 3.CSS绿色网站导航菜单 4.css菜单系列之纯CSS灰色下拉菜单源码 5.css菜单系列之纯CSS黄色垂直左栏导航菜单 6.DIV仿支付宝导航菜单实例 7.jQuery+CSS实现蓝色垂直导航菜单带提示效果 8.jQuery实现车门滑动效果菜单源码，很帅哦 9.Jquery经典插件收集 10.使用jquery实现清新蓝色CSS二级菜单 11.兼容IEFF浏览器不规则TAB选项卡源码 12.实用网站快速导航CSS按钮菜单源码(漂亮CSS导航按钮菜单) 13.强烈推荐一款jQuery+CSS仿iPhone手机面板导航效果源码 14.推荐实用OA系统左侧DIV+CSS菜单源码(漂亮OA界面菜单源码下载) 15.推荐实用的jQuery+CSS水平二级导航菜单源码(黑蓝效果) 16.政府类网站支持二级纯CSS导航菜单源码 17.漂亮CSS小图标mini导航效果 18.漂亮滑动透明效果CSS水平导航菜单源码 19.简单实用CSS蓝色垂直导航菜单(UL、LI结合实现) 20.简单实用亮黑色纯CSS水平导航菜单 21.纯CSS+图片实现橙色网站水平菜单实例 22.纯CSS实现棕黄色水平导航菜单源码 23.纯CSS实现水平梯形CSS导航菜单(很简单) 24.纯CSS实现蓝色圆角水平网站导航菜单 25.纯CSS实现黑色水平CSS导航菜单源码 26.纯CSS菜单系列之橙色块状水平导航类CSS菜单 27.纯DIV+CSS灰色网站导航菜单 自适应长度菜单背景 28.非常漂亮2010猪八戒网站导航菜单源码
网趣网上购物系统时尚版V13.0
一、支持商品批量增加、批量修改功能，所有商品可一次修改完成，特别方便！ 　　二、支持7种在线支付：北京网银、NPS、快钱、贝宝、云网、支付宝、财付通接口。 　　三、率先支持Excel批量导入商品功能，下载Excel模板批量添加商品一次完成！ 　　四、删除商品的同时，可以自动删除商品图片，大大节约空间! 　　五、可以选择修改商品时上传图片是否覆盖原有图片，节约宝贵的空间! 　　六、率先支持商品图片水印设置，彰显网站的独特风格！ 　　七、支持商品三级分类设置，分类划分更明细：大类->小类->子类->商品 　　八、免运费设置。支持购物满一定金额免运费设置功能！ 　　九、支持商品优惠券功能，输入优惠券后可以减免相应金额的货款！ 　　十、全新的客服Q浮动菜单，速度更快、准确显示用户状态！ 　　十一、支持无刷新验证码变换功能，全屏幕设计，6套模板自由切换！ 　　十二、新订单邮件自动通知功能！新用户注册自动发送邮件功能！ 　　十三、支持商品排序浏览，可以按价格高低、浏览量、添加时间进行排序显示。 　　十四、新增商品对比功能！可任意选择4款商品横向排开，一次性对比，更直观！ 　　十五、购物车同比推荐功能，商城帮助中心栏目无限量扩充功能！ 　　十六、新增Google SiteMaps地图生成功能，更快、更方便Google 的收录！ 　　十七、完美整合BBS论坛程序，商城、论坛用户帐号一站式通用。 　　十八、诸多智能开关选项，全后台操作，前台支持订单查询功能！ 　　十九、新闻、资讯无限级分类；新增商品上、下架管理。 　　二十、具有强大的商品关键词、站点关键词设置功能，SEO优化一步到位。 　　二一、强大的权限分类管理功能，可设置不同管理级别的管理员进行网站管理 　　二二、强大的广告管理，支持FLASH动态切换广告，支持全站飘浮广告设置 　　二三、支持站内短消息互发，支持商品图片的大小设置、匿名购物功能。 　　二四、后台管理一目了然，界面清新，独有管理员应急密码恢复功能！ 　　二五、商品具有排序功能；支持支付宝即时到帐功能和普通交易2种方式 　　二六、商品大图支持缩放功能，具有强大的站点访问统计功能。 　　二七、强大的商城报价中心功能，可以快速浏览商品价格。 　　二八、支持管理员登陆日志，可以对非法登陆的信息一一记录。 　　二九、多元化展示，支持商品尺码、商品颜色的选择，适合各行业。 　　三十、支持商品订单后期支付，下完订单无立即支付也可进行再次付款。 　　三一、支持商品订单发货单号功能，支持商品缺货管理功能。 　　三二、支持积分兑换、商品评论及推荐、投票等常用功能。 　　三三、支持最近浏览商品功能，同一商品不同尺码/颜色可分别放入购物车。 　　三四、强大的SEO优化，支持大、小、子分类关键词及描述设置 　　三五、支持积分兑换、商品评论及推荐、投票等常用功能。 　　三六、报价中心鼠标指向商品显示商品图片功能。增加普通会员VIP在线申请。 　　三七、支持批量购买功能，可选择一次性购买商品的数量提交到购物车。 　　三八、支持单IP、IP段访问限制功能，支持网站开关闭，限制不法用户的行为。 　　三九、支持滚动与静止式新闻显示，支持伸缩与展开式分类菜单。 　　四十、订单后期修改功能。支持修改订单中的商品价格、数量功能功能！ 　　四一、网站资料防复制功能!杜绝辛苦添加的数据轻易被别人复制! 　　四二、网站商品搜索关键词登记，方便查询哪些商品更容易吸引客户! 　　四三、导航条魔幻菜单功能，支持文字式和图片式自由选择效果！ 　　四四、支持商品复制功能，可以快速添加或修改参数类似的商品！ 　　四五、支持订单缩略图显示，增加热门搜索，显示用户最关注的搜索信息。 　　四六、支持数据库在线备份、在线恢复、数据库大小查看，数据下载等！ 　　四七、支持图片水印与文字水印功能，并可设置文字嵌入的5个方位等！ 　　四八、全新支付宝接口整合，解除原有付费接口。本接口免签约使用！ 　　四九、截止目前修复所有已知安全漏洞，保障网站运行高效、安全！ 　　五十、更换全新网页编辑器，兼容所有浏览器，彻底特别原来的诟病！ 　　五一、强大的大、小、子类类别隐藏功能，随意隐藏或开启显示！ 　　五二、支持新注册用户赠送若干积分、预存款功能，后台方便设置！ 　　五一、全新广告管理，支持广告位关闭、支持飘浮广告、FLASH动态切换广告 　　五四、新增删除订单商品功能，可以删除订单中的现有商品重新统计！ 　　五五、新增上传文件管理，支持预览模式，可以在线删除无用的上传图片！ 　　五六、新增订单文本打印输出功能！以文本表格的形式打印某一订单。 　　五七、太多太多人性化更新与调整，用户可体会到耳目一新的感觉！ 程序功能详细介绍如下： 网趣网上购物系统时尚版的功能点： 一、购物系统三级级分类设置 网趣网上购物系统支持的三级分类设置，后台可以轻松对商品进行分类的明细化设置，添加商品，可以方便得设置一、二、三级分类的属性，对于商品较少的购物站，用户也可以只用2级分类，使购物系统的适应人群弹性更强，网站的导航分类一目了然，是购物系统最好的明细分类地图，用户可以方便得查看整站所有的类别信息。 二、支持商品图片自动删除功能 率先支持商品图片自动清除功能，众所周知，随着商品不断的上架与删除，会有很多冗余的图片占留空间，时尚版支持删除商品的同时商品图片也随之自动删除，更节约空间，如果您的空间够大，图片也可以进行保留，后台可以方便得控制 三、率先支持Excel批量导入商品 网趣时尚版率先支持Excel批量导入商品功能，只须下载Excel模板按要求进行添加商品即可，添加完后通过批量添加商品功能，上传Excel文件即可一次性批量添加完成，非常方便。特别适合经常在本地来完成Excel添加，然后集中批量上传的用户。同时配合程序独有的批量修改功能，管理商品变的特别轻松与方便! 四、全屏幕设计的流行风格 采用目前流行的全屏幕设计风格， 流行而时尚，独特且新颖!优美的外观设计、给用户以美的视觉冲击，这是您网店成功的第一步! 五、强大的商品输出Excel 功能 网趣时尚版新增商品数据导出Excel 电子表格功能！所有商品数据可直接输出至Excel 中，对于管理员进行帐务分析、数据备份有着举足轻重的使用！ 六、时尚版拥有6套风格独特的模板 时尚版拥有6套不同色调的模板，后台只须轻轻一点，整站风格即可瞬间更换，从此摆脱风格单一、枯燥的界面，每天给客户以新的感觉、新的享受！ 七、新增贝宝支付接口 贝宝是全球优秀的在线支付提供商，支持国内、国外银行卡支付，网趣时尚版现已整合贝宝支付接口，目前程序已经支持7种在线支付接口，后台可自由切换使用。 八、现已整合财付通支付接口 财付通是腾讯推出的一款功能强大的在线支付工具，应用户的强烈要求，现已整合。程序目前拥有7种在线支付接口，后台自由切换使用，极其方便！ 九、新增商品批量添加功能！ 应用户强烈要求，时尚版具有商品批量添加功能，可自定义一次性添加的商品个数，可一次提交保存所有商品信息，抛弃单调、重复的工作，网趣时尚版新版脱颖而出，让您的管理工作更轻松，管理更方便！ 十、订单自动通知功能！ 有新订单产生，程序具有自动邮件通知功能，可以把订单信息发送到管理员邮箱，同时也会自动发送给客户信箱，可以直接登陆邮箱就可以查收订单!! 同时新用户注册，也会把注册信息发送到注册用户填写的邮箱中。 十一、支持商品优惠券使用功能 　商城后台可以批量生成若干条优惠券以及设置优惠券的金额！可以把优惠券发放到消费者手中，用户在商城上购物，输入优惠券编码，下订单后可以减免相应的订单金额，是目前购物领域中比较流行的促销手段，非常受人们的欢迎！ 十二、免运费功能设置！ 可以方便的设置免运费功能。当用户购物很多时，网站会给用户适当的优惠措施，如免运费。设置免运费功能后，当用户的购物金额达到设定的金额时，订单自动免运费，是网站促销的一种非常有效的方法。 十三、商品图片自动覆盖旧图片功能 　修改商品时，点击上传大小图片，可以选择是否覆盖原旧图片，覆盖后的图片文件名不变，这样可以节约宝贵的网络空间，减少冗余数据的产生。 十四、支持商品上、下架管理功能 新增商品上架、下架管理功能，对于库存不足、季节不适等商品可以暂时下架，下架的信息后台优可看到，但前台不会显示，如需再次销售，可直接进行上架即可！ 十五、支持商品图片水印/文字水印功能 网趣网上购物系统率先支持商品图片水印设置功能，可以选择设置图片水印或文字水印，并可设置水印嵌入图片的位置，设置水印可以有效防止图片盗链，同时不易被修改和使用，更能表现出一个网站的特色风格，设置好水印后，添加商品上传图片时，会自动在图片上嵌入水印内容，彰显网站的独特风格！ 十六、支持商品图片水印功能 网趣网上购物系统率先支持商品图片水印设置功能，设置图片水印可以有效防止图片盗链，同时不易被修改和使用，更能表现出一个网站的特色风格，设置好水印后，添加商品上传图片时，会自动在图片上嵌入水印内容，彰显网站的独特风格！ 十七、支持商品排序浏览 用户在前台浏览商品，可以按照商品的价格由高到低或由低到高、也可以按商品人气由高到低或由低到高、也可以按添加日期排序浏览，为用户选择合适的商品提供了便利。 十八、支持IP访问限制功能 随着网络安全的日益提高，为防止部分恶意人员对商城进行点击或其他不法行为，网趣网上购物系统新增IP访问限制功能，添加某IP后即可限制此IP人员的访问，同时系统支持IP段的限制访问功能，可对同一IP段进行访问限制。 十九、商品订单后期修改功能 订单生成后，用户往往与管理员进行沟通调整订单价格等信息，时尚版支持订单后期修改功能，可以方便的修改订单中商品的价格、商品的购买数量信息，修改后总价自动核算，非常方便! 二十、网站搜索关键词功能 经常关注自己的网站总是想知道，网站的哪些信息更受用户欢迎？用户更关注什么产品？新增的搜索关键词功能，可以记录用户在网站上搜索过哪些关词，以及相同关键词的搜索次数等信息，帮助管理员分析网站很有利。 二一、网站资料防复制功能 开启防复制功能，可以有效的防止网站的资料被其他人轻易的复制走，自己辛苦添加的数据不易被其他人拿走，有效屏蔽了鼠标右键、鼠标选择内容、全选等操作。 二二、增加最近浏览商品功能 新增最新的商品浏览功能，可以为用户列出最近所浏览过的所有商品记录，方便用户收藏或购买自己喜欢的商品，提高用户的购买欲望，为用户提供了很好的浏览指南。 二三、新增商品对比功能 新增商品对比功能！可以选择网站的任意4款商品一次横向排开，对比商品的各项功能和参数，方便用户选择购买商品，并可把对比的商品直接放入购物车进行购买，让用户购买商品更方便、更直观。 二四、支持商品复制功能 很多时候，一个个添加商品是很繁琐的功能，对于参数基本相同的商品更是麻烦，因此，商品复制功能正是满足了用户的这种需要，可以对已添加好的商品进行复制，然后进行局部修改，是一种非常方便的添加商品的方法！也可以非常方便地进行铺货。 二五、增加积分兑换比率设置 商城默认中的用户积分和预存款兑换比率一直是一比二，很多用户不知如何修改，本次更新中增加了用户积分和预存款兑换比率设置，在后台可以方便的设置兑换比率，方便用户进行修改设置。 二六、帮助中心栏目无限量扩充功能 　新版系统对商城的帮助中心进行了改进，可自定义帮助中心的栏目，并自由添加栏目信息，后台完全控制，可任意增加修改或删除帮助栏目及具体信息，这样大大方便了不同商家需要设置不同栏目的需求，更适应不同行业间的需要。 二七、增加缩略图弹出显示功能 强大的商品管理无疑给管理者提供了便利，新增的弹出图片显示功能，只需将鼠标移到商品上，即可弹出此商品的图片，非常方便，同时前台报价中心也增加了鼠标指向后显示图片的功能，提供用户的购买欲望。 二八、增加商品分类关键词及描述 　强大的SEO优化处理使网站优化一步到位，商品大类、小类、子类均增加了商品关键词(keywords)以及描述(DESCRIPTION)，可以对所有类别进行关键词设置，大大提高搜索引擎优化的搜索力度，同时增加商品大类、小类、子类的Title标题，解决了原来遗留的不能显示标题的问题。 二九、新闻支持滚动式与静止式2类 　应用户要求，首页新闻增加了滚动显示方式，更为美观，滚动显示的新闻不限新闻条数，可以满足更多需要此功能的用户，后台可以控制新闻显示方式，如滚动式与静止式。 三十、增中管理员登陆日志功能 　新增管理员后台登陆日志功能，每次后台登陆，无论是否登陆成功，均有详细的登录日志，可以更加方便管理员每次的登录日期，同时也可以排查非法用户进行后台登录的记录，如登陆时间以及登陆IP等信息。 三一、导航条魔幻菜单功能 　网站导航条支持文字式和图片式2类，文字式采用流行的div+css开发设计，界面新颖美观，采用文字式导航条更有利于搜索引擎抓取页面信息，同时程序还支持原有的图片式菜单效果，后台可轻松切换使用，以上2类导航条菜单均支持模板切换时导航条自动变换颜色功能。 三二、增加商品批量购买功能 　商品页面增加了批量购买功能，可以选择1到100之间的一次性购买数量，后台也可以控制开关，用户可以选择某个商品的一次性购买量，然后可以直接放入购物车，对于批发购买的网站非常适用。 三三、新增商品管理排序功能 　新增商品排序功能，由于商品是按添加日期进行排序的，对于添加较早的商品很难再调到前面显示，商品排序可以让任意的商品自由排序，可以方便的调用很早以前添加的商品置于首页或位于某些商品的前面显示。 三四、新增购物车商品推荐功能 商品放入购物车中，其页面下面仍然空余很多，新版中在购物车页面加入了同比购物商品推荐功能，扩充用户视野，提供用户购买了此商品的人还购买了其他的商品，以此方便用户选购商品，同时也推荐用户选择所列的其他商品，推荐价值更高。 三五、增加商品背景图开关功能 众所周知，时尚版购物系统支持商品图大小的自定义功能！此功能非常适用，由于改变原商品图后，背景图大小不变，因此增加了商品图开关功能，对于个别需要调整图片大小的客户，保需要把商品背景图关闭即可，不影响整体效果。 三六、时尚版商品多元化设计，适合各行各业开店使用！ 新的时尚版更适合国人的需要，多元化设计，增加诸如商品尺码、商品颜色等智能选择参数，对于需要这类功能的商家特别有利，时尚版适合各行各业网上开店使用，配合整合的BBS论坛程序，用户帐号一站式通用，时尚版是您网上开店的最佳选择！ 三七、时尚版完美整合BBS论坛程序! 时尚版已经完美整合BBS论坛程序!用户帐号一站式通用，即无无论是在商城还是在论坛只须注册一个帐号即可，全站使用，是目前网上开店的理想平台。 三八、增加了商城报价中心功能! 对于商城商品数量较多的网站，查找一个商品或快速浏览商品是经常的事，新增的报价中心解决了这个问题，可以按商城类别显示所有商品的价格信息，让用户查找、浏览商品更轻松。 三九、增加商城匿名用户购买控制功能 支持匿名购物是现有商城的一大特点，可以允许用户不用注册即可购买商品，省去了注册的繁琐步骤，但对于有些商家是不需要这个功能的，新版程序在后台增加了匿名用户购物开关功能，关闭此功能，即关闭了匿名购物，改为必须注册才可以购买，打开即可实现支持匿名购物功能，非常方便。 四十、新增强大的站点关键词设置及优化技术! 网趣网上购物系统时尚版具有大的关键词设置功能，整个网站可以设置其搜索关键词，同时单个商品的介绍页面均可以设置独立不同的关键词信息，同时经过优化过时尚版本在搜索引擎优化上有了更大的飞跃，绝大多数商品在各大搜索引擎中的前排位置显示! 四一、新增强大的后台权限管理 时尚版新增强大的后台管理员权限分配管理功能，后台的所有管理功能均可以通过权限管理进行设置，对于网店多个管理员的情况下非常适且，所有管理员之间均可以设置独立不同的管理权限，安全性更高! 四二、支持热门搜索关键词 支持商城热门搜索功能，可以罗列出用户搜索频率最高的关键词，用户可以直接点击热门关键词进行搜索，这样可以让用户查看哪些商品比较受用户的关注。 四三、新增Google Sitemaps地图生成功能！ 时尚版支持google sitemaps 地图生成功能，全自动生成网站的所有信息，生成sitemap.xml，对于Google搜索引擎的收录极为有利！第一时间被Google所收录，添加地图生成功能，Google会检索并读取生成的地图文件，进行网站的全面收录! 四四、具有强大的访问统计功能 时尚版新增访问统计功能，包括总体数据统计、每日访问明细功能，具有完善的商城统计功能，可以对网站每日的访问人数以及访问页面进行详细的统计，给店主提供了最直接的参考依据! 四五、时尚版已经加入了积分换算、奖品功能! 网趣网上购物系统时尚版 已经完美加入商品积分、兑换功能，预存款与积分可以相互兑换，并可以用积分购买站内奖品。 四六、支持验证码无刷新变换功能! 用户在登陆时往往会有输错验证码的情况，这时往往要刷新页面变更验证码后才能登陆，无刷新验证码就是解决了这个问题，无须刷新页面，直接点击验证码即可变成新的，输入后直接登陆即可。 四七、支持同一商品选择不同颜色或尺码分别下单! 根据商城的设计原则，对于同一商品如果多次点购买分按一个商品购买多次计算，但用户选择的同一个商品，如果选择了不同颜色或尺码，这个问题就出现了，时尚版现已解决这个问题，同一商品选择不同颜色或尺码进行多次购物会分别放入购物车！ 四八、多处细节更新与人性化设计! 新增商城首页商品控制功能，新增商品图片的大小设置功能，页面多处的美化设置，修正了BBS论坛的返回网站首页的问题，同时进行了多项的安全更新设置。 四九、支持非会员匿名购物功能 网趣网上购物系统时尚版目前支持会员/非会员，即匿名用户直接购买商品并下订单功能，用户无须注册即可购买商品，有利于商城商品的销售。 五十、支持多种在线支付方式 网趣网上购物系统时尚版支持多种网上在线支付，包括：北京网银、支付宝、北京云网、NPS、快钱、贝宝、财付通等7种在线支付接口，管理员后台可以自由切换使用，非常方便! 五一、商城客服QQ功能! 支持浮动客服QQ功能，可以开启或关闭，支持客服QQ显示位置功能，如左侧、右侧显示，支持导航条BBS论坛菜单关闭功能 五二、同类商品推荐功能 网趣网上购物系统时尚版商品详细介绍页面均增加了同类商品推荐功能，即打开页面的商品的同一类别的其他商品的推荐功能，这样更加利于用户的查找与购买，非常方便! 五三、商品分类菜单显示扩充为2种 网趣网上购物系统时尚版 新增商品分类的伸缩菜单功能，后台可以切换使用，默认的是展开式效果，对于商品分类较多的用户，可以采用伸缩式菜单显示的方式，使版面更加美观，使用上更加灵活! 五四、最有强大的站内支付功能 新增站内快速支付功能，用户可以给管理员实时在线支付款额，可由用户填写并提交到网上进行支付，对于需要快速支付的商家非常实用! 五五、采用最为流行的支付宝接口 时尚版采用最新的支付宝接口，可以对支付宝的送货费用详细设计，同时新的支付宝功能支持付款到支付宝和采用即时到帐交易2种方式，非常方便商家的销售。 五六、灵活的在线支付方式设置功能 时尚版所集成的多种在线支付方式，后台可以轻松开启/关闭在线支付。同时支付宝功能也可以轻松开启或关闭。对于不需要在线支付的商家非常有利。 五七、耳目一新的商品分类界面 网趣网上购物系统时尚版采用全屏幕设计风格，商品图片显示逼真，商品分类界面制作精美，给客户以美的视觉享受，有利于用户的购买欲望。 五八、更换为全新Kindedit编辑器 鉴于旧版编辑器对浏览器的限制严格，新版系统彻底抛弃原ewebedit编辑器，更换为更易操作、更方便上手的Kindedit，新的编辑器功能丰富、使用简单、且兼容所有浏览器，执行效率更高速度也更快。 五九、会员积分/预存款购物功能 程序支持会员功能；会员可以有预存款，并可以通过预存款直接购买商品。 六十、站内短信联系功能 网趣网上购物系统的站内短信功能非常实用，商城用户可以与管理员通过互发站内短信沟通和联系，有利于与用户的近一步沟通。 六一、完善的广告管理形式 时尚版的广告管理位很多，所有广告图片内容均可以直接在线上传管理。 六二、采用流行的Flash 广告切换形式。 商城已经整合了目前流行的Flash广告滚动效果，管理员在后台只须上传广告图片，前台会自动生成各式各样的FLASH动态效果，给用户以美的视觉冲击。 六三、商品评论、留言功能 用户可以对商品发表评论、管理员并可以对评论进行回复或点评。时尚版的留言本可以允许用户在这里发表看法、购买感受以及与管理员近一步的沟通。 六四、时尚版多处优化功能 网趣网上购物系统时尚版对购物系统各环节进行了优化，如优化过的用户注册流程更具人性化，用户留言管理可以设置是否审核显示留言信息，同时修复了若干小的问题。 六五、新增站内邮件订阅功能 新增的站内邮件订阅功能可以搜索用户填写的EMAIL地址，具有订阅和退订的双重功能，管理员可以定期给会员发关商品行情、新闻等相关信息，以促进网站的宣传! 六六、简、繁互译、后台登陆软键盘功能 程序支持简/繁体显示，直接对页面的文字进行内码转换；管理员后台登陆，密码输入自打开启软键盘，增强了安全性 六七、支持数据库在线操作 系统支持在线备份数据库，支持数据库在线恢复功能，且可以选择不同的备份进行恢复。支持查看当前数据库大小、下载数据库备份的功能。支持删除备份的数据库功能。为网站及时进行备份和恢复提供了良好的支持！ 六八、新增删除订单中商品功能 用户下完订单往往会修改订单信息，比如删除一个不需要的商品，网趣时尚版新增订单商品删除功能，可以对已下完订单中的商品进行删减，非常方便，删减后订单自动重新统计！！同时支持修改商品订单价格、商品订购数量等功能。 六九、客服QQ浮动菜单功能 全新的浮动客服QQ功能，速度更快，更美观，更实用，并且可以准确的判断用户的在线状态通，后台可以开启/关闭客服QQ功能。 七十、增加商品图片设置功能 新增网站商品图片的大小设置功能，对于部分商家可能会对首页显示的图片进行大小的调整，此功能可以方便用户自由调节图片的尺寸，以适应需要。 七一、解决了商品价格显示不全的问题 解决了商品价格不足1元的无零显示问题，数据库价格字段均改为采用货币型；修正支付宝的运费设置问题，增加留言本验证码功能，以防止垃圾信息 七二、广告管理内容更丰富 网趣网上购物系统时尚版增加了浮动广告的设置功能，后台可以开启或关闭，并可轻松上传浮动广告图片功能。 七三、前台订单查询功能 前台支持订单查询功能，输入订单号后即可查询此订单的信息，包括订单状态、下单人的信息、下单时间等内容。 七四、编辑器图片浏览与调用功能 全新的编辑器Kindeditor支持本地与远程图片调用功能，对于本地上传的图片，系统自动按月份进行目录的创建，特别方便管理员管理，而且对本地上传图片可重复调用，支持图片浏览与选择功能。 七五、商品订单后期支付功能 很多用户在网站购物下订单并没有立即支付，因此此订单只能作无效处理，新版系统增加了商品订单后期付款功能!可对以往未处理的订单进行支付宝付款，杜绝无效订单! 七六、支持发货单号、缺货管理功能 网趣网上购物系统支持订单发货单号输入功能，管理员在对订单信息的商品发货后，可以此订单中标注发货单号，方便用户及时查收各快递公司的发货号并及时收货，同时程序支持商品缺货管理功能，对已经缺货和即将缺货的商品进行及时提醒，防止断货。 七七、全新的BBS论坛版本整合 网趣网上购物系统时尚版重新整合了BBS论坛版本，采用最新的BBS官方版本，杜绝漏洞的存在，同时新版程序增加了诸多实用功能，时尚版购物系统整合的BBS自带7套模板，方便用户的选择! 七八、新闻、资讯无限级分类功能 网趣网上购物系统时尚版具有商城新闻、资讯无限分类功能，商城、资讯可以划分为任意子级类别，添加新闻、资讯可以选择所属的类别，前台具有类别分类显示、排序功能，可以查看任意类别的信息内容，便于网站资讯类较多商城的使用，同时新增加新闻与资讯的搜索关键词和描述功能，让搜索引擎更容易抓取网页信息。 七九、诸多细节的人性化修改和更新 新版程序在各个环节均作了部分的修改和更新，修正了若干titlt信息、商品标题的设置以及部分代码的优化，同时根据用户的习惯，对部分内容也作了更新。 八十、投票管理、公告、销售统计等功能 可以发起商城投票，可以设置商城的公告信息，后台可以方便查看近期的销售统计情况。 八一、更强的广告管理功能 在原有广告管理基础上，增加网站广告位的开关功能，很多用户不需要过多的广告位，新增的关闭功能可以彻底关闭现有广告位，或放置自己喜欢的其他内容。 八二、增加VIP在线申请功能 支持普通会员与VIP会员两种会员形式，增加普通会员在线申请VIP会员功能，可以发起申请，管理员后台审核可以设置用户VIP身份，从而享受VIP购买价格。 八三、时尚版焕然一新的后台管理界面! 时尚版对后台界面进行了设计和编排，后台管理界面更漂亮、重新对部分功能进行归类，功能更加强大! 八四、增加发货通知显示功能 增加发货通知功能，管理员可以对已发货的订单进行发货通知，可以让下单用户及时了解快递详单过程，让用户及时了解自己的订单信息! 八五、增加新注册用户赠送活动 增加新用户注册时赠送积分与预存款功能，这是一种不错的促销手段，后台可以设置赠送预存款和积分的个数! 八六、全新支付宝接口免签约使用! 时尚版重新整合目前最新的支付宝接口，本接口是支付宝新推出的一项活动，支付宝免签约使用，无须原来的签约付费即可使用。非常方便，对于经常使用支付宝的用户是非常好的机会。 八七、更新论坛版本至官方最新版! 完美整合BBS论坛系统，升级为官方论坛最新版本，功能更加丰富和强大，安全性更高！　 八八、新增上传文件管理功能! 新增上传文件管理功能，支持文件与图片浏览模式切换，可以在线管理所有的上传图片，并可以对无用图片批量删除操作，省去了登陆FTP查找文件的弊端！　 八九、更新上传文件管理功能 在更换全新编辑器的基础上，同时对原“上传文件管理”进行更新，使商品大小图与编辑器所上传的图片共享一个目录，这样可以实现“上传文件管理”功能可以管理所有系统上传的图片的浏览与删除操作，解决了原来只能删除大小图而不能管理编辑器上传的图片的删除功能!! 九十、新增订单文本打印输出! 新增强大的订单文本打印输出，替换掉原有的带有表格颜色及背景色等不方便的打印，新增的打印可以以纯文本加普通单线黑表格方式进行打印订单，方便归纳与统计，并具有当前打印日期显示功能！　 九一、多处的安全更新 网趣网上购物系统时尚版进行了多处安全更新，截止目前已做了大量的安全防护措施！确保网站安全、高效运行。最新版中我们对程序代码进行了全面的检查，安全上有了足够的保证！
工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究
工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究 研究生姓名： 唐帅 导师姓名： 罗军舟 教授 苏生 教授 申请学位类别 工 程 硕 士 学位授予单位 东 南 大 学 工程领域名称 软 件 工 程 论文答辩日期 研究方向 Android+HTML5 学位授予日期 答辩委员会主席 评阅人 硕士学位论文 基于Android+HTML5的移动Web项目 高效开发探究 专业名称： 软件工程 研究生姓名： 唐帅 导师姓名： 罗军舟 校外导师： 苏生 THE RESEARCH OF EFFICIENT DEVELOPMENT OF MOBILE WEB PROJECTS BASED ON ANDROID AND HTML5 A Thesis Submitted to SoutheastUniversity For the Academic Degree of Master of Engineering BY Tang Shuai Supervised by Luo Junzhou and Su Sheng College of Software Engineering SoutheastUniversity February 2017 东南大学学位论文 独创性声明 本人声明所呈交的学位论文是我个人在导师指导下进行的研究工作及取得的研究成果。尽我所知，除了文中特别加以标注和致谢的地方外，论文中不包含其他人已经发表或撰写过的研究成果，也不包含为获得东南大学或其它教育机构的学位或证书而使用过的材料。与我一同工作的同志对本研究所做的任何贡献均已在论文中作了明确的说明并表示了谢意。 研究生签名： 日期： 东南大学学位论文使用 授权声明 东南大学、中国科学技术信息研究所、国家图书馆有权保留本人所送交学位论文的复印件和电子文档，可以采用影印、缩印或其他复制手段保存论文。本人电子文档的内容和纸质论文的内容相一致。除在保密期内的保密论文和在技术保护期限内的论文外，允许论文被查阅和借阅，可以公布（包括以电子信息形式刊登）论文的全部内容或中、英文摘要等部分内容。论文的公布（包括以电子信息形式刊登）授权东南大学研究生院办理。 研究生签名： 导师签名： 日期： 摘要 目前工业市场上认证检测领域，业务流程陈旧繁琐，用户与检测机构无法便捷有效的沟通。除此之外，用户需要亲临检测机构实地送检，在检测的每一个环节用户也无法有效的进行追踪，这些都制约着认证检测领域的进一步发展。鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐，传统方式根据主流系统分别开发相应的系统耗时又耗力，为了高效开发并节约开发项目成本，本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作。 然而，由于HTML5的W3C标准规范还未制定，安卓系统中类浏览器Webview自身存在一些局限性，因此仍存在着诸多问题亟需解决，包括：（1）多窗口类浏览器模式问题。安卓上用于加载的Webview视图窗口只是作为类浏览器而存在，在安卓上更是只能同时运行一个Webview。（2）跨域数据交互问题。不同的Webview之间无法共享数据。（3）页面自适应问题。页面难以兼容适应不同分辨率的设备和浏览器。 本文研究并设计了基于Android+HTML5的在线认证检测系统，主要工作包括以下四个方面： （1）针对多窗口类浏览器模式问题，指出并分析了该问题存在的原因，利用Activity的运行机制，通过Fragment栈对主要模块的Webview进行管理，实现对不同模块之间切换的控制。 （2）针对跨域数据交互问题，指出并分析了跨域缓存交互问题出现的原因，通过在HTML5存储技术的基础上，重写LocalStorage，用移动端本地的Sqlite进行数据维护，实现跨域数据交互。 （3）针对页面自适应问题，本文结合渐进增强以及拥抱流式布局的思想，同时研究利用了移动设备的视口特性，实现跨分辨率、跨设备的页面自适应。 （4）针对系统的功能实现问题，通过结合利用原生态框架与HTML5的跨平台性，实现了“认我测”在线认证检测系统。 综上所述，“认我测”在线认证检测系统，率先填补了认证检测领域移动端的空缺，提供了Web浏览器+移动端的双端访问模式，给用户提供了多种访问途径，真正实现了用户和检测机构的随时随地在线下单检测。 关键词：HTML5，检测与认证，Android，多窗口浏览器模式，跨域处理，页面自适应 Abstract At present business processes are old and explicit in industrial market of certification and detection filed, as well as users can not have effective and convenient communication with detection institutions. Apart from these, customers have to come to detection institutions personally to send samples, and they can not take effective trace of each process during detection. All of these limit the advanced development of certification and detection field. As the versions, types and resolution of users' mobile phones vary in current market, conditional ways depending on systems respectively cost extra time and resources. In order to develop efficiently and save cost of projects, this paper combines android with HTML5 to design and start the development of mobile web system. However, due to standard specification of W3C of HTML5 hasn't been drafted, and browser-alike webview in android has several limits itself, there are still many problems to be solved. Including: (1) Multi-window browser pattern. Webview window in android used to load pages just works like browser, as well as there is only one webview running at the same time. (2)Cross-domain data interaction. Different webviews can not share data. (3)Self-adaption of pages. It is difficult for pages to adapt to devices and browsers of different resolution. This paper researched and designed an online certification and detecting system based on Android and HTML5. Four main parts are included as following: (1) Considering multi-window browser problem, this paper pointed out and analysed reasons of it. The running mechanism of Activity was used cleverly and webiews of main modules were managed through Fragment stacks, in order to control the switch among different modules. (2)Considering cross-domain data interaction problem, reasons of it were pointed out and analysed. LocalStorage was overrided based on HTML5 storage technics, and local sqlite was used to maintain data in order to realize cross-domain data interaction. (3)Considering self-adaption of pages, the system combined the ideas of progressive enhancement and embracing flow layout, aiming at personalitites of mobile facilities viewports, and realized respective solution. (4)Considering the implementation of system functions, the system took the advanteges of native frameworks as well as HTML5 crossing platforms, and developed "Finding Me Detecting" online certification and detecting system. In summary, "Finding Me Detecting" online certification and detecting system filled up blanks of mobile market in certification and detecting field, provoding double side access pattern, that is to say web browser together with mobile side, offering users various ways to access the system, and really realized the goal of whenever and wherever ordering to detect for users and detecting companies. Keywords: HTML5; Quality Authentication; Android; Multi-window browser; Cross-domain data; Page self-adaption 专业名词清单 专业名词 名词解释 HTML5 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改 Android 一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导开发 IOS 由苹果公司开发的移动操作系统 Webkit 一个开源的浏览器引擎，在手机上的应用十分广泛 Webview WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页 Activity Activity是一个应用程序组件，提供一个屏幕，用户可以用来交互为了完成某项任务，是一个负责与用户交互的组件 SSH 为 Struts+Spring+Hibernate的一个集成框架，是目前较流行的一种Web应用程序开源框架。其中使用Struts作为系统的整体基础架构，负责MVC的分离，在Struts框架的模型部分，控制业务跳转，利用Hibernate框架对持久层提供支持，Spring做管理，管理Struts和Hibernate。 WebStorage HTML新增的本地存储解决方案之一 LocalStorage 本地永久性存储数据，除非显式将其删除或清空 SessionStorage 存储的数据只在会话期间有效，关闭浏览器则自动删除 Sqlite 一款轻型的数据库，是遵守ACID的关系型数据库管理系统，它包含在一个相对小的C库中 W3C 万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。主要的工作是发展 Web 规范，这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。 NativeApp 使用传统原生态Android SDK来实现的应用 WebApp 基于浏览器来实现的一种应用 HybridApp 一种可以下载的Native App，其用户界面的全部或者部分元素在嵌入式浏览器组件（WebView之类的）里面运行 优雅降级 一开始就构建站点的完整功能，然后针对浏览器测试和修复。认为应该针对那些最高级、最完善的浏览器来开发网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段 渐进增强 一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。先让网站能够正常工作于尽可能旧的浏览器上，然后不断为它在新型浏览器上实现更多的增强和改进。 Viewport 移动设备上的Viewport就是设备的屏幕上能用来显示网页的一块区域，即浏览器上用来显示网页的那部分区域。Viewport不局限于浏览器可视区域的大小，可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。 媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明，最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件，用户可以通过Internet Explorer的用户界面，以Chrome内核的渲染方式浏览网页。Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中, IE浏览器将获得Chrome的性能和功能 目录 摘要 I ABSTRACT II 专业名词清单 III 第一章 绪论 1 1.1 研究背景与意义 1 1.2国内外相关研究现状 2 1.2.1 在线认证检测平台开发现状 2 1.2.2 HTML5 3 1.2.3 Android 3 1.2.4 Android移动Web项目开发的三种解决方案：Native, Web和Hybrid优缺陷分析 4 1.2.5国内外应用现状 6 1.2.6 研究现状总结 7 1.3研究目标与内容 7 1.3.1多窗口浏览器模式的实现机制 7 1.3.2跨域交互即缓存处理方法 7 1.3.3页面自适应机制，即设备自适应与浏览器自适应机制 8 1.3.4 “认我测”质检服务平台的设计和实现 8 1.4 本文的结构安排 8 第二章 多窗口类浏览器设计 11 2.1 多窗口类浏览器需求分析 11 2.1.1 Activity简介 11 2.1.2 Fragment简介 11 2.1.3 多窗口类浏览器需求 12 2.2 多窗口浏览器模式的实现机制 12 2.2.1安卓移动端多窗口浏览器框架 12 2.1.2多窗口浏览器模式实现机制 13 2.3 模块实现 13 2.3.1类浏览器模式 13 2.3.2多窗口类浏览器模式 14 2.4 本章小结 15 第三章 跨域交互缓存处理设计 17 3.1 跨域交互缓存处理需求 17 3.1.1 缓存技术WebStorage 17 3.1.2 跨域交互缓存处理需求 17 3.1.3 页面回退管理需求 17 3.2 缓存处理机制 18 3.2.1 跨域缓存处理 18 3.2.2页面回退管理 18 3.3 模块实现 19 3.3.1跨域缓存机制的主要实现 19 3.3.2.页面回退管理的实现 22 3.4本章小结 22 第四章 页面自适应机制设计 23 4.1页面兼容策略 23 4.2 页面自适应策略 24 4.2.1设备自适应 24 4.2.2.浏览器自适应 25 4.3 模块实现 25 4.3.1根据适口属性设计响应式布局： 26 4.3.2同分辨率范围内的流式布局设计 26 4.3.3移动端viewport属性设定 27 4.3.4组件样式的渐进增强设计 27 4.4 本章小结 27 第五章 认我测在线检测服务系统设计 29 5.1认我测在线检测服务系统需求分析 29 5.2 系统时序流程 29 5.3 系统功能模块图 30 5.4 本章小结 32 第六章 认我测在线检测服务系统实现与测试 33 6.1认我测在线检测服务框架设计 33 6.2 系统运行环境搭建及配置 34 6.2.1 AndroidManifest.xml主程序环境配置 34 6.2.2 移动端工程资源布局 35 6.3 认我测在线认证检测系统的主要功能实现 36 6.3.1用户查询 36 6.3.2订单操作 37 6.3.3个人信息维护 37 6.4.系统功能测试 38 6.4.1 首页功能模块 38 6.4.2 订单功能模块 38 6.4.3 个人信息模块 39 6.4.4页面自适应 40 6.5 本章小结 41 第七章 总结与展望 43 7.1 工作总结 43 7.2 研究展望 44 致谢 47 参考文献 49 第一章 绪论 1.1 研究背景与意义 目前市场业务中在产品以及其他项目的认证和检测方面存在诸多不便，用户需要实地考察并频繁与检测单位沟通，填写繁琐的纸质检测报告、当面送递样品，对于检测环节中存在的问题难以及时交互并处理。市场上相应的检测平台诸如检测通、凡特网等皆为pc端检测网站，并且操作繁琐不够人性化，用户在实地使用中存在很多问题。昆山工业技术研究院着眼于为委托用户和质检机构搭建良好的沟通桥梁，免去目前市场业务中企业用户需要实地地并频繁地与检测机构沟通，从而提出自己的委托乃至下委托单、等待检测报告等，设计并研发了市场上首款提供质检服务的移动端app，即“认我测”质检服务平台系统，用户只需在手机上安装轻盈小巧的系统app，即可方便快捷的进行委托服务，质检机构亦可便捷地处理请求订单，双方都可以实时追踪委托订单的状态变化。 考虑到目前市场上用户的手机型号、种类、屏幕分辨率等参差不齐，传统方式根据主流系统(如android、ios)分别开发相应的系统耗时又耗力，为了高效开发并节约开发项目成本、提高项目开发效率，并迎合近年来新兴的HTML5移动页面开发技术，公司采用Android+HTML5相结合的方式进行移动端系统的研发工作。系统的主体一次开发即可在不同设备，包括不同系统、不同型号、不同分辨率设备上运行，免去了大量冗余的开发工作，提高项目的开发效率，降低项目的开发维护成本，为用户提供便捷服务。项目的封装框架只需根据系统的不同稍微改动定制即可，传统的多套系统项目现在只需一次开发，即可适应于不同机型。此外系统还可以通过微信公众号推广链接进行访问，大大的增强了系统的可扩展性和用户操作的便捷性。 然而，由于HTML5的W3C标准规范还未制定，安卓系统中类浏览器Webview自身存在一些局限性，使得结合安卓与HTML5开发移动web项目仍处在探索研发阶段，还不够成熟和完善，相应的技术支持也比较有限，因此仍存在着诸多问题亟需解决,包括: (1)多窗口浏览器模式问题。安卓用于加载的Webview视图窗口只是作为类浏览器而存在，并不等同于pc浏览器，在安卓上更是只能同时运行一个Webview，每次加载新的页面都只能覆盖掉原先的页面，无法达到网页浏览器的多窗口模式。通过常规的pc浏览器窗口的相应open、close进行新增窗口、关闭窗口等操作，在Webview类浏览器窗口中都无法正常运作，甚至会导致Webview失去响应。为此，需要研究相应的解决方案，用于模拟用户适应的网页多窗口浏览器模式。（2）跨域交互问题，即缓存机制与浏览记录管理问题。不同于网页浏览器，用户的数据可以在不同的窗口之间共享，Webview由于其模块之间无法共享数据的机制为保存用户信息以及共享其他程序数据带来了巨大难题。为此需要区分数据是同模块内部共享还是跨域共享访问，并提供相应的解决方案。Webview通过模拟多窗口浏览器模式运作后，在不断的新开页面以及不同模块之间互相切换，会导致页面回退时历史浏览地址发生覆盖，使得不同模块无法回到相应的上级页面，为此需要有效的对页面的浏览历史进行管理，并提供切实可行的方案。（3）页面自适应问题,即设备自适应与浏览器自适应问题。针对移动设备繁杂的屏幕分辨率，如何让页面进行分辨率自适应，从而发挥相对于原生态安卓开发的优势，是一个需要探索和解决的问题。考虑到高效开发设计以及便于推广应用，HTML5的界面不仅仅需要适应基于Webkit内核的Webview，还要能够方便的应用于PC端的网页，如何让HTML5的网页能够适用不同的浏览器内核，也是一个亟待解决的问题。 为此，如何使得“认我测”质检服务平台中安卓与HTML5的结合开发满足多浏览器模式，并解决跨域之间的数据交互问题，同时提高页面的设备自适应和浏览器自适应能力，成为跨平台移动web项目高效开发所亟待解决的问题。 1.2国内外相关研究现状 1.2.1 在线认证检测平台开发现状 互联网界目前在检测领域存在部分在线检测认证的平台，诸如华强认证、检测通等，可以为用户提供一些简单的检测申请，以及为检测机构提供平台发布相关信息。 图1.1 华强认证检测平台首页 如上图所示，在华强认证平台上用户可以选择认证或者检测服务，针对相应类型进行筛选。根据待检测的种类不同，选择相应的检测机构资质、证书、检测周期等查询结果，根据查询结果选择检测机构进行检测委托。检测机构与平台合作，提供负责的检测服务项目、价格等信息，在平台上开设个人站点，提供数据给平台，用于用户检索。 与时下常见的电商网站类似，此类检测平台都提供检测方设计自己的网站主页以出售检测服务，同时为用户提供检索结果、显示可购买的检测服务，用户可以选择质检服务并加入购物车、下单、查看检测方详情、与卖家（检测方）沟通检测细节等操作，但是这些平台都存在着共同的问题——流程不够清晰明了、检测服务不够个性化、用户操作繁琐等，这些问题给用户和检测机构的使用以及交流带来了很多不便。平台提供的检测项目有限，很多时候用户无法确定自己需要检测的项目所属，也不能有效地与检测方进行沟通。与此同时，认证检测领域对于移动端的涉及基础为零，目前主流移动端市场没有相应的认证检测服务产品，随着移动产品愈发便捷，在移动端研发设计相应的认证检测产品，使得用户可以随时随地进行下单咨询变得愈发重要。 1.2.2 HTML5 为了方便用户的使用，“认我测”认证检测平台的PC端基于B/S架构，其设计和研发离不开浏览器内核支持，同时移动端的Web开发也同样需要HTML5语言的支持。利用HTML5的崭新特性，能够更好地为用户提供服务。 HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML（标准通用标记语言下的一个应用）标准版本；现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。 HTML5广义上为包括HTML、CSS和JavaScript在内的一套技术组合。减少浏览器对于需要插件的丰富性网络应用服务，如Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。目前HTML5已向开发人员提供了很多新的标签，如section，nav，article，header和footer等。这些标签语义化程度高，被广泛使用。 HTML5逐渐为移动Web开发所采纳，主要原因在于其适用移动项目开发的八大特性，即离线缓存、音频视频自由嵌入、地理定位、Canvas绘图、丰富的交互方式、低开发维护成本、CSS支持以及调用手机硬件。其中离线缓存可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。音频视频方面HTML5无需拆分开混排的多媒体内容，可以将文字、图片、音频、视频等放在一起进行处理。HTML5提供地理定位的支持，无需专属导航软件，通过缓存即可加载地图数据，方便灵活。在系统开发和维护方面，打开即可使用最新版本，免去重新下载升级包的麻烦，使用过程中就直接更新了离线缓存。除此之外，HTML5增强了对CSS样式的支持，极大的增强了界面的美化和友好性，提高了用户体验。 1.2.3 Android Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发。Android操作系统最初由Andy Rubin开发，主要支持手机。2005年8月由Google收购注资。2007年11月，Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。随后Google以Apache开源许可证的授权方式，发布了Android的源代码。2011年第一季度，Android在全球的市场份额首次超过塞班系统，跃居全球第一。 2013年的第四季度，Android平台手机的全球市场份额已经达到78.1%。 Android是一个真正意义上的开放性移动设备综合平台。它包括操作系统、用户界面和应用程序－移动电话工作所需的全部软件，而且不存在任何以往阻碍移动产业创新的专有权障碍。通过与运营商、设备制造商、开发商和其他有关各方结成深层次的合作伙伴关系，来建立标准化、开放式的移动电话软件平台，在移动产业内形成一个开放式的生态系统，这样应用之间的通用性和互联性将在最大程度上得到保持。 在开发之初，Android平台就被设计成一个由一系列应用所组成的平台。所有的应用都运行在一个核心的引擎上面，这个核心引擎其实就是一个虚拟机，它提供了一系列用于在应用和硬件资源间进行通讯的API。Android打破了应用之间的界限，开发人员可以把Web上的数据与本地的联系人、日历、位置信息结合起来，为用户创造全新的用户体验。此外应用程序不仅可以通过标准API 访问核心移动设备功能、互联网，应用程序还可以声明它们的功能供其他应用程序使用。 考虑到移动端市场主流操作系统的使用情况、移动领域的发展趋势以及Android操作系统的开源性，系统采用Android操作系统为研究对象，在其基础上进行设计和研发，使得认证检测产品能够为主流用户所使用，为用户带来便捷。 1.2.4 Android移动Web项目开发的三种解决方案：Native, Web和Hybrid优缺陷分析 Native app是用传统原生态Android SDK来实现的应用；Web app是基于浏览器来实现的一种应用。 Hybrid app是一种可以下载的Native App，其用户界面的全部或者部分元素在嵌入式浏览器组件（WebView之类的）里面运行。对用户来说，Hybrid App与Native App很难区别。二者都可以从应用程序商店或市场下载，存放在移动设备上，运行方式完全如同其他任何应用程序。但是对开发者来说，却存在巨大的差异，因为其无需为每一种移动操作系统从头开始重新编写应用程序，而是只要用HTML、CSS和JavaScript编写其中一部分应用程序代码，即可在多个设备上重复使用。 以下是三种技术各自的优缺点。 Native app Web app Hybrid app 系统特性 可以完美发挥系统特性（调用系统服务、内存管理等）； 操控设备硬件（如相机、蓝牙、振动器等） 无法充分发挥系统特性（调用系统服务、内存管理等）； 无法操控设备硬件（如相机、蓝牙、振动器等） 可以发挥大部分系统特性（调用系统服务、内存管理等）； 可以通过JavaScript API操控设备硬件（如相机、蓝牙、振动器等） 用户体验 可提供最佳的用户体验，最优质的用户界面，最华丽的交互； 支持消息推送 用户体验较差； 图片和动画支持性不高； 不支持消息推送 可提供较好的用户体验； 支持消息推送 本地资源 可访问本地资源 不支持访问本地资源 可访问本地资源 应用更新 获得新版本时需重新下载应用更新，不够方便 跨平台开发、用户不需要下载安装App,开发速度快 可以下载新应用更新，也可在线更新 适用场景 适合制作游戏等性能要求比较高的应用 对于对界面的灵活性有较高要求的app 适用于对画面表现特别高以外的主流需求 开发成本 各平台不兼容，多平台的开发、移植比较复杂，开发成本高，开发周期长，开发成本高； 维护多个版本的成本比较高； 针对多种设备（不同分辨率、不同硬件配置等）的调试和适配较麻烦，维护成本高； 纯HTML5快速开发，较低的开发成本； 支持设备广泛，基于浏览器，跨平台性，维护成本低； Native+HTML5 针对不同系统制定系统外壳，页面部分可重用，大大降低开发成本； 可直接在线更新，更新成本低； 跨平台性，无需针对不同平台开发多个版本应用。 网络要求 支持离线使用 非常依赖网络，网络不稳定等其他环境时，用户请求页面的效率大打折扣 大部分功能依赖网络 考虑到系统需要提供较好的用户体验、用户与检测机构能够利用消息推送进行实时沟通、用户的查询和下单操作默认已具备网络环境等因素，因此为了更好地利用移动端本地硬件支持以及实现跨平台、跨设备的开发，系统采取了Hybrid混合开发模式。通过在原生态框架中嵌入Webview类浏览器，主体页面采用HTML5开发，由原生态定制系统框架，这样在更换移动端操作系统时，只需相应更换系统外壳，主体部分可以重复利用，极大地减少了研发成本，提高了系统的可复用性。系统主体部分更新时，无需在应用市场中重新下载，应用HTML5的特性在线更新缓存即可方便地获取最新版本，为用户带来了便捷。 1.2.5国内外应用现状 图1.2 智能手机操作系统分布数据 市场调研公司Kantar Worldpanel ComTech发布的智能手机操作系统数据显示，截至2016年2月末的三个月内，Android中国城市的销售份额从去年同期的73%增至76.4%。而在美国和欧洲五大市场（包括英国、德国、法国、意大利和西班牙），Android的市场占比继续保持增长态势。因此系统选取市场移动端主流操作系统Android作为基础，进行移动端认证检测产品的研发和设计。 随着移动浪潮的兴起，各种APP层出不穷，极速的业务扩展提升了团队对开发效率的要求，这时使用IOS&Andriod开发一个APP的成本相对过高，而HTML5的低成本、高效率、跨平台等特性马上被利用起来形成了一种新的开发模式：HybridAPP。 作为一种混合开发的模式，Hybrid APP底层依赖于Native提供的容器（UIWebview），上层使用Html&Css&JS做业务开发，底层透明化、上层多多样化，这种场景非常有利于前端介入，非常适合业务快速迭代。Hybdrid作为目前主流的移动端开发设计模式，能够极大的利用Native和HTML5的优势，将性能与用户体验相结合，缩短跨系统的产品研发周期，给用户和研发都带来极大的便利。混合型APP软件兼具“原生型APP软件良好用户交互体验的优势”和“网页型APP软件跨平台开发的优势”。市场上一些主流移动应用都是基于混合型APP软件的方式开发，比如工商银行、百度搜索、街旁、东方航空、微信、去哪儿等。 目前已有众多企业采用混合型APP软件技术开发APP应用，一方面是开发简单，另外一方面可以形成一种开发的标准。企业封装大量的原生型的原生插件如支付功能插件供Java调用，并且可以在今后的项目中尽可能的复用，从而大幅降低开发时间和成本。混合型APP软件的标准化给企业移动应用开发、维护、更新都带来了极高的便捷性。 混合型APP软件通常是基于第三方跨平台移动应用引擎框架进行开发，在国内开发者中比较知名的有PhoneGap、Titanium和AppCan。这些引擎框架一般使用HTML5和Java作为编程语言，调用引擎封装的底层功能如照相机、传感器、通讯录、二维码等。HTML5和Java只是作为一种解析语言，真正调用的都是原生型APP软件一样封装的底层功能，这是和网页型APP软件的最大区别和不同。因为使用了浏览器技术，所以混合型APP软件通常具有跨平台的特性，并且开发成本和网页型APP软件接近，开发效率也远高于原生型APP软件。根据国际科技媒体ReadWriteWeb 2015数据统计显示，截至2015，有80%的App全部或部分基于HTML5研发。大部分的App内容以网页的形式呈现，包括微信、Facebook、Twitter等。为此，Hybrid混合模式成为“认我测”在线检测服务平台移动端框架的开发和设计依赖。 尽管微信通过公众号的形式，使得Android+HTML5模式得以应用并推广，这项技术目前仍不够完善，利用web实现移动app存在一些瓶颈。（1）根据百度移动互联网发展趋势报告，iPhone下载一个1.407k的网页，建立连接耗时1.35s左右，传输耗时0.15s左右。这样，导致app在建立连接的时候，屏幕处于白屏状态。app在一秒多的时间内，完全处于白屏状态，加上3G、GPRS网络的不稳定，有时候等待app响应需要几秒甚至1几秒的时间，对于mobie app来说，这是个致命的缺陷。（2）难以实现本地存储。基于Android存在多版本系统，Android低版本中的Webkit对HTML5和CSS3不能够很好地支持。常用的HTML5向后兼容方案是通过Javascript+CSS+Html来模拟HTML5的一些特性，但过多的js存在于移动app中会得不偿失。 Android+HTML5的混合开发模式对于移动端Web项目开发已经成为市场的主流和趋势，与此同时这项技术还存在着一些问题，需要不断的进行改进和完善。 1.2.6 研究现状总结 总而言之，Android操作系统在移动市场仍居主流，HTML5也为用户带来崭新的特性，Hybrid混合开发模式也逐渐成为移动Web开发的主流设计模式，大量的市场应用都成功的应用和推广了Android+HTML5。正是在这种背景下，“认我测”在线认证检测系统率先填补了移动端认证检测领域的产品空缺，采取了Hybrid混合开发模式。同时，利用Android+HTML5相结合开发移动端Web项目尚处于应用阶段，仍然存在很多问题，还不够成熟和完善。如何将这二者更有效的结合使用，并解决过程中存在的问题，提高项目开发的效率以及节约开发成本，是一个需要研究探索的问题，这也是本课题的意旨。 1.3研究目标与内容 1.3.1多窗口浏览器模式的实现机制 深入挖掘Webview作为类浏览器视图窗口与传统PC端浏览器的区别，针对安卓端同一视图区域单一运行Webview的特性，通过在原生态安卓中启用Fragment视图加载不同视图页面，在外部Activity中对Fragment进行管理控制。同时调整窗口加载及操作模式，适应移动端相关操作从而实现程序中加载多个Webview视图窗口并可以随意切换，实现类浏览器多窗口加载资源并交互的模式。 1.3.2跨域交互即缓存处理方法 针对Webview不支持多窗口间跨域访问的问题，重写缓存处理方式以替代网页端会话级缓存机制，模拟web端本地存储localStorage对本地缓存的处理方法，诸如setItem()、getItem()、removeItem()以及clear()，通过将持久化数据存储在移动端本地数据库来模拟网页端数据持久化存储，实现多Webview间跨域交互访问以及缓存数据保存和处理。 通过维护Webview的历史栈，根据需求进行过滤跳转或者重新加载页面。若当前为重定向后的链接，那么回退的时候就需要忽略上一级的链接，不使用Webview自带的回退方法goBack(),相对地移除重定向和重定向后的url,获取到初始页面链接后自行进行loadUrl()操作. 1.3.3页面自适应机制，即设备自适应与浏览器自适应机制 利用Viewport来控制页面的缩放比例、页面的初始大小，针对不同分辨率的移动设备实现网页页面自适应。通过渐进增强以及优雅降级机制来控制不同版本、不同浏览器之间的兼容问题，以及利用JavaScript库辅助修正相应的样式问题，从而实现浏览器适配的机制。 1.3.4 “认我测”质检服务平台的设计和实现 移动客户端通过安卓与HTML5结合开发设计委托方和质检方app，通过原生态安卓框架外壳嵌入Webview渲染加载页面，添加Java接口与消息会话模块，通过移动端Sqlite操作数据重写localStorage来实现缓存机制，利用Fragment视图层控制Webview的切换与运行来展现主要的功能模块—委托方App：首页模块、订单模块、消息模块和个人模块；质检方App—订单模块、消息模块和个人模块。 服务器端采用J2EE的SSH框架搭建项目，通过微信公共账号链接Html页面，为用户提供多种系统访问途径，增强了系统的可扩展性，为用户带来便利。 1.4 本文的结构安排 本文共分为七个章节。 第一章是绪论部分，介绍课题的研究背景，指出课题的研究意义。然后通过对HTML5研究、Android移动Web开发技术研究以及Hybrid开发问题研究来介绍该课题在国内外的研究现状。最后说明本文的研究目标与内容，以及论文的结构安排。 第二章介绍多窗口类浏览器模式策略的设计与实现。针对现有移动端单一窗口存在的不足，提出类浏览器多窗口解决方案，并对多窗口浏览器模式进行设计 第三章其次分析Webview的跨域数据交互问题，针对移动端类浏览器内核不支持跨域数据访问的不足，提出本地持久性存储替代web端缓存的解决方案，并对跨域访问模式进行设计。同时分析了页面重定向导致的页面无法正常访问问题，提出采用页面浏览历史栈的管理方案，针对回退时目标页面解析进行相应操作。 第四章是多分辨率多设备页面自适应策略设计。首先分析现有Web页面在移动端不同分辨率和设备显示存在的问题，针对页面难以在不同设备上保持兼容适应的不足，提出页面自适应解决方案，并通过渐进增强以及媒体查询等方式进行设计。 第五章是认我测系统的设计，包括系统的功能需求分析、业务流程展示以及功能模块设计。 第六章是系统的功能测试，介绍了相关的实现环境与工具，并对系统的主要功能模块以及主要解决方案进行了功能验证测试。 第七章是总结展望部分，总结本文的主要工作内容与创新点，并对本文写作与实验过程中的不足及后续研究进行展望。 第二章 多窗口类浏览器设计 2.1 多窗口类浏览器需求分析 2.1.1 Activity简介 在Android中一个Activity是一个应用程序组件，它提供一个屏幕，用户可以为了完成某项任务用来交互，例如拍照、拨号、看地图、发送邮件等。每一个Activity被系统给予一个窗口，在该窗口上面可以绘制用户接口。一个应用程序通常由多个Activities组成，他们通常是松耦合关系。通常首次启动应用程序的时候呈现给用户的Activity被指定为"Main Activity”。为了完成不同的动作，每一个Activity可以启动另一个其他的Activity。一个新的Activity启动，前一个Activity就被终止了，但是系统将Activity保存在一个栈上。当一个新Activity启动，它被推送到栈顶，取得用户焦点。栈的管理符合“后进先出”原则，所以，当用户完成当前Activity然后点击back按钮，它被弹出栈并且被摧毁，然后恢复之前的Activity。 若一个Activity因新的Activity启动而停止，系统通过Activity的生命周期回调函数，通知其这种状态转变。一个Activity根据它自己的状态变化可能会收到许多回调函数的通知信息，诸如系统创建、停止、恢复或者摧毁Activity，每个回调都使得开发者得以完成相应状态的指定工作。例如，当停止Activity的时候，应该释放所有大的对象，如网络数据库连接。当Activity恢复时，开发人员可以重新获得必要的资源和恢复被中断的动作。这些状态转换都是Activity的生命周期的组成部分。 2.1.2 Fragment简介 Android 3.0中开始引入Fragments 的概念，可以称为:碎片、片段。其目的是为了解决不同屏幕分辨率下动态和灵活的UI设计，大屏幕如平板、小屏幕如手机。平板电脑的设计使得其有更多的空间来摆放更多的UI组件，而多出来的空间存放UI使得这些组件会产生更多的交互，从而诞生了Fragments。 Fragments 的设计不需要开发者来亲自管理视图层的复杂变化，通过将Activity 的布局分散到Fragment 中，可以在运行时修改Activity 的外观，并且由Activity 管理保存其变化。当一个片段指定了自身的布局时，它能和其他片段配置成不同的组合，在活动中为不同的屏幕尺寸修改布局配置。小屏幕可能每次显示一个片段，而大屏幕则可以显示两个或更多。Fragment是Activity的界面中的一部分或一种行为。可以把多个Fragments组合到一个Activity中来创建一个多面界面并且可以在多个Activity中重用一个Fragment。除此之外，可以把Fragment认为是模块化的一段Activity，它具有自己的生命周期，接收它自己的事件，并可以在Activity运行时被添加或删除。 Fragment不能独立存在，它必须被嵌入到Activity中，而且Fragment的生命周期受到所在的Activity的影响。当Activity暂停时，它拥有的所有的Fragments都被暂停；当Activity销毁时，它拥有的所有Fragments都被销毁。然而，当activity运行时（在onResume()之后，onPause()之前），可以单独地操作每个Fragment，比如添加或删除它们。在执行上述针对Fragment的事务时，可以将事务添加到一个栈中，这个栈被Activity管理，栈中的每一条都是一个Fragment的一次事务。有了这个栈，就可以反向执行Fragment的事务，这样就可以在Fragment级支持“返回”键（向后导航）。 2.1.3 多窗口类浏览器需求 在Android中展现在用户面前的Activity同时只能存在一个，而由于类浏览器内核Webkit的特性，一个Activity中同时只能加载一个Webview用以渲染网页，如果用户想模仿Web浏览器新增一个浏览器标签窗口打开新页面，只能将原来的网页覆盖掉，无法在窗口间来回切换，用户也无法保持原有的浏览器使用习惯。为此，需要利用Activity栈的切换特点，将系统的主要模块分别设计在不同的Fragment上，通过各自的Webview进行加载渲染，在用户需要切换窗口时，通过管理切换Fragment达到目的的实现。 2.2 多窗口浏览器模式的实现机制 2.2.1安卓移动端多窗口浏览器框架 图2.1 多窗口浏览器模式系统框架图 如图4所示，系统安卓移动端由首页、订单、消息以及个人信息四个模块构成，每个模块对应一个视图层Fragment，在安卓Activity运行时一次加载一个视图Fragment，通过底部的原生态菜单栏BottomBar进行视图之间的切换。每个视图Fragment对应同一个位置的Webview类浏览器窗口，通过Webview加载所需要的页面，通过外部的Fragment对Webview的加载以及切换进行控制，从而实现类浏览器多窗口模式。 2.1.2多窗口浏览器模式实现机制 多窗口浏览器模式的实现原理为：安卓外部Activity控制视图层Fragment的加载和切换，Fragment内部加载和控制Webview对页面的渲染，同时调整Web端页面的窗口打开和关闭模式，通过页面重定向进行打开和关闭返回。 多窗口浏览器模式解决两个问题，一是安卓中的类浏览器窗口模式，二是浏览器多标签模式。在移动端的页面加载过程中，类浏览器内核Webview的运行机制为覆盖加载页面，一次运行期间只同时存在一个Webview，与PC端浏览器的运行模式不同，无法通过open打开一个新的浏览器标签页，也无法通过close关闭单个的标签页。为此需要通过loadUrl进行页面重定向，在关闭页面时通过loadUrl反重定向或者通过Webview本身的goBack方法进行回退。移动端的Webview在全局意义上等价于PC端的浏览器，但是通过close关闭的不是一个窗口，而是关闭了整个浏览器。安卓中Activity运行时只能加载一个Webview，因此无法同时展现不同的页面，为此需要通过外部对Webview序列的控制，模拟多窗口显示页面的模式。 在安卓Activity的视图View初始化过程中，实例化需要首次显示的视图层fragment (如首页)，将其放入实例化的视图层管理容器HashMap，并通过changeFragmentFrom Menu方法控制用户对视图层Fragment的切换，将原有的视图层置为等待恢复状态，并激活新的视图层用以在Activity中展现，通过changeFragmentBack控制用户通过回退操作唤醒的首页视图层，以此来控制不同视图层，即类浏览器窗口之间的切换。在相应的Fragment视图层中，初始化视图InitView时渲染加载Webview，同时控制底部的菜单栏，通过Webview加载相应的本地网页或服务器端网页，设置Webview相应的属性进而控制页面由Webview加载，而非默认的系统浏览器加载。为Webview绑定页面与原生态安卓相交互的接口，从而可以在加载的页面内调用安卓的原生态功能。 2.3 模块实现 2.3.1类浏览器模式 该部分主要为安卓中通过Webview渲染加载网页的过程。主要包含以下过程： Fragment布局文件中声明控件Webview，绑定其资源ID，为Webview设置宽度和高度。 （1）在Fragment视图初始化initView部分，利用findViewById()通过资源ID获取到Webview控件，对其进行初始化，同时设置相关的webSettings属性，让Webview可以运行JavaScript脚本以及能与本机数据库进行交互。 （2）重写WebViewClient的shouldOverrideUrlLoading()函数，让应用程序的Webview直接加载网页内容，而不调用外部的浏览器。 （3）重写Webview网页对话框，构建一个Builder用以显示网页中的对话框，在点击确定按钮之后，继续执行网页中的操作，同时关闭Builder对话框。 （4）为JavaScript创建安卓接口。通过addJavaScriptInterface为Webview绑定底层Java接口，同时提供相应的接口方法名以及在页面中可以调用的句柄名称，通过该句柄和方法名，即可在Html5页面的JavaScript中访问该底层的Java方法，实现对页面上部和底部的系统外壳的展示管理。 （5）通过loadUrl进行对目标页面的渲染加载，可以加载访问服务器端的页面，也可访问放置在项目内部的页面文件，该模式需要将相应页面放置于系统的assets目录下。相对而言服务器端页面更加常用，也便于维护。 2.3.2多窗口类浏览器模式 图2.2 多窗口类浏览器模式原理图 （1）创建各个主功能模块的视图类Fragment，分别为主界面模块HomeFragment、订单模块OrderFragment、聊天咨询模块MessageFragment以及个人中心模块PersonalFragment，继承自基类BaseFragment。 （2）每个Fragment视图类中声明并初始化相应的Webview组件，对其进行属性设置，为其绑定JavaScript接口并覆盖渲染加载页面的方法，绑定相应的需要在页面调用的底层Java方法接口。重写默认的页面回退响应事件，对页面访问历史以及目标访问页面进行过滤判断，执行相应的处理方法。 （3）在MainActivity的初始化initView中声明并初始化Fragment管理容器HashMap，初始化主页视图HomeFragment并将其加入容器，设置其为默认加载视图。获取FragmentManager用以维护管理Fragment队列，调用beginTransaction方法开启事务。 （4）重写回退按钮响应事件。当页面回到各自模块的初始页面然后按下回退键时，判断当前模块所在的Fragment，由主页模块后退时，执行确认退出系统操作，若从其他模块进行后退，则回到主页模块。通过底部菜单栏setRadioChecked方法设定当前模块的选中标识。 （5）重写模块间切换的方法changeFragmentFromMenu，开启事务，对模块标识ftag进行判断操作，根据用户点击的模块图表将相应的模块视图Fragment通过onResume()进行恢复，同时通过show()将该模块进行展示，从Fragment管理容器中将主页模块以外的Fragment移除。将带有oflag暂停标识的Fragment视图进行暂停处理，通过hide隐藏取消该视图的展示。 （6）在各自的Fragment模块视图类中重写onResume方法，用以在模块恢复时进行用户是否登录判断。对Webview渲染加载的页面进行分析，判断是否包含index初始页面标识。根据flag标识进行是否需要登录操作，flag为1表示从其他Fragment跳转到该模块的Fragment视图并需要用户登录。 以上就是多窗口类浏览器模式的实现主要环节，通过Webview加载渲染服务器资源页面，控制碎片视图Fragment展现各自模块的Webview，在MainActivity对碎片容器以及碎片视图之间的切换进行管理控制，从而完成多窗口类浏览器模式的实现。 2.4 本章小结 本章分析并介绍了安卓中Activity的基本性质，对碎片视图Fragment进行了相关阐述和引出，综合分析了多窗口类浏览器模式的设计需求。随后对多窗口类浏览器模式的框架进行了设计，通过Activity运行管理Fragment的加载和切换，各个模块的Fragment视图独自加载运行相应的Webview，补充和完善不同模块之间切换和回退的业务逻辑。在模块实现部分详细描述了两个关键部分的实现环节，即类浏览器模式和多窗口类浏览器模式，介绍了过程中主要用到的方法以及实现思想。 第三章 跨域交互缓存处理设计 3.1 跨域交互缓存处理需求 3.1.1 缓存技术WebStorage 图3.1 WebStorage示意图 WebStorage 使得网站能够把信息存储到本地的计算机上，并在以后需要的时候进行获取。WebStorage和Cookie类似，区别在于WebStorage是为了更大容量存储而进行设计。Cookie的大小是受限的，并且每次当请求一个新的页面的时候，Cookie都会被发送过去。而WebStorage则存储在计算机上，网站在页面加载完毕后可以通过Javascript来获取这些数据。 WebStorage提供两种类型的API：localStorage和sessionStorage，区别在于localStorage是本地永久性存储的数据，除非显式将其删除或清空，否则将一直保存在本地。sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。两个对象都有共同的操作API。 3.1.2 跨域交互缓存处理需求 WebStorage存储技术针对的是同一个类浏览器Webview，系统在各模块之间由不同的Webview加载渲染，通过不同的Fragment进行管理，因此模块之间无法共享数据。然而通过多窗口浏览器模式构建的系统模块之间经常需要进行数据交互，如用户登录信息以及产品相关信息，Webview由于其特性仅支持自身内部的缓存数据交互。同Webview内不断的覆盖加载新页面以及发生页面回退时可以对缓存数据提供便捷高效的数据保存，使得在页面加载的过程中可以便利的处理需要交互的数据；相对的不同的Webview之间无法共享数据，无论是会话级缓存还是持久化缓存。为此需要重写web端的持久化存储localStorage，将交互的数据保存到移动设备本地数据库。 3.1.3 页面回退管理需求 对于初始页面为A，点击某个链接跳转到B（http://xxx.com.cn/）,B页面重定向到C页面(http://xxx.com.cn/website/index.Html)，当调用webview.goBack()时，页面回退到B，然后接着会重定向回C页面。这样会导致两个问题:无法回退到Webview的初始页面A以及无法正常退出Activity或者Fragment(只有还未加载完C时进行回退才能退出页面)。为此需要引入历史记录栈，对页面访问历史进行管理，在回退事件中判断该加载页面是否需要重定向并执行相应的操作。 3.2 缓存处理机制 3.2.1 跨域缓存处理 在移动端数据库Sqlite操作类LocalStorage中定义相应的数据库连接属性、创建和更新的操作以及数据库操作单例Instance，在视图访问基类BaseFragment中定义覆盖web端持久化存储localStorage的核心交互类LocalStorageJavascriptInterface。获得数据库操作单例，并覆盖localStorage对缓存的常用处理方法取值getItem(),修改值setItem(),删除值removeItem()以及清空缓存clear()。将页面上获得的数据键值对存入数据库，对其进行更新删除以及返回给页面使用。在Webview初始化时进行页面与后台交互绑定addJavaScriptInterface，并在页面初始化init过程中将页面的默认localStorage操作更换成覆盖重写的方法，即可在页面进行跨域访问时交互相应的数据。 跨域交互的缓存处理机制如图5所示： 图3.2 缓存处理机制原理图 3.2.2页面回退管理 安卓的回退按钮一般用于返回上一级菜单，不过在浏览器页面加载过程中却不能理想地返回上一级页面，默认的回退按钮是针对Activity的回退，对于Webview来说，回退按钮会致使浏览器调用finish()而结束自身的运行，因此需要覆盖Activity的onKeyDown()事件，在方法内部重新对浏览页面进行管理。 在页面的新建关闭以及重定向时，Webview的页面回退goBack()会受到干扰，不能正常回到前一个页面，甚至会发生前后两个页面间来回切换后退的死循环，并影响模块间的后退返回。为此需要对历史访问页面进行管理，采用如下实现方案。 在Fragment视图声明时定义一个用于管理保存历史浏览记录的历史栈ArrayList,将系统初始加载界面加入列表。在此后的页面加载过程中，每次加载页面都将其加入历史栈，在系统回退响应事件中，判断页面是否为重定向页面，如果为重定向页面，则移除历史栈中最后两个链接，加载操作后历史栈的最后一项；否则移除历史栈中最后一项，加载操作后历史栈的最后一项。 页面回退方案的流程图如图3.3所示： 图3.3页面回退管理机制图 3.3 模块实现 3.3.1跨域缓存机制的主要实现 图3.4 重写LocalStorage类示意图 （1）重写LocalStorage类。让LocalStorage继承自SQLiteOpenHelper类，声明LocalStorage对象实例以及其他数据库连接配置信息，如数据表名称、表中存储的数据Id与值Value、数据库名称、创建数据库语句等。通过Singleton单例模式维护LocalStorage实例，重写创建数据库和更新的相关操作。 （2）添加LocalStorage的底层JavaScriptInterface，供服务器资源页面进行访问。通过LocalStorageDBHelper对象获取到单例localStorage，声明上下文对象和SQLiteDatabase对象。重写HTML5存储技术LocalStorage的关键缓存数据操作方法getItem()、setItem()、removeItem()以及clear()。 图3.5 重写WebStorage核心方法示意图 1.重写getItem()，根据传入参数key获取相应的value值 ①判断传入的key是否为空。 ②若key不为空，通过localStorageDBHelper的getReadableDatabase()方法实例化数据库对象database。执行sqlite的数据库查询操作，返回数据库结果操作游标。 ③根据游标的moveToFirst判断查询结果是否为空，返回相应的value结果。关闭数据库连接。 2.重写setItem()，根据传入的参数key和相应值value更新数据库 ①判断传入的key和value是否为空，通过getItem()获取更新前的值。 ②实例化数据库对象database。声明ContentValues对象并将key和value相应赋值。判断更新前和key对应的值是否存在，若存在执行数据库的更新操作；若不存在，执行数据库的插入操作。关闭数据库。 3.重写remove() ①判断传入的key是否为空 ②实例化数据库操作对象，执行相应的数据库删除操作，关闭数据库 4.重写clear() 实例化数据库操作对象，执行数据库删除操作，清空整张数据库表。 在Fragment视图中初始化Webview时，通过addJavaScriptInterface为其绑定重写的底层LocalStorage操作接口，并将操作句柄设置为localStorage。设置webSettings属性，通过setDomStorageEnabled与setDatabaseEnabled启用本地存储功能。 在服务器资源页面JavaScript方法中，尝试用句柄LocalStorage替换window默认的localStorage。若发生异常，说明LocalStorage没有被添加至webview。然后即可像通常HTML5的localStorage对缓存数据进行操作。 3.3.2.页面回退管理的实现 （1）在MainActivity中覆盖模块间的回退响应事件。当模块页面回退至各自的初始页面时，点击回退按钮执行相应的模块切换策略，若该模块为主界面模块，则弹出退出系统确认框供用户选择是否退出；若为其他模块则将菜单栏切换到首页模块。 （2）在各自的Fragment中覆盖模块内部的回退响应事件。在页面初始化时定义并维护一个存放历史访问页面的历史栈loadHistoryUrls （ArrayList），把初始页面url加入到历史栈中，在覆盖加载方法shouldOverrideUrlLoading中将待渲染加载的页面加入到历史栈中。 （3）在Fragment内部的回退事件处理方法中，判断是否可以执行返回操作。然后判断历史栈存存放页面的前一页是否包含初始重定向页面，若包含该页面则移除加载栈中的最后两个链接，否则移除加载栈中的最后一个链接。最后加载重定向之前的页面。 3.4本章小结 本章首先分析了HTML5标准下缓存处理策略WebStorage，其包含本地存储LocalStorage与会话存储SessionStorage，并提供了相应的介绍和说明。然后分析了跨域数据交互问题问题存在的原因以及页面回退管理存在的问题。由于Webview的数据封闭性，不同的模块Webview之间无法共享访问数据，使得不同的模块无法正常交互，为此采用重写LocalStorage的方式，通过本地Sqlite数据库操作模拟HTML5中缓存的操作，重写LocalStorage关键的操作方法setItem()、getItem()、removeItem()以及clear()，并为Webview绑定相应的底层Java方法接口，在服务器页面资源中用重写的LocalStorage替换默认的localStorage，从而完成跨域数据的调用访问操作。由于页面的重定向作用，页面回退时会反复加载到重定向后的页面，导致页面无法正常回退，因此通过维护历史栈的方式，在页面回退时对回退目标页面进行分析判断，并执行相应的回退管理方法，从而使得模块内部的页面以及模块之间可以正常地进行返回操作。 第四章 页面自适应机制设计 针对移动设备分辨率和屏幕大小、设备型号迥异的现状，本章将在分析现有页面跨浏览器兼容方案的基础上，同时结合移动端对不同分辨率设备的支持特性，分析与设计跨机型、跨分辨率、跨浏览器的页面自适应机制。 4.1页面兼容策略 为了使页面能够适应不同版本的浏览器内核，诸如IE、Chorme、Firefox等，CSS3引入了两种常用的设计策略，即优雅降级和渐进增强。 优雅降级指的是在页面设计开始即构建页面的完整功能，然后针对不同的浏览器进行测试和修复。该观点认为应该针对那些最高级、最完善的浏览器来开发网站，同时把那些被认为过时或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段。在这种设计思想下，旧版的浏览器通常被认为仅能提供简单却功能没有大碍的页面浏览体验。虽然可以做一些小的调整来适应某个特定的浏览器，但由于这些调整并非开发过程中关注的焦点，因此浏览器间呈现的差异通常将被直接忽略。 渐进增强指的是在页面设计开始只构建页面的最少特性功能，然后不断针对各高级浏览器追加额外功能。渐进增强思想认为应该先让网站能够正常工作于尽可能旧的浏览器上，然后不断为它在新型浏览器上实现更多的增强和改进。随着时间的推移，当更多的用户逐渐开始升级浏览器，同时浏览器本身的支持度也不断提升时，就会有越来越多的用户体验到这些增强和改进，无需为了一个已经成型的网站在旧式浏览器下正常工作而做逆向开发。渐进增强观点认为网页的开发应关注于内容本身。这使得渐进增强成为目前一种更为合理的设计范例。 图4.1 优雅降级和渐进增强图例 对于优雅降级，功能衰减的设计从复杂的功能现状开始，不断减少用户体验的供给；而渐进增强则的设计是从一个非常基础的，能够发挥作用的版本开始，并不断地进行扩充，以适应未来环境的需要。功能衰减意味着往回看；而渐进增强则意味着朝前看，同时保证其根基安全牢固。 为了能够给用户提供更好的界面交互体验，同时适应不同版本的浏览器内核，系统采用了部分渐进增强的思想，利用媒体查询为不同的浏览器版本和内核提供相应的展现效果，同时保证基本的页面展现功能。 4.2 页面自适应策略 系统采用部分渐进增强的页面适配思想，以及拥抱流式布局策略，通过视口元素的媒体查询来控制不同分辨率阈值下页面的布局规划，调整页面元素的布局为百分比方式，包括组件宽度、字体以及高度、图片的动态大小来控制相同分辨率阈值范围下不同视口中组件的平滑缩放。同时对HTML5页面的移动端适配属性进行设置控制，针对需要达到的效果设置其Viewport的属性，包括宽和高、页面最初大小、初始缩放比例、屏幕像素密度等。使得系统在Web浏览器端以及移动端都有良好的展示效果。 4.2.1设备自适应 Viewport是指用以展现手机页面的区域。尽管Viewport的可见区域和屏幕大小是匹配的，但是它有着自己的尺寸（dimensions），这一尺寸决定了页面上可见的像素点。一个web页面在扩张到整个屏幕之前占用的像素数据是由Viewport的尺寸来定义的，而不是设备屏幕的尺寸。如一个设备的屏幕宽480像素，但是Viewport宽800像素，那么这个web页面需要在800像素宽的屏幕上才能完全展现。 在HTML5中可以使用 <meta> 标签来为页面定义Viewport 的属性。可以在 <meta> 标签的content 属性中，定义多个Viewport属性。例如，Viewport的高和宽，页面的最初大小，以及目标屏幕分辨率。Content 属性中的每个Viewport性质必须以逗号相隔。通过初始缩放initial-scale和用户调整缩放来控制页面的伸张以适当地填充移动端设备的显示区域。通过target density定义屏幕像素密度来控制安卓浏览器和Webview根据不同屏幕的像素密度对页面进行的缩放。 图4.2 视口属性设置示意图 4.2.2.浏览器自适应 通过拥抱流式布局的来使得页面在不同尺寸屏幕上良好的运行。从手机到电脑，设备的屏幕尺寸层出不穷，很难用传统意义上的统一布局来适应这些变动。拥抱流式布局倡导响应式界面设计，通过媒体查询（@media screen and...）来获得设备特性信息，从而灵活的控制不同尺寸屏幕的浏览器动态的调整页面元素的布局，以适应视口特性的变化。 同时根据“目标元素宽度/上下文元素宽度=百分比宽度”的模式将传统的固定像素式布局改为百分比布局，元素的固定像素宽度转换成百分比宽度。假定整个页面布局的宽度是960px，按照1024px屏幕分辨率做参照，百分比应是960/1024 = 93.75%。其他的组件宽度也可以按照960px为参照计算。若除下来的结果是很长的小数，如340/960 = 0.3541666666666667 ，无须对结果进行四舍五入，这样可以保持最高的精确度，这些小数应尽可能完整保留。 根据“目标元素尺寸/上下文元素尺寸=百分比尺寸”将文字的固定像素大小转换为等量的相对尺寸，现代浏览器默认的字体大小是16px，字体的相对大小用em为单位来表示。若某个div的字体大小为48px，则转化后为48/16=3em。结果为小数时的处理方式同上。 给图片设置阈值以使图片随着视口平滑缩放，为不同屏幕尺寸提供不同的图片，然后针对不同视口宽度修正设计，保证在响应式设计中内容始终优先。图片不是布局元素，它里面不包含子元素。另外，图片还有失真的问题，缩放不当都会造成失真。为此，需要给图片添加样式max-width:100% 以实现弹性图片，因为图片所处的容器可以自动缩放，只需让图片限制在父级的宽度之内，就可以随父级一起缩放。弹性图片仅用max-width无法实现，除此之外还需使用百分比宽度。处理方式同计算布局元素的宽度。在此过程中需要注意图片的失真问题，当用户使用的一个超宽屏幕时，图片被放大到原大小的两倍甚至更多，图片的质量会大幅下降。所以还需为图片设置绝对阈值，即宽度上限，因此一个弹性图片的样式组合应该为：width:30%; max-width:400px。 对于一个使用超宽屏幕的用户，按照正常的页面设计比例，这张图片被放大到了500px，但是现在只能显示最大宽度400px，依然是个问题。为此可以采用另一个组合，把max-width加到图片的父级元素上，从源头上就限制放大的最大值，这样图片与它的相邻元素的比例就不会失调了。这样的设计也是个权衡的结果，因为页面结构千变万化，具体的解决办法，还得分析具体页面。 为了防止放大的过宽，可以通过媒体查询来设置不同分辨率下的阈值。在处理各种浏览器兼容问题时，可以借助Modernizr，一个用于检测浏览器功能的开源JavaScript库，通过Modernizr追加的额外类名来辅助修正样式问题，以及通过检测浏览器是否支持媒体查询来按需加载资源，让老版本IE支持HTML5等。 4.3 模块实现 页面自适应主要的实现方式包含: 4.3.1根据适口属性设计响应式布局： ①加入兼容配置代码 <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">，通过chrome插件GCF（谷歌内嵌浏览器框架）控制IE以Webkit引擎及V8引擎进行样式排版，若用户未安装该插件则以IE最高文档模式进行展
Delphi开发范例宝典目录
第1章　窗体与界面设计　1 1.1　菜单应用　2 实例001　在系统菜单中添加菜单项　2 实例002　带历史信息的菜单　3 实例003　菜单动态合并　4 实例004　像“开始”菜单一样漂亮的菜单　5 实例005　多彩的菜单　6 实例006　可以拉伸的菜单界面　8 1.2　工具栏设计　9 实例007　带背景的工具栏　9 实例008　浮动工具栏　10 1.3　状态栏设计　11 实例009　在状态栏中显示检查框　11 实例010　带进度条的状态栏　12 实例011　状态栏中加入图标　13 1.4　导航菜单界面　14 实例012　OutLook界面　14 实例013　带导航菜单的主界面　15 实例014　图形化的导航界面　16 1.5　特色程序界面　18 实例015　类QQ的程序界面　18 实例016　类似Windows XP的程序界面　20 实例017　以图形按钮显示的界面　21 实例018　以树型显示的程序界面　23 实例019　以XPManifest组件显示界面　24 实例020　动态按钮的窗体界面　25 1.6　特殊形状的窗体　26 实例021　非矩形窗体　26 实例022　建立字体形状窗体　28 1.7　多媒体光盘　29 实例023　自动启动的多媒体光盘程序　29 实例024　为触摸屏程序添加虚拟键盘　30 实例025　触摸屏系统　31 1.8　窗体效果　33 实例026　半透明渐显窗体　33 实例027　窗口颜色的渐变　34 实例028　带背景的窗体　35 实例029　为窗体增加边框　36 1.9　窗体动画　37 实例030　窗体中的滚动字幕　37 实例031　动画显示窗体　38 实例032　制作闪烁的窗体　39 实例033　直接在窗体上绘图　40 实例034　动画形式的程序界面　41 实例035　以时钟显示界面窗体　42 1.10　标题栏窗体　44 实例036　标题栏上的按钮　45 实例037　使窗体标题栏文字右对齐　47 实例038　没有标题栏但可以改变大小的窗口　48 1.11　设置窗体位置　49 实例039　不可移动的窗体　49 实例040　设置窗体在屏幕中的位置　50 实例041　始终在最上面的窗体　51 1.12　设置窗体大小　52 实例042　限制窗体大小　52 实例043　获取桌面大小　53 实例044　组件大小随窗体的改变而改变　53 实例045　在窗口间移动按钮　54 实例046　如何实现Office助手　55 1.13　窗体控制技术　56 实例047　在关闭窗口前加入确认对话框　56 实例048　程序在循环中响应界面操作　57 实例049　使用任意组件拖动窗体　58 实例050　动态创建窗体和释放窗体　59 实例051　修改提示字体及颜色　60 1.14　其他技术　61 实例052　窗口融合技术　61 实例053　给MDI窗体加背景　62 实例054　如何关闭MDI类型窗体中的子窗体　63 实例055　向提示框中添加图标　64 第2章　控件应用　67 2.1　TEdit控件应用典型实例　68 实例056　从右至左输入数据　68 实例057　为TEdit控件添加列表选择框　69 实例058　只允许输入数字的TEdit组件　70 2.2　TSpeedButton控件应用典型实例　71 实例059　在TSpeedButton按钮中显示图标　71 实例060　折行显示按钮标题　72 2.3　TMemo控件应用典型实例　73 实例061　设置TMemo组件的边界　73 实例062　TMemo组件的光标定位　74 实例063　得到TMemo中的可见行数　75 2.4　TListBox控件应用典型实例　76 实例064　在TListBox组件间交换数据　76 实例065　为TListBox添加水平滚动条　77 实例066　将数据库数据添加到组合框中　78 实例067　借助绑定控件实现数据选择录入　79 2.5　TListView控件应用典型实例　80 实例068　TListView列表拒绝添加重复信息　80 实例069　将数据库数据添加到TListView控件　82 实例070　用TListView控件制作导航界面　83 实例071　在TListView控件中对数据排序或统计　84 实例072　在TListView组件中绘制底纹　86 实例073　在列表视图中拖动视图项　87 2.6　TTreeView控件应用典型实例　88 实例074　将数据库数据显示到树视图中　88 实例075　用TTreeView控件制作导航界面　90 实例076　TTreeView组件遍历磁盘目录　91 实例077　TTreeView组件在数据库中的应用　92 2.7　TStringGrid控件应用典型实例　94 实例078　程序运行时对
GAME，图形处理/多媒体

1,183

社区成员

14,336

社区内容

发帖
与我相关
我的任务
社区描述
Delphi GAME，图形处理/多媒体
社区管理员
  • GAME，图形处理/多媒体社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章