手机网站开发的一些总结 - JavaScript,HTML5,手机版 - web - ITeye论坛
手机网站开发的一些总结
锁定老帖子
精华帖 (0) :: 良好帖 (3) :: 新手帖 (0) :: 隐藏帖 (0)
等级: 初级会员
来自: 长春
发表时间：&&
最后修改：
相关知识库：
手机版网站起码要实现一些基本的功能吧：
1.页面的适用性问题。对于移动终端，有不一样的分辨率与屏幕尺寸，如果还像电脑端的设计还限制网页的宽度为1003px或其他像素值，字体大小还用12px或14px，那么，不一样的终端的效果差别会很大。所以这里，最好让网页的宽度自适应屏幕，还好，w3c在设计html的时候为我们考虑了这一点，只需一句话，就可以搞定，就是加上&meta name="viewport" content="width=device-width"/&,对于字体的话，我们就用em或ex为单位就好
2.版本制作问题。移动页面往往针对不同的手机设置不同的版本，一般有精简版，标准版，3G版，触屏版，智能手机版等等，这些除了在页面设计上有不同外，页面语言也会不同的。精简版采用wap 1.0 的wml脚本编写，这个通用性以前很强，很多国产手机都支持这个语言的，但这个语言是很精简的。标准版的一般可以采用wap 2.0技术，对应的脚本语言是xhtml mp(xhtml mobile profile)，这个语言是xhtml的子集，这个并且支持大部分的css,基本上和电脑版的差不多，但一般不能用js，这是考虑到这些手机是不支持js的。对于智能手机版，由于现在的智能手机都支持js，这个版本的制作上就简单多了，不过，又由于大部分智能手机（基本上除去塞班手机，包括Android,ios,wp7等）都支持Html5，因此，智能手版可以采用html5来制作。
3.版本控制问题。可能这部分是比较不好解决的，怎么智能判断手机的最佳版本并跳转，可以从这几个方面考虑。一方面，可以想办法得到手机的操作系统，比如，Android的，ios的，就可以跳转到html5版了，windows系统，毫无疑问电脑版，获得手机系统，可能通过得到手机型号，现在的方法是通过浏览器的UA（user agent)，获得手机的一些信息，简单一点的，直接可以通过UA判断手机的制造产商。要想获得更多的信息，就得有一个数据库，因为不同手机型号会有不一样的UA信息，世界上的手机有很多，自己要想做一个这样的数据库还是很难的，不过，已经有人为我们做好了这样的数据库，或者更方便的，做好了一个识别手机适用最佳版本的函数库，这里我推荐用Wurfl。另一方面，可以通过页面的脚本来判断浏览器对js和html5的支持，代码如下
&?xml version="1.0" encoding="UTF-8"?&
&!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&meta name="viewport" content="width=device-width"/&
&title&版本控制&/title&
&script type="text/javascript"&
window.onload = function(){
//检测是否支持js
try{//检测是否支持html5
document.getElementById("c").getContext("2d");
document.location = '支持html5版的链接';
}catch(e){//否则跳到支持js版
document.location = '支持js版';
&canvas id='c'&&/canvas&
如果你仅仅想开发一个版本，只是判断一下是不是移动客户端，这里引用一段discuz! x2的代码
&?php
function checkmobile() {
global $_G;
$mobile = array();
static $mobilebrowser_list =array('iphone', 'android', 'phone', 'mobile', 'wap', 'netfront', 'java', 'opera mobi', 'opera mini',
'ucweb', 'windows ce', 'symbian', 'series', 'webos', 'sony', 'blackberry', 'dopod', 'nokia', 'samsung',
'palmsource', 'xda', 'pieplus', 'meizu', 'midp', 'cldc', 'motorola', 'foma', 'docomo', 'up.browser',
'up.link', 'blazer', 'helio', 'hosin', 'huawei', 'novarra', 'coolpad', 'webos', 'techfaith', 'palmsource',
'alcatel', 'amoi', 'ktouch', 'nexian', 'ericsson', 'philips', 'sagem', 'wellcom', 'bunjalloo', 'maui', 'smartphone',
'iemobile', 'spice', 'bird', 'zte-', 'longcos', 'pantech', 'gionee', 'portalmmm', 'jig browser', 'hiptop',
'benq', 'haier', '^lct', '320x320', '240x320', '176x220');
$useragent = strtolower($_SERVER['HTTP_USER_AGENT']);
if(($v = dstrpos($useragent, $mobilebrowser_list, true))) {
$_G['mobile'] = $v;
$brower = array('mozilla', 'chrome', 'safari', 'opera', 'm3gate', 'winwap', 'openwave', 'myop');
if(dstrpos($useragent, $brower))
$_G['mobile'] = 'unknown';
if($_GET['mobile'] === 'yes') {
function dstrpos($string, &$arr, $returnvalue = false) {
if(empty($string))
foreach((array)$arr as $v) {
if(strpos($string, $v) !== false) {
$return = $returnvalue ? $v :
var_dump(checkmobile());//如果是移动端返回true，否则false
4.手机版本的大小问题。一般来说，对于精简版和普通版的手机网页，我们是做得越精简越好，能省的代码最好省去，毕竟现在手机流量对用户来说还是很宝贵的。比如元素命名，一般页面少的话，命名越短越好，css最好写在一行。css中，有些元素是继承父类的样式的，不用重复定义，善用默认值。
5.浏览器缓存。如果再更新不快的情况下，最好开启浏览器缓存
来自: 上海
发表时间：&&
写的也不错.直接写html5便是.这个是以后网页版和手机版均支持的.手机网页版开发HTML5DEMO:
&?xml version="1.0" encoding="UTF-8"?&&!DOCTYPE html &
&meta content="text/ charset=utf-8" http-equiv="Content-Type" /&
&meta http-equiv="Cache-Control" content="no-cache" /&
&meta name="viewport" content="width=device-width"/&
&meta name="MobileOptimized" content="320"/&
&meta name="copyright" content="Copyright (C) 2011 Sohu." /&
&meta name="description" content="手机网站建设开发案例6yang.net" /&
请登录后投票
zhouxi1987
等级: 初级会员
来自: 南京
发表时间：&&
最近工作也是在做手机页面的开发，感谢楼主总结的经验，为我们这种后来的人铺好了路
请登录后投票
等级: 初级会员
来自: 北京
发表时间：&&
还没接触过手机产品的接触呢，不过以后移动的开发是趋势，看看很受教啊
请登录后投票
等级: 初级会员
来自: 上海
发表时间：&&
总结的很不错！以前也做过一些手机开发，能遇到的问题楼主都总结出来了
请登录后投票
等级: 初级会员
来自: 北京
发表时间：&&
不错，接下来可能就要做一些类似的手机网站了，到时候再来仔细研究~
请登录后投票
跳转论坛:移动开发技术
Web前端技术
Java企业应用
编程语言技术页面模块化实现的条件和基本实现思路 – WEB前端开发
我的图书馆
页面模块化实现的条件和基本实现思路 – WEB前端开发
页面模块化实现的很大的受制于页面的结构和表现；一个统一的页面结构和表现能很好的实现页面的模块话。
比如一个“网友评论”模块这个会在很多地方使用到，比如日志，照片，等等，如果这个“网友评论”模块结果和表现是统一的那么我们就不用重复劳动去重新设计制作页面甚至是行为等等，包括后台的数据存贮。
《》上面总结了页面模块化的优点，《》也提到要做到模块化的前提条件：
为了做到这一点，我们需要有一个设计规则，所有的模块都在这个规则下进 行设计。良好的设计规则，会把耦合密集的设计参数进行归类作为一个模块，并以此划分工作任务。而模块之间彼此通过一个固定的接口（所谓的可见参数）进行交互，除此之外的内部实现（所谓的隐参数）则由模块的开发团队进行自由发挥。
我们应给怎么样建立一套设计规则呢？
首先我们要从页面的表现开始，视觉上我们要采用统一的视觉设计规则，比如：
应用网页栅格化来确定网页布局；
页面标题栏，字体大小，文本间距统一；
表单类的表现统一，比如按钮，文本框等；
图片规格统一；
行为类的弹窗，浮层等表现统一；
其次为模块编写统一的html结构，
要合理使用语言化的标签；
可以保存成代码片段或者单独的html文件等，
如果需要可以加上适当的注释；
考虑扩张性和维护性；
再次编写为模块编写统一的css，比如：
要有统一的命名规则（），当然建议加上模块的命名规则，不过我的建议是在模块的命名规则前加上mode_前缀，例如：
弹出 mode_pop
公共 mode_global,mode_gb
标题 mode_title,mode_tit
提示 mode_hint
菜单 mode_menu
信息 mode_info
预览 mode_pvw
Tips mode_tips
导航 mode_nav
当然你也可以根据你们团队重新命名一套规则；合适的才是最好的
做好基类和拓展类的设计,做好在不同页面模块变化的差异性；比如同一模块在A页面标题的字体是粗体，在B页面标题的字体是细体等等；
将每个模块的css保存成独立的独立的css文件；
如果需要可以加上适当的注释；
考虑扩张性和维护性
接下了为该模块添加行为（js），编写层面向对象的js，提高代码的复用率等等；
最后审视模块间的耦合问题，比如，留言模块和发日志，填表单都会使用到表单元素，按钮，文本框等，那么我认为我们应该把表单样式作为一个独立的css模块，html和js模块还是在原来的模块中。这需要我们对这些模块归类，从而更好，跟方便的的拼装我们的页面，
html模块可以布局模块和功能模块等，比如
按功能分的功能模块，比如：
日志模块：日志列表，日志详细，日志评论（引用评论模块等等），日志发布（引用表单模块等等），日志管理等等
评论模块：评论列表，发表评论（引用表单模块等等），评论管理等等
相册模块：……
工具条模块：……
……等等；
按布局分的布局模块：比如栅格化中的一堆布局组合；
css模块比较复杂大致的
按类别分的公共模块：重置模块（css reset），表单模块，字体模块，文字、图片、图文列表模块，弹窗模块，标题模块，提示模块,应用小图标模块等等；这里模块绝大多数作为功能模块的部件，融入在各个模块中；
布局模块和功能模块可以参照html里的功能模块的拆分；
行为js模块可能就相对简单一点,库模块，功能模块等，功能模块可以参照html里的功能模块的拆分；
合理的模块拆分和拼装在实现页面模块化中其中相对重要的作用，模块拆分和拼装的好可以大大的提高开发和维护的效率，反正甚至会影响到网页模块化的成败，给开发和维护带来相对重大的影响。
这样我们就有了网页模块化的基本实现思路，当然这是建立在设计规则上的，如果我们没有完备的设计规则，那么网页模块化就会变成网页魔鬼化，呵呵。
参考文章：
TA的最新馆藏(Creative Ones)
(雨泽?vampire)
第三方登录：自己开发的手机网页如何调用微信支付
最近做的一个项目，是在手机开发的响应式web，有个微信支付的，但对这方面不是很了解，现在能否实现微信支付？如果能实现，具体需要怎么做？
你需要申请微信支付
微信支付功能目前仅对完成微信认证的服务号开放
首先你需要有个已认证的微信服务号
然后申请开通微信支付
然后把官方给的微信支付demo跑起来
然后整合到自己的项目里
--- 共有 3 条评论 ---
好的。谢谢
: 对，要不为啥叫微信支付
必须是在微信里打开的网页才能用微信支付吗
你参考下这个：/txw1958/p/weixin-jsapi-pay.html
/zhangs1986/p/4043987.html
敢问楼上你们做出来了吗？据我所知，只有京东小米在非微信浏览器打开的时候才有微信支付吧。给你把微信支付，公众服务号都开了。这个也只是在微信公众平台（微信浏览器）付款把。