当前访客身份：游客 [
：引用来自“davidzwb”的评论int fflush(FILE *st...
：int fflush(FILE *stream); DESCRIPTION For out...
：你好 ，我是一家图书公司的编辑，公司诚聘兼职作...
：+10086 感谢
：引用来自“和雨冰风”的评论 无聊呵，当时的确耗...
：引用来自“DYZ”的评论 lookup smtp.example.co...
今日访问：1
昨日访问：45
本周访问：46
本月访问：339
所有访问：10841
用ThinkPHP3.2.2框架做手机和PC端浏览器的切换
发表于8个月前( 08:57)&&
阅读（1000）&|&评论（）
0人收藏此文章,
ThinkPHP搭建手机版网站:
这篇文章（肯定不是基3.2.2讲的）是在框架入口通过判断手机还是PC访问来决定app的路径，这样，我手机web和pc就不能共用MVC三层了。
-----------------------------------------------------------------------------------------------------------------
以下是在ThinkPHP官网找到的，也是网友提供的解决方案，有两种
一、TP3.2将 ismobile() 加入到｛/Application/Common/function.php｝,TP3.1加入到｛项目/Common/common.php｝
function&ismobile()&{
&&&&//&如果有HTTP_X_WAP_PROFILE则一定是移动设备
&&&&if&(isset&($_SERVER['HTTP_X_WAP_PROFILE']))
&&&&&&&&return&
&&&&//此条摘自TPM智能切换模板引擎，适合TPM开发
&&&&if(isset&($_SERVER['HTTP_CLIENT'])&&&'PhoneClient'==$_SERVER['HTTP_CLIENT'])
&&&&&&&&return&
&&&&//如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息
&&&&if&(isset&($_SERVER['HTTP_VIA']))
&&&&&&&&//找不到为flase,否则为true
&&&&&&&&return&stristr($_SERVER['HTTP_VIA'],&'wap')&?&true&:&
&&&&//判断手机发送的客户端标志,兼容性有待提高
&&&&if&(isset&($_SERVER['HTTP_USER_AGENT']))&{
&&&&&&&&$clientkeywords&=&array(
&&&&&&&&&&&&'nokia','sony','ericsson','mot','samsung','htc','sgh','lg','sharp','sie-','philips','panasonic','alcatel','lenovo','iphone','ipod','blackberry','meizu','android','netfront','symbian','ucweb','windowsce','palm','operamini','operamobi','openwave','nexusone','cldc','midp','wap','mobile'
&&&&&&&&);
&&&&&&&&//从HTTP_USER_AGENT中查找手机浏览器的关键字
&&&&&&&&if&(preg_match("/("&.&implode('|',&$clientkeywords)&.&")/i",&strtolower($_SERVER['HTTP_USER_AGENT'])))&{
&&&&&&&&&&&&return&
&&&&//协议法，因为有可能不准确，放到最后判断
&&&&if&(isset&($_SERVER['HTTP_ACCEPT']))&{
&&&&&&&&//&如果只支持wml并且不支持html那一定是移动设备
&&&&&&&&//&如果支持wml和html但是wml在html之前则是移动设备
&&&&&&&&if&((strpos($_SERVER['HTTP_ACCEPT'],&'vnd.wap.wml')&!==&false)&&&&(strpos($_SERVER['HTTP_ACCEPT'],&'text/html')&===&false&||&(strpos($_SERVER['HTTP_ACCEPT'],&'vnd.wap.wml')&&&strpos($_SERVER['HTTP_ACCEPT'],&'text/html'))))&{
&&&&&&&&&&&&return&
&&&&return&
二、TP3.2在｛Application/Common/Controller/FrontendController.class.php｝，加入如下代码(ps:FrontendController是我的前端控制器，BaseController是我的基本控制器)
class&FrontendController&extends&BaseController&{
Public&function&_initialize(){
&&&&&&&&//移动设备浏览，则切换模板
&&&&&&&&if&(ismobile())&{
&&&&&&&&&&&&//设置默认默认主题为&Mobile
&&&&&&&&&&&&C('DEFAULT_THEME','Mobile');
&&&&&&&&//............你的更多代码.......
TP3.1在｛项目/Lib/CommonAction.php｝，或者在你的公共控制器中加入如下代码
Class&CommonAction&extends&Action{
&&&&Public&function&_initialize(){
&&&&&&&&//移动设备浏览，则切换模板
&&&&&&&&if&(ismobile())&{
&&&&&&&&&&&&//设置默认默认主题为&Mobile
&&&&&&&&&&&&C('DEFAULT_THEME','Mobile');
&&&&&&&&//............你的更多代码.......
三、其它控制器都继承 FrontendController(TP3.2)或者CommonAction(TP3.1)这里如果没有其它特别的模板配置，在Application/Home/View文件夹里新建Mobile文件夹，放入写好的移动版 index.html文件，设置Chrome浏览器为手机UA，打开首页，此时就会自动显示手机版主页模板。:)
通过js判断，跳转到手机版域名。
&script&type="text/javascript"&
(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge&|maemo|midp|mmp|netfront|opera&m(ob|in)i|palm(&os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows&(ce|phone)|xda|xiino/i.test(a)||/90|3gso|4thp|50[1-6]i|770s|802s|a&wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r&|s&)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1&u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(&i|ip)|hs\-c|ht(c(\-|&|_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(&|\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(&|\/)|klon|kpt&|kwc\-|kyo(c|k)|le(no|xi)|lg(&g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|&|o|v)|zz)|mt(50|p1|v&)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v&)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|&)|webc|whit|wi(g&|nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://填写你的wap网址');
最后我的方案
我的方案极具破坏性将会影响今后的框架升级，大致就是把上述中ismobile方法加入/ThinkPHP/Common/functions.php 中，然后在/ThinkPHP/Library/View.class.php的167用上ismobile这个方法进行判断，是手机的在view的路径上加一个前缀“m_”(view中一个内容放两个，具体如:index和m_index)
其实我只是没想好该怎么新增一个类，以及放在哪里...
补充(我的最终方案)
今天有点心不甘于是重新写了一套方案，把ThinkPHP3.2.2的帮助文档关于目构结构再看了一遍，于是想出了一套没有对原框架破坏的方案；好处就是以后框架升级没什么影响.ps:若是下版框架作很duo的改动那就没办法了。
1.目录结构如下：
我的要求是：以上两个view是公用model和controller的；
2.在Application/Home/Common/目录下新建一个function.php的文件，代码如下：
function&ismobile()&{
&&&&//&如果有HTTP_X_WAP_PROFILE则一定是移动设备
&&&&if&(isset&($_SERVER['HTTP_X_WAP_PROFILE']))
&&&&&&&&return&
&&&&//此条摘自TPM智能切换模板引擎，适合TPM开发
&&&&if(isset&($_SERVER['HTTP_CLIENT'])&&&'PhoneClient'==$_SERVER['HTTP_CLIENT'])
&&&&&&&&return&
&&&&//如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息
&&&&if&(isset&($_SERVER['HTTP_VIA']))
&&&&&&&&//找不到为flase,否则为true
&&&&&&&&return&stristr($_SERVER['HTTP_VIA'],&'wap')&?&true&:&
&&&&//判断手机发送的客户端标志,兼容性有待提高
&&&&if&(isset&($_SERVER['HTTP_USER_AGENT']))&{
&&&&&&&&$clientkeywords&=&array(
&&&&&&&&&&&&'nokia','sony','ericsson','mot','samsung','htc','sgh','lg','sharp','sie-','philips','panasonic','alcatel','lenovo','iphone','ipod','blackberry','meizu','android','netfront','symbian','ucweb','windowsce','palm','operamini','operamobi','openwave','nexusone','cldc','midp','wap','mobile'
&&&&&&&&);
&&&&&&&&//从HTTP_USER_AGENT中查找手机浏览器的关键字
&&&&&&&&if&(preg_match("/("&.&implode('|',&$clientkeywords)&.&")/i",&strtolower($_SERVER['HTTP_USER_AGENT'])))&{
&&&&&&&&&&&&return&
&&&&//协议法，因为有可能不准确，放到最后判断
&&&&if&(isset&($_SERVER['HTTP_ACCEPT']))&{
&&&&&&&&//&如果只支持wml并且不支持html那一定是移动设备
&&&&&&&&//&如果支持wml和html但是wml在html之前则是移动设备
&&&&&&&&if&((strpos($_SERVER['HTTP_ACCEPT'],&'vnd.wap.wml')&!==&false)&&&&(strpos($_SERVER['HTTP_ACCEPT'],&'text/html')&===&false&||&(strpos($_SERVER['HTTP_ACCEPT'],&'vnd.wap.wml')&&&strpos($_SERVER['HTTP_ACCEPT'],&'text/html'))))&{
&&&&&&&&&&&&return&
&&&&return&
3控制器的处理，我是新建一个控制器类(Application/Home/Controller/HomeController.class.php)让它继承Think\Controller下的Controller公共类，然后让所有的控制去继承我这个新建的控制器
HomeController.class.php负责对手机还是PC进行判断,代码如下：
namespace&Home\C
use&Think\C
class&HomeController&extends&Controller&{
&&&&public&function&_initialize(){
&&&&&&&&if&(ismobile())&{
&&&&&&&&&&&&//设置默认默认主题为&Mobile
&&&&&&&&&&&&C('DEFAULT_V_LAYER','Mobile');
然后就是像我的index控制器（IndexController.class.php）代码如下：
namespace&Home\C
class&IndexController&extends&HomeController&{
&&&&public&function&index(){
&&&&&&&&$this-&display();
okay,it's over.
1)">1)">1" ng-class="{current:{{currentPage==page}}}" ng-repeat="page in pages"><li class='page' ng-if="(endIndex<li class='page next' ng-if="(currentPage
相关文章阅读当前访客身份：游客 [
已有文章 2046 篇
当前位置：
关于语义化 HTML 以及前端架构的一点思考
英文原文：
0人收藏此文章,
推荐于 2年前 (共 18 段, 翻译完成于 09-05) ()
参与翻译(11人)：
, , , , , , , , , ,
这是一篇我喜欢的思想，经验，理念，以及过去几年中我所试验的理念的集合。它覆盖了HTML语义，前端架构的组件和方法，类命名模式，和HTTP内容压缩。
我们不会停止探索 而我们一切探索的终点 将会到达我们出发的地方 于是我们第一次认识了这个地方。
T.S. Eliot — “小吉丁”
&翻译的不错哦!
语义是对标记与符号之间的关系，以及它们的含义的研究。在语言学中，这主要是对语言中的符号（如单词，短语，或声音）意义的研究。在前端web开发的上下文中，语义大多是与元素，属性，和属性值（包括像Microdata之类的扩展）的一致认同意义相关。这些认同意义通常在规范中被定义概念，它们可以帮助程序员（也就是人类）更好的理解网站中信息的不同方面。但是，即使是规范化以后，元素，属性，和属性值的语义还是受制于开发者对其的适应与吸收。这可能会导致后续对正式认同语义的修改（这也是一个）。
&翻译的不错哦!
区别不同类型的HTML语义
编写“语义HTML”原则是现代专业前端开发的基础之一。大部分语义关于存在的本质属性或是期望的内容（例如h1element,langattribute,emailvalue of thetypeattribute, Microdata）。
然而，不是所有的语义都要源于内容。Class名不能是“非语义”（unsemantic）的。无论使用什么名字，都要有意义、有目的。Class名的语义可以和那些HTML元素不一样。 我们可以统一利用“全局”的语义命名HTML元素、某些HTML属性、微数据等等，以免和“本地”的网站/应用专属的常常包含在属性值内的语义相混淆，比如theclassattribute。
&翻译的不错哦!
尽管在&重复的认为“最佳的实践” 如下…
…作者鼓励用&[class attribute] 值来描述内容的显示，而不是描述的内容所需的表现值。
…没有内在的理由这样做。事实上，它往往是大型网站或应用程序工作时的一个障碍。
内容层语义已经担任HTML元素和其他属性。
类名很少或根本没有赋予语义有用的信息给计算机或浏览，除非它的一小部分（计算机可读）约定的名字 - 微格式的部分。
类名称的主要目的是为CSS和JavaScript设置钩子。&如果你不需要给你的web文档添加演示和行为，那么你可能不需要在你的HTML文件中使用classes。&
类名应该提供有用的信息给开发商。当你读一个DOM代码段的时候，有助于了解一个特定的类的名字是要干什么，特别是在前期与多个开发团队，包括非HTML组件工作的人。
以这种非常简单的例子：
&div class="news"&
&h2&News&/h2&
[news content]
&/div& 从上面的例子很明显的看出，类名news并没有告诉你任何内容。它没给你组件的组织结构的任何信息，它不能用于说明内容是不是“新闻”。类名的语义与内容的性质已经减少的关联，架构功能已经变小，或者也很容易让其他开发者使用。
&翻译的不错哦!
内容无关的类名
另一种可选的方法是在设计中从重复结构和功能模式中派生类名的语义。大多数可重用的组件都带有与内容无关的类名。
我们不应该害怕在清晰明确的层级间建立联系，而不是让类名严格地反映特定的内容。这样做不会让类变得“没有语义”，它仅仅意味着它们的语义不是从内容中派生出来的。如果附加的HTML元素帮助创建鲁棒性强，柔软度大，可重用的组件，我们就不要害怕把这些元素包含进来。这样做也不会让HTML变得没有语义，它仅仅意味着你使用了刚好超过标记内容最小所需的元素。
&翻译的不错哦!
组件/模板/面向对象架构的设计宗旨就是开发出一套包含一系列不同类型的可重用组件。在规范的应用程序中，关于类名称的语义，由实用主义者们推动并服务他们的主要目的——提供有意义的，灵活的，可重用的关联供开发者使用。
&翻译的不错哦!
可重用及可组合的组件
可伸缩的HTML/CSS大体上必须依赖于HTML内的层级，这样就可以创造可重用的组件。一个灵活且可重用的组件既不能依赖存在于DOM 树的某个部分，也不能需要使用特定的元素类型。它应该能适用于不同的编辑器并且很容易主体化。如果必要的话，多余的HTML元素（除了那些需要标记内容的元素）可以用来让组价更强壮。所谓的媒体对象就是很好的例子。
&翻译的不错哦!
组件可以很容易的组合受益于类型选择器的废止和支持class。下面的示例展示了btn组件与uilist组件的简易组合。问题是，指定.btn不如指定.uilist（这将覆盖共享属性），uilist组件需要一个锚标记作为子节点。
.btn { /* styles */ }
.uilist { /* styles */ }
.uilist a { /* styles */ }
&nav class="uilist"&
&a href="#"&Home&/a&
&a href="#"&About&/a&
&a class="btn" href="#"&Login&/a&
使用class来修饰子DOM元素是提高易用性、使用uilist来组合其他组件的一种方法。虽然这有助于减少指定规则，主要的好处是可以让你对任何类型的子节点应用结构化的样式。
.btn { /* styles */ }
.uilist { /* styles */ }
.uilist-item { /* styles */ }
&nav class="uilist"&
&a class="uilist-item" href="#"&Home&/a&
&a class="uilist-item" href="#"&About&/a&
&span class="uilist-item"&
&a class="btn" href="#"&Login&/a&
&翻译的不错哦!
JavaScript指定class
使用JavaScript指定class的形式的可以降低风险：组件的主题或结构的改变时破坏对其对应的Javascript。一种有效的方法是：Javascript钩子只使用js-*的特定class，并且一直保持。
&a href="/login" class="btn btn-primary js-login"&&/a&
这样做，你可以减少风险：组件的结构或主题改变时会无意中影响任何必需的JavaScript行为或复杂功能。
&翻译的不错哦!
组件编辑器
组件通常具有与基础组件有些许差别的多种不同外观，比如，一个不同颜色的背景或者边框。有两种主要的模式被用来创建这些不同的组件。我称它们为“单类”模式和“多类”模式。
“单类”模式
.btn, .btn-primary { /* button template styles */ }
.btn-primary { /* styles specific to save button */ }
&button class="btn"&Default&/button&
&button class="btn-primary"&Login&/button&
“多类”模式
.btn { /* button template styles */ }
.btn-primary { /* styles specific to primary button */ }
&button class="btn"&Default&/button&
&button class="btn btn-primary"&Login&/button&
如果你使用了预处理器，就可以使用Sass的@extend功能，来缩减一些使用“单类”模式时所涉及的维护工作。可是，即使有预处理器的帮助，我仍然倾向于使用“多类”模式，和在HTML中增加编辑类。
&翻译的不错哦!
我发现这是一个更具伸缩性的模式。例如，用基础的btn组件，给它增添5种类型的按钮和3种额外的尺寸。使用“多类”模式你最终将获得9种可混用匹配的类。但使用“单类”模式你将有24种类。
如果确实需要的话，它给组件做一些上下文的修改也更容易。你或许会想在另一个组件中，对任意一个btn做一些外观的细微调整。
/* "multi-class" adjustment */
.thing .btn { /* adjustments */ }
/* "single-class" adjustment */
.thing .btn,
.thing .btn-primary,
.thing .btn-danger,
.thing .btn-etc { /* adjustments */ }
“多类”模式意味着在组件中，你只需一个组件内的选择器，来标示btn-样式元素的任意一种类型。而“单类”模式意味着你必须承担任何可能的按钮类型，并且在一个新按钮变量被创建的时候调整选择符。
&翻译的不错哦!
结构化的类名
在创建组件，还有在此基础上的“主题”的时候，有些类被用作组件的边界，有些被用作组件的修饰器，有些被用来将一些DOM节点渲染到一个更大的抽象的展现组件中。
我们很难推断出btn（组件）,btn-primary（修饰器）,btn-group（组件）和btn-group-item（组件中的子对象）这些样式之间的关系，因为这些命名并没有清楚的揭示这些类的目的。没有统一的模式。
早在2011年，我开始使用，这让我很快的理解了DOM片段节点之间外在的关系，这比尝试通过来回移动HTML,CSS和JS文件来拼凑整个网站的结构要来得快很多。在要点中的标记的方式主要是受的命名方式所影响，但被我改变成了我认为容易使用的方式。
&翻译的不错哦!
自从我开始写这篇文章,其他的几支团队和框架（译者加：作者）采用了这种方法。修改了符号变成另外一个风格,我更偏爱的并且目前正使用的是:
/* Utility */
.u-utilityName {}
/* State-utility */
.u-isStateName {}
/* Component */
.ComponentName {}
/* Component modifier */
.ComponentName--modifierName {}
/* Component descendant */
.ComponentName-descendant {}
/* Component descendant modifier */
.ComponentName-descendant--modifierName {}
/* Component state (scoped to component) */
.ComponentName.is-stateOfComponent {}
/* Component mixin (ancestor style dependencies) */
.with-ComponentName {} 这只是我此刻发现有用的一个命名模式，它可以采取任何形式。但好处在于消除
仅仅依赖(单)连字符或下划线,或者驼峰式大小写的类名的歧义。
&翻译的不错哦!
注意原文件大小和http压缩
凡讨论到模块化和可扩展，css成为有关文件大小和膨胀的关注性问题。中经常提及到节省文件大小（和维护改进）。而节省文件大小是一些公司例如facebook，在采用这种模块化和可扩展方法时遇到的问题。进一步地，我想分享，在预处理器上编写且大量使用HTML元素时我对编写完的文件进行http压缩的效果。
当Twitter Bootstrap问世时，我改写了已经编译的css，使其能更好的反映出我是如何手写来进行语义化，并且比较前后文件的大小。在同时精简了这两个文件之后，手写来进行语义化的css比预处理器上写的要小大约10%。但是当两个文件都采用gzip压缩了之后，预处理器上写的比手写进行语义化的css要小大约5%。
&翻译的不错哦!
此处凸显了在经过 HTTP 压缩之后进行文件大小对比的重要性, 因为压缩后的文件的大小并不能完全说明问题. 这也暗示了有经验的 CSS 开发者在使用预处理器的时候无需过多纠结于在编译之后的 CSS 中会出现的一定程度的重复, 因为在 HTTP 压缩之后它的尺寸会自然地变得更小. 通过预处理器处理过的更具维护性的 CSS 代码所带来的益处将会胜过对原始文件以及压缩输出的 CSS 文件的大小或美学上的考量.
在另一次实践中, 我从一个在线网站上下载了一份有 60KB 大小的 HTML 文档, 从中删除了所有的 class 属性(它们构成了许多可重用的组件). 这样处理之后将文档的大小减小到了 25KB. 当原始文档和分离过的文档各自被 gzip 压缩过后, 它们的尺寸变成了 7.6KB 和 6KB – 仅 1.6KB 的区别. 对于那些通过自由使用 class 而实际对文件大小产生的影响真的不值得再强调和放大了.
&翻译的不错哦!
我怎样学会停止烦恼的…
许多熟练的开发人员的经验,经过多年,已经导致了大规模网站和应用程序开发的巨大转变。尽管如此,对那些在意识形态上断奶的个体来说,“语义化HTML”是指使用内容派生类名(即使是这样,只能作为最后的手段),在你变得可以敏锐地意识到那个方法不切实际的性质之前，通常需要你完成一个大型应用程序。你必须准备放弃旧的观念,看看替代品,甚至你可以重拾之前摒弃的方法。
&翻译的不错哦!
一旦你开始写作你和其他人不仅要维护而且要积极迭代的不平凡的网站和应用程序时,你很快就会发现,尽管你尽了最大的努力,你的代码开始变得越来越难维护。一些人提出了他们自己的方法来解决这些问题，你值得花时间去探索他们的工作:妮可的博客和项目,乔纳森斯努克的,和Yandex开发的方法。
&翻译的不错哦!
当你选择用HTML和CSS写作,并试图减少你花在写作和编辑CSS上的时间,这涉及到必须接受如果你想改变HTML元素的风格，你必须花更多的时间修改元素的类上。这证明是相当实用的,无论对前端还是后端开发人员——任何人都可以重新排列预先构建的“乐高积木”;事实证明,没有人可以发明css炼金术。
&翻译的不错哦!
这篇文章非常好. 我认为可以用一句话来说明.HTML 是一门计算机程序语言,和c,c++,java,go,php,lua,python等一样.写HTML的人要以写程序的角度去写,去评判.你要写的是程序, 不仅仅是视觉显示.查看: 3136|回复: 6
android结合html5项目，android客户端做后台图片上传。
该用户从未签到主题帖子e币
具体是：由摄像头拍摄图片，然后android客户端做后台上传，但是摄像头是由服务器端html5那边调用的，我要如何获取到拍摄的图片，服务器那边又是以什么方式让我取，没点思路，跪求大神们指导。
你都用了html5了，那就用phonegap做吧，phonegap做起来比较快，查查phonegap的api就行了，以下代码是我们用phonegap实现的该功能，仅供参考：
//获得相机或本地图库
function getCamera(sourceType,destinationType,callback){
navigator.camera.getPicture(function(imageURI){
ELIFE.androidSalePic(imageURI , 400 , 300 , function(_imageURI){
alert("_imageURI = " + _ima ...
该用户从未签到主题帖子e币
你都用了html5了，那就用phonegap做吧，phonegap做起来比较快，查查phonegap的api就行了，以下代码是我们用phonegap实现的该功能，仅供参考：
//获得相机或本地图库
function getCamera(sourceType,destinationType,callback){
& && &&&navigator.camera.getPicture(function(imageURI){
& && && && && & ELIFE.androidSalePic(imageURI , 400 , 300 , function(_imageURI){
& && && && && && && && &alert(&_imageURI = & + _imageURI);
& && && && && && && && &//alert(&上传成功&);
& && && && && && && && &/*upload image begin*/
& && && && && && && && &ELIFE.showAndroidToast(&上传中...&);
& && && && && && && && &//增加延时,否则连续传图会失败
& && && && && && && && &setTimeout(function(){
& && && && && && && && && && &&&var options = new FileUploadOptions(),
& && && && && && && && && && && && && & ft = new FileTransfer();
& && && && && && && && && && &&&options.fileKey = &Filedata&;
& && && && && && && && && && &&&options.fileName = _imageURI.substr(_imageURI.lastIndexOf('/') + 1);
& && && && && && && && && && &&&options.mimeType = &image/png&;
& && && && && && && && && && &&&ft.upload(_imageURI, ELIFE_URL_FORUM + &&mod=ajax&action=uploadimage&,function(json){
& && && && && && && && && && && && && && && && &ELIFE.closeAndroidToast();
& && && && && && && && && && && && && && && && &var str = json.response,
& && && && && && && && && && && && && && && && && && &&&imageId = str.substr(str.lastIndexOf('|') + 1);
& && && && && && && && && && && && && && && && &callback&&callback(_imageURI,imageId);
& && && && && && && && && && && && && & },function(){
& && && && && && && && && && && && && && && && &ELIFE.closeAndroidToast();
& && && && && && && && && && && && && && && && &androidShowToast('上传失败');
& && && && && && && && && && && && && & },options);
& && && && && && && && &},50);
& && && && && && && && && && &&&
& && && && && & } , function(meg){
& && && && && && && && &androidShowToast('获取图片失败');
& && && && && & });
& && && && && &
& && &&&},function(msg) {
& && && && && & //不是取消
& && && && && & if(msg.indexOf(&cancelled&)&0){
& && && && && && && && &androidShowToast(sourceType == navigator.camera.PictureSourceType.CAMERA?&加载照相机失败&:&加载相册失败&);
& && && && && & }
& && && && && &
& && &&&},{quality:100, destinationType:destinationType.FILE_URI, sourceType:sourceType});
额，不懂，研究下&
该用户从未签到主题帖子e币
大神们呢，急，在线等
该用户从未签到主题帖子e币
服务端怎么调用手机的相机？不得用android代码？就算服务端的照相机，照好图片后，用http发送过来
该用户从未签到主题帖子e币
你都用了html5了，那就用phonegap做吧，phonegap做起来比较快，查查phonegap的api就行了，以下代码是我们用phonegap实现的该功能，仅供参考：
//获得相机或本地图库
function getCamera(sourceType,destinationType,callback){
& & & & navigator.camera.getPicture(function(imageURI){
& & & & & & & & ELIFE.androidSalePic(imageURI , 400 , 300 , function(_imageURI){
& & & & & & & & & & & & alert(&_imageURI = & + _imageURI);
& & & & & & & & & & & & //alert(&上传成功&);
& & & & & & & & & & & & /*upload image begin*/
& & & & & & & & & & & & ELIFE.showAndroidToast(&上传中...&);
& & & & & & & & & & & & //增加延时,否则连续传图会失败
& & & & & & & & & & & & setTimeout(function(){
& & & & & & & & & & & & & & & & var options = new FileUploadOptions(),
& & & & & & & & & & & & & & & & & & & & ft = new FileTransfer();
& & & & & & & & & & & & & & & & options.fileKey = &Filedata&;
& & & & & & & & & & & & & & & & options.fileName = _imageURI.substr(_imageURI.lastIndexOf('/') + 1);
& & & & & & & & & & & & & & & & options.mimeType = &image/png&;
& & & & & & & & & & & & & & & & ft.upload(_imageURI, ELIFE_URL_FORUM + &&mod=ajax&action=uploadimage&,function(json){
& & & & & & & & & & & & & & & & & & & & & & & & ELIFE.closeAndroidToast();
& & & & & & & & & & & & & & & & & & & & & & & & var str = json.response,
& & & & & & & & & & & & & & & & & & & & & & & & & & & & imageId = str.substr(str.lastIndexOf('|') + 1);
& & & & & & & & & & & & & & & & & & & & & & & & callback&&callback(_imageURI,imageId);
& & & & & & & & & & & & & & & & & & & & },function(){
& & & & & & & & & & & & & & & & & & & & & & & & ELIFE.closeAndroidToast();
& & & & & & & & & & & & & & & & & & & & & & & & androidShowToast('上传失败');
& & & & & & & & & & & & & & & & & & & & },options);
& & & & & & & & & & & & },50);
& & & & & & & & & & & & & & & &
& & & & & & & & } , function(meg){
& & & & & & & & & & & & androidShowToast('获取图片失败');
& & & & & & & & });
& & & & & & & &
& & & & },function(msg) {
& & & & & & & & //不是取消
& & & & & & & & if(msg.indexOf(&cancelled&)&0){
& & & & & & & & & & & & androidShowToast(sourceType == navigator.camera.PictureSourceType.CAMERA?&加载照相机失败&:&加载相册失败&);
& & & & & & & & }
& & & & & & & &
& & & & },{quality:100, destinationType:destinationType.FILE_URI, sourceType:sourceType});
该用户从未签到主题帖子e币
你都用了html5了，那就用phonegap做吧，phonegap做起来比较快，查查phonegap的api就行了，以下代码是我们用 ...
额，不懂，研究下
该用户从未签到主题帖子e币
哎，不是调用手机的相机，而是手机端拍照后通过http传给服务端，具体传之前可以根据需要对图片进行压缩，以减小图片的质量
QQ已认证，此人靠谱
推荐阅读热门话题
645561015890664488473423396381348289276275250715
半小时前半小时前半小时前半小时前1&小时前1&小时前昨天&23:59昨天&23:41昨天&23:41昨天&23:36昨天&23:36昨天&23:35昨天&23:33昨天&23:31昨天&22:55
特别关注 /3
从基础入门到熟练精通，9个阶段知识体系图指引你逐步提升~还有技术问答+讲师互动，最新实战教程每日更新！
想学Android开发，但没有Java基础？Java体系庞大，不知道从哪学起？专门针对Android开发所需的Java基础教程，学这些，就够了！
eoe特邀李刚老师跟大家讨论怎样学习Android才算疯狂，参与即有机会获《疯狂Android讲义(第3版)》活动时间:5.27~6.3
Powered by
扫一扫 关注eoe官方微信