在移动互联网时代，WEB应用越来越普及和被人所接受。而且线上需求不断的改变，通过迭代更新线上的手机App肯定是计划赶不上变化，所以现在越来越多的App也通过采用Webview的方式嵌入一些比较常更新的页面，以便实时更新。Web应用开发者需要针对手机进行界面的重新设计，但是手机上并没有称心如意的调试工具（如Firebug、web inspector），重新设计界面的工作往往事半功倍，所以一个好优秀的远程调试工具 Weinre 就很好的解决了这一问题。Weinre是什么Weinre 是一款远程调试工具，在电脑上可以即时的修改手机上对应网页的页面元素、样式表，或是查看Javascript变量，同时还可以看到手机上页面的错误和警告信息.(等同于Chrome Inspect Element )运行原理Weinre作为一种远程调试工具，在结构上分为三层：目标页面（target）：被调试的页面，页面已嵌入weinre的远程js，下文会介绍；Debug客户端（client）：本地的Web Inspector调试客户端；Debug服务端（agent）：一个HTTP Server，为目标页面与Debug客户端建立通信。获取Weinre在任何的支持 Node.js 环境的系统下通过包管理器（npm）即可安装Weinre1npminstall-g weinre使用Weinre进行远程调试1 启动 We ...继续阅读 (12)

发生什么了？今天早上刚到公司，就收到反馈说公司前端页面的下载按钮在 iOS 7 的微信内置浏览器里面点击无效，经过确认之后，前端代码是正常的，问题出在了微信上，然后谷歌之，原来腾讯在*。是 BUG 还是刻意为之？最新版微信在所有开放的 webview（网页界面）里禁止了通过链接打开本地 app 或跳转到 app store，只有自家使用的 webview 能够打开 app 或跳转 app store。而且这种做法不像是 bug 所致，而是刻意为之。可能的用意：微信是一个重要的互联网入口和应用入口，但是微信为了自家利益，需要控制入口和流量，进而加强对公共帐号和第三方应用的控制，打击竞争对手该怎么办呢？经过讨论之后，我们发现微信内置浏览器右上角的跳转按钮“在 Safari 中打开”可以间接的跳转 App Store ，所以最终我们的解决方案是如果是 iOS 的微信内置浏览器，点击按钮后，用弹出提示的方法来取代直接跳转。效果如下图所示：前端实现index.html12345div>div>app.css1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950#popweixin{width:100%;height:100%;overflow:hidden ...继续阅读 (19)

如下图所示的就是“核心服务”模块，这个区域一样是读取用户设置的文章的主题包里面内置了8张ICO图片，你可以通过修改名称来替换原来的，或者你自行设计所需要的图案发布文章时，请新增一个名称为“main_services”的自定义栏目，并设置其值为“on”即可 ...继续阅读 (8)

首页图片轮播理论支持N张图片进行轮播，你只需要自定义一个栏目，并设置文章的“特色图片”即可将该文章加入到首页轮播序列中我们建议的首页大图图片尺寸为 940*340 为最佳。你必须先展开“显示选项”，并勾选“自定义栏目”发布文章时，新增一个名称为“banne_slide”自定义栏目，其值设为“on”,并选取一张图片为“特色图片” ...继续阅读 (8)

关于DChaser这个一个关于梦想的WordPress主题，它叫Dream Chaser(梦想追逐者)当你开发一款作品（产品）的时候，用心去塑造它，给予它灵魂，那么它便是“活”的。DChaser 一个简约大气的企业（工作室）主题，它无处不在的渗透着我们追逐梦想的路上，虽不奢华，但也绝不平庸！DChaser主题组件无限级的导航菜单你只要通过后台创建一个名为“DChaser”的导航菜单，并选中它，那么你便可拥有无限级的导航子菜单。详细设置，请参照：DChaser 主题导航菜单设置大气美观的Banner-Slide图片轮播模块发表文章时，附上一副图，把它设为“特色图片”，并添加自定义栏目“banne_slide”值为“on”，即可在主页显示并加入轮播详细设置，请参照：DChaser 主题首页图片轮播设置“核心服务”模块发布文章时，添加自定义栏目“main_services”值为“on”，即可设为“核心服务”暂时栏，内置8种ICO图片，当然，你可以自行设计。详细设置，请参照：DChaser 主题“核心服务”模块设置可切换的“最新图文”、“热评文章”模块图片型友情链接与底部FOOTER模板可在后台设置相对应的显示信息无限级的评论列表展示框评论列表将自适应大小展示评论列表，更加直观和大气异步提交的、刷新前可更新的评论提交框因为评论内容采用的AJAX异步提交，评论者在未刷新页面时可随意更改内容， ...继续阅读 (8)

写在前面好久没写博文了，最近生活比较动荡，同时忙着学业、工作、生活的事。为了能让自己在广州顽强的活下去，算是拼尽全力了。最近各方面也都开始逐渐稳定下来，就回来打理下博客，锄锄草，免得访问被杂草拌着了。每次环境的更换都是对自己能力有着显著的提升，有时候你觉得在一个地方学不到或者基本重复着相同工作的时候，可以尝试换一个环境，可能对你未来的发展有更大的帮助。当然，说这些是因为自己最近换了个工作，在新的公司跟了一个项目，很多以前不敢实践的东西由于进度和要求的压力都慢慢开始用上了，很高兴的有几个非常友好和屌丝的同事在身边指导我，帮助我，让项目一期的如期的完成，虽然还有很多坑，但是自己挖的，自己填就好了，O(∩_∩)O！WEB APP 实践很早以前便想着手做一个WEB APP练手，但是苦于技术能力，一直没有很完美的框架选择的技术选型，迟迟没有动手。刚进现在这个公司，刚好前端团队在跟一个移动模板，有现成的技术选型（主要还是身边有能问的人），在5.1几天假期里，给自己的项目(Hi聊)写了一个WEB APP前端模板，目前只是一个demo，未对接API。Demohttp://m.hiliaox.com技术选型HTML Framework: Framework7Task Runner: GruntModule Loader: Require.jsTemplates Engine: mustache前端架 ...继续阅读 (8)

DChaser 主题导航菜单默认支持3级菜单，启用菜单的方式跟其他主题相同，非常简单请通过“后台”–>“外观”–>“菜单” ，新建一个名为“DChaser”的菜单，并在左侧选择为“主菜单”通过选取你需要的页面，按照你自己的需求进行排序，保存即可 ...继续阅读 (6)

以前这个博客是托管在 stdyun 的，后来不知道什么原因（貌似被美团云收购？), octopress 托管服务终止了，原有的网站被转移在外国的服务器上，而且访问速度越来越慢，这不得不让我考虑重新寻找一个免费的 octopress 托管服务。几经斟酌，觉得选用 GitHub 和 GitCafe ，他们分别是国外的、国内的代码托管服务商，也都提供 Git Pages 服务，我们可以把 octopress 托管在他们那。GitHub Pages具体的托管操作在互联网上面大把，这里就不在累赘，大概如下GitHub 上面创建一个与你用户名相同前缀的 Repository ，比如我的 BelinChung/belinchung.github.iocd path/your/octopress/folder初始化rake setup_github_pages，按提示输入你的 Repository URL编译和发布rake generaterake deployGitCafe Pages因为两家的产品都差不多，所以操作也是不尽相同，小区别在第一步，不需要 github.io 后缀GitCafe 上面创建一个与你用户名相同前缀的 Repository ，比如我的 BelinChung/belinchungGitCafe 还提供的中文文档，可以去看看GitCafe Pages Wiki域名绑定GitH ...继续阅读 (37)

以前这个博客是托管在 stdyun 的，后来不知道什么原因（貌似被美团云收购？), octopress 托管服务终止了，原有的网站被转移在外国的服务器上，而且访问速度越来越慢，这不得不让我考虑重新寻找一个免费的 octopress 托管服务。几经斟酌，觉得选用 GitHub 和 GitCafe ，他们分别是国外的、国内的代码托管服务商，也都提供 Git Pages 服务，我们可以把 octopress 托管在他们那。GitHub Pages具体的托管操作在互联网上面大把，这里就不在累赘，大概如下GitHub 上面创建一个与你用户名相同前缀的 Repository ，比如我的 BelinChung/belinchung.github.iocd path/your/octopress/folder初始化rake setup_github_pages，按提示输入你的 Repository URL编译和发布rake generaterake deployGitCafe Pages因为两家的产品都差不多，所以操作也是不尽相同，小区别在第一步，不需要 github.io 后缀GitCafe 上面创建一个与你用户名相同前缀的 Repository ，比如我的 BelinChung/belinchungGitCafe 还提供的中文文档，可以去看看GitCafe Pages Wiki域名绑定GitH ...继续阅读 (9)

写在前面从14年3月份入职之后，就一直在跟公司的一个即时 IM 的 Web APP 。15年已经来了，博客还没有一篇更新，就来聊聊在做这个 APP 的时候遇到的一些坑和一些总结吧。由于刚开始经验有限，所以在系统设计方面有很多的缺陷和不足，随着知识的积累，通过不断调整项目目录和一些规范，最终变成了下面的前端模型。设计理念期间重构时受到UC前端工程实践.pdf模块化开发开发思想的影响，我们也在 APP 中引入了模块化的概念。正如里面所说：我们希望能像搭积木一样开发和维护系统，最终通过组装模块得到一个完整的应用。模块是可组合、可分解和更换的单元模块具有一定的独立性将模块所需的js、css、图片、模板维护在一起 ( 我们未采用 )组件生态，同团队不同项目之间能有可复用的模块技术选型前端构建工具：F.I.S我们在 FIS 和 Grunt 之间选择了后者 - 国产的 FIS ，基于如下的考虑：Grunt 是一个基于 task 的构建工具，依赖众多的插件进行配置组织，可以解决基本的前端自动化问题。FIS 是基于工具、开发框架、本地开发环境为一体的前端解决方案，不但拥有各类工具插件，同时还针对 PC、Mobile、I18n 等业务、场景总结了很多最佳实践。简单来说就是 FIS 更适合大型工程化的项目。模块加载器：RequireJS通过fis-postprocessor-amd的支持，FIS 能很 ...继续阅读 (24)

写在前面从14年3月份入职之后，就一直在跟公司的一个即时 IM 的 Web APP 。15年已经来了，博客还没有一篇更新，就来聊聊在做这个 APP 的时候遇到的一些坑和一些总结吧。由于刚开始经验有限，所以在系统设计方面有很多的缺陷和不足，随着知识的积累，通过不断调整项目目录和一些规范，最终变成了下面的前端模型。设计理念期间重构时受到UC前端工程实践.pdf模块化开发开发思想的影响，我们也在 APP 中引入了模块化的概念。正如里面所说：我们希望能像搭积木一样开发和维护系统，最终通过组装模块得到一个完整的应用。模块是可组合、可分解和更换的单元模块具有一定的独立性将模块所需的js、css、图片、模板维护在一起 ( 我们未采用 )组件生态，同团队不同项目之间能有可复用的模块技术选型前端构建工具：F.I.S我们在 FIS 和 Grunt 之间选择了后者 - 国产的 FIS ，基于如下的考虑：Grunt 是一个基于 task 的构建工具，依赖众多的插件进行配置组织，可以解决基本的前端自动化问题。FIS 是基于工具、开发框架、本地开发环境为一体的前端解决方案，不但拥有各类工具插件，同时还针对 PC、Mobile、I18n 等业务、场景总结了很多最佳实践。简单来说就是 FIS 更适合大型工程化的项目。模块加载器：RequireJS通过fis-postprocessor-amd的支持，FIS 能很 ...继续阅读 (11)

RESTfulWEB APP 的概念越来越火，单页应用视乎也成为趋势，看着以前在 HTML 夹杂着用来渲染 View 层的 PHP 代码，总感觉好不舒服。自己也越来越趋向于前端和后端的代码完全分离开来。现在是移动互联网的时代，我们发现几乎所有的网站、产品都不可避免的遇到一个需求：多平台整合。一个基于 RESTful 的后端架构是放眼未来的做法。Access Token捣鼓了那么久的微博开放平台的 API ，看到 Access Token 自然再熟悉不过了。OAuth2.0 授权成功后返回的一个授权码，可后续校验 API 调用的有效性。嗯？OAuth2.0 对于我的应用来说太庞大了，在我的 RESTful 框架中，如何生成和维护这个 Token 呢？首先我们来看看这个 Token 的的特性：通过随机算法生成(Hash)，里面包含这个 Token 对应用户的基本信息有生命周期，(TODO)可获得剩余的生命周期可延续生命周期(TODO)可主动销毁做久了前端，后端一些服务越来越模糊了，导致一开始把问题想复杂了，想通过可逆算法去生成这个 Token ,然后思维越走越远，后来经过 @苏奕嘉 小伙伴的指点，才发现，原来也就几行代码的事。配合PHP 的拓展模块 Memcache (这里有个坑爹的地方，PHP的 Memcache 扩展有2个，Memcached 和 Memcache,我用的是后者 ...继续阅读 (12)

RESTfulWEB APP 的概念越来越火，单页应用视乎也成为趋势，看着以前在 HTML 夹杂着用来渲染 View 层的 PHP 代码，总感觉好不舒服。自己也越来越趋向于前端和后端的代码完全分离开来。现在是移动互联网的时代，我们发现几乎所有的网站、产品都不可避免的遇到一个需求：多平台整合。一个基于 RESTful 的后端架构是放眼未来的做法。Access Token捣鼓了那么久的微博开放平台的 API ，看到 Access Token 自然再熟悉不过了。OAuth2.0 授权成功后返回的一个授权码，可后续校验 API 调用的有效性。嗯？OAuth2.0 对于我的应用来说太庞大了，在我的 RESTful 框架中，如何生成和维护这个 Token 呢？首先我们来看看这个 Token 的的特性：通过随机算法生成(Hash)，里面包含这个 Token 对应用户的基本信息有生命周期，(TODO)可获得剩余的生命周期可延续生命周期(TODO)可主动销毁做久了前端，后端一些服务越来越模糊了，导致一开始把问题想复杂了，想通过可逆算法去生成这个 Token ,然后思维越走越远，后来经过 @苏奕嘉 小伙伴的指点，才发现，原来也就几行代码的事。配合PHP 的拓展模块 Memcache (这里有个坑爹的地方，PHP的 Memcache 扩展有2个，Memcached 和 Memcache,我用的是后者 ...继续阅读 (2)

需求分析现在微信火了，很多线上的APP都希望通过分享的URL或直接的URL进行产品宣传（写这篇博文的时候，听说微信下个版本将要屏蔽微信中的URL链接），这些链接都将通过微信内置的浏览器打开。PM希望在微信内置浏览器中展示的页面进行个性化处理，那么前端这边必然要去区别判断是否是微信内置浏览器。微信内置浏览器的 User Agent检测浏览器的 User Agent 应该是非常简单的事情微信在 Android 下的 User Agent1mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus build/jzo54k) applewebkit/534.30 (khtml, like gecko) version/4.0mobile safari/534.30 micromessenger/5.0.1.352微信在 iPhone 下的 User Agent1mozilla/5.0(iphone; cpu iphone os5_1_1likemac os x) applewebkit/534.46(khtml,likegecko) mobile/9b206 micromessenger/5.0通过javascript判断很容易看出来，微信的 User Agent 都有‘micromessenger’字符串标示，我们判断是否含有这些字 ...继续阅读 (21)

Sublime TextSublime Text 是程序员们公认的编码神奇，拥有漂亮的用户界面和强大的功能更重要的是，Sublime Text 易于扩展，众多开发人员为其贡献插件，而且通过包管理工具 —— Package Control 可以方便安装和管理。Package Control 安装方法首先通过快捷键 ctrl+` 或者 View > Show Console 打开控制台，然后粘贴相应的 Python 安装代码。Sublime Text 2 安装代码：1importurllib2,os; pf=’Package Control.sublime-package’; ipp = sublime.installed_packages_path(); os.makedirs( ipp )ifnotos.path.exists(ipp)elseNone; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), ‘wb’ ).write( urllib2.urlopen( ‘http://sublime.wbond.net/’ +pf.replace( ‘ ‘,’%20′ )).read()); print( ‘Please resta ...继续阅读 (19)