文章列表
结一 于 7个月前发表 1383 2 0
需求 要实现音频的播放如下图: 音频播放 [http://7tszky.com1.z0.glb.clouddn.com/FnCgWfKtusTjiBONJSmanGaQw4gW] HTML html代码如下: <audiosrc=""preload="metadata"controls /> 本来我以为在css3这么强大的年代,自定义一个audio的皮肤应该是完全没问题的,后来的事实证明too young too simple。 看了下audio的shadow dom结构,然后试了试用css去自定义,于是发现两个问题: audio shadow dom [http://7tszky.com1.z0.glb.clouddn.com/FmGJEoL4Yu909jlvByfHydNzjZ7F] * 第一个为播放暂停按钮,就是一个标签没有状态,默认的css定义是为 -webkit-appearance: media-play-button; ,一个样式控制两种状态,没招。
7个月前
移动开发
黄龙 于 7个月前发表 1571 1 0
第一个问题: WEEX是啥? 官网: 戳这里 [http://alibaba.github.io/weex/] [http://7tszky.com1.z0.glb.clouddn.com/FgKOZolQd0W0_MyJLZNiiLgfStT3] A framework for building Mobile cross-platform UI 英语不好不知道这句话是什么意思,用google翻译了一下是:《一种用于构建移动跨平台的UI框架》,阿里百川出品。 第二个问题:TM哪里可以下载? 我也不知道,但是我是在 https://github.com/Laisly/weex [https://github.com/Laisly/weex] 这里找到了这个,其实可以先不用管,不用下载这个也可以。后续当作weex的例子来看倒是挺好的。 第三个问题:怎么跑起来? 第一步:安装android运行环境 到这里下载安装 http://alibaba.github.io/weex/download.html
7个月前
移动开发
袁飞翔 于 9个月前发表 2140 3 1
前言 花样直播项目客服端的动画基本已都使用web来做,总结分享一下 方案列表 * css3动画 * canvas 动画 * 播图片 * gif图片 各个方案的优缺点 CSS3动画 * 优点:启用css3的3d加速,能够满足性能要求;资源文件最小; * 缺点:元素量多、复杂的动画难以实现 案例: * 花样交友礼物动画 [http://huayang.qq.com/jiaoyou_mgift/9999.html?from=bat>to=bat] CANVAS 动画 * 优点:可以用swf文件直接导出生成,在线导出 Google Swiffy [https://developers.google.com/swiffy/convert/upload] (感谢Flash大神龙哥的指导) * 缺点:性能不佳。如果不用swf导出,人工绘制canvas性能也不是很好,况且复杂的动画很难绘制,能人工绘制的基本就可以使用css3去搞 PS: 最初想用觉得完美,但性能问题被测试叼得不行,之后加班加点换播图片 播图片 * 优点:能够解决一切性能、复杂度的问题
9个月前
移动开发
coverguo 于 9个月前发表 4064 3 7
前言: 什么是手Q天气 手Q天气是在手Q 6.0版本以上新增的功能,页面会展现当天的气温情况,已经五天温度折线图以及24小时温度图表等。 并且为了更好的交互效果,天气页面会根据8种不同的天气信息,展现相应的天气动画。如下雨下雪,飘云,日光闪烁等动画效果。 [http://7tszky.com1.z0.glb.clouddn.com/FlotQEJG8iBwvFjCTlw3g_FuPEqr] 在开发手Q天气的时候,学习到许多,发现有许多地方值得写一下。以下是我的总结。 -------------------------------------------------------------------------------- 一、REM整体布局 我们知道对于移动端来说,分辨率适配是个常见的问题,设计师往往给与我们的是iphone6(750px)的视觉稿。而对于天气页面来说 采用REM来整体布局 是个十分不错的选择。 REM 是什么
9个月前
移动开发
niconico 于 10个月前发表 1014 0 0
2015 年是 Crosswalk 项目飞速增长的一年,无论在特性支持、平台支持方面,还是在与主流工具的整合方面,Crosswalk 都迈出了巨大而又坚实的一步,采用 Crosswalk 的 app 数量飞速增长。据不完全统计,2015 年采用 Crosswalk 的 app 数量为 8653 款,相较于 2014 年末的600 款应用,增长了 1400 %。得益于2015 年 Crosswalk 团队和 Web 开发社区的开源贡献者的支持, Crosswalk 成为安卓设备上一个重要的 HTML5 运行环境产品。我们一起来回顾一下硕果累累的 2015年Crosswalk 走过的每一步。 2015,Crosswalk实现的新特性 2015 年,Crosswalk 实现了64位系统支持、共享模式、精简模式、全新的应用打包工具、游戏模式、静默下载模式等诸多重要的新特性。其中,64位系统支持帮助 app 在 64 位安卓设备上发挥设备最大能力;共享模式极大地缩减了打包后的应用安装包大小,允许应用动态加载 Crosswalk,解决了应用程序与设备 CPU
10个月前
移动开发
刘恒兵 ,永远不要怀疑一个人的潜力! 于 1年前发表 1037 2 0
序言 近期对外进行了两次行业分享。 * Qcon :《 Hybrid App下监控与极限优化 [http://2015.qconshanghai.com/speakers/201931] 》> Qcon分享总结 [http://imweb.io/topic/56362f3209e01a534b461eb9] * StuQ :《 移动Web优化之道 [http://mp.weixin.qq.com/s?__biz=MzA3MjEyNTE4MQ==>mid=401201750>idx=3>sn=ae2ded243e16674df71ed4227dca2a6b] 》 通过两次分享,首先团队以及个人的影响力有所提升,特别是Qcon的分享,通过几次上海之旅,有了很多新的认识。其次是能够通过分享,不断发现自己的不足,也是后续工作和学习不断努力方向。 心路历程 “一次收获颇多的成长历程”,用这句话概括,最适合不过了。至于聊到收获,大致概括为: * 人脉 ——又认识了很多新同学,都是在自己领域擅长的同学。在几天的认识和交往中,一部分成了很好的朋友,在以后的技术然所之路上会有莫大的帮助。
1年前
移动开发
coolriver 于 1年前发表 3580 0 0
前言 提到跨终端应用开发,很容易想到最近很火的React Native。使用React Native开发出的APP本质上是Native APP。在跨端应用开发这一领域内还有另一块:Hybrid APP。本文研究的 inoic framework [http://ionicframework.com/] 就是一种hybrid app的开发框架。 [http://blog.ionic.io/wp-content/uploads/2015/03/ionic-logo-blog.png] 1. IONIC基本组成 在之前, ouven的一篇文章 [http://imweb.io/topic/557fea79c35b19ff46ead229] 介绍了ionic frameword的基本构成,和在windows系统上的环境搭建。本文在此基础了,对ionic frameword(后面简称 ionic)的基本组成作一些补充和总结。下图展示了ionic的基本组成:
1年前
移动开发
袁飞翔 于 1年前发表 1510 3 0
上周处理了一下群活动的badjs,第一步是摆脱 Script error. ,捕获异常栈,找到自己是错在哪里~ 分享一下这个步骤 异步的切入点: 1、XMLHttpRequest.prototype.send 2、setTimeout、setInterval 3、define、require 4、Zepto的事件绑定 on 、bind (另外要能off、unbind) 何时引入切入文件: 最简单的方法是在requirejs引入后立刻做define,require的切入, 在Zepto加载之后做on,bind的切入。或者在zepto引入之后做所有的切入。但这样无法对inline进去的代码做切入,比如预加载的代码。既然是移动端,使用 window.__defineSetter__ 去监听define,zepto的出现也许是最好的选择~ 下面是主要的代码: _.before(XMLHttpRequest.prototype, 'send', function() { if (this.onreadystatechange) {
1年前
移动开发
helondeng 于 1年前发表 11346 1 0
随着React-Native的火爆,以及Native和Web开发本身的一些痛点,近期团队考虑将iOS App中部分界面迁移到React-Native上,本文主要谈谈开发过程中遇到的一些问题及解决方案。 图片路径 图片来源有2种:local 和 remote。 remote 图片remote图片是通过http请求来处理的。 <Image source={{url:'http://10.url.cn/xx.jpg'}} 这种方式的优势: * 引入方式简单 * 更新方便,只需要替换server上的图片即可,不需要修改源代码 缺点很明显: * 即初次请求图片时,需要请求server,图片过大的,请求的延时会很大 local 图片local图片的引入方式有好几种: * 以 iOS App资源的方式引入。将图片以资源方式加入 OC 工程中,最终会将资源编译到安装包,更新需要依赖客户端发版本。 * 图片 base64 引入,更新需要修改代码。 * 绝对路径,将图片放在App某个目录下,在项目中引用。 // iOS App资源方式
1年前
移动开发
moonye 于 2年前发表 1916 0 1
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。 开始 * 可以看一个 响应式demo [http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html] * 一个强大的网站 [http://www.responsivewebcss.com/] ,可有界面帮助做布局,直接导出代码。(线上保存功能是需要收费的) 基本的思路 图片自适应 * 去掉高度和宽度,只给一个max-width * 固定宽度或高度,使图片按照自身比例缩放 * 固定宽度或高度,使图片按照自身比例缩放 * 使用容器的padding-top来实现(积木中的等比实现方式) * 等等 字体自适应 * em 相对当前元素的font-size, 如果当前元素没有设置,则继承自父元素 * rem 固定根元素上字体大小,其他字体跟随缩放 * vm, vh 这两个兼容性不大好,而且感觉用起来的场景不多 显示或者隐藏内容
2年前
移动开发
vienwu 于 2年前发表 1581 0 0
使用cocos2d-js版开发跨平台手游非常简单,并且在手机端也拥有不错的性能。但因为推出时间并不够久,用户也不够多,项目里仍然存在不少bug,这里介绍一个常见的bug和个人解决方案。 大段中文文字无法自动换行并且在不同终端行为不一致的BUG修复 这个bug具体表现为,js版的cc.LabelBMFont类实现存在缺陷。 该类中,判断是否自动换行时,首先检测字符是否结束或者是否存在空格,满足条件后才会换行。 当字符串为英文时,此逻辑可以良好执行,但面对中文时就不能正常处理了。 理论上,在 cocos2d-html5/cocos2d/labels/cclabelbmfont.js 大约736行 if (!self._lineBreakWithoutSpaces) { 应该判断是否为中文,或者在后续的寻找空格逻辑中,增加寻找中文的判断。 其次,cocos2d-js在手机端执行时,会将js代码编译为jsb字节码,调用的cc.LabelBMFont类是c++实现的,并且该类实现的算法和web端的实现不同,导致字体大小、换行行为不一致,尤其在单独控制某个文本字符颜色时,定位某个文本的索引都会不同。
2年前
移动开发
helondeng 于 2年前发表 4212 1 0
React-Native 基于目前React来开发IOS原生应用,Android版本将在年底推出。 为什么需要REACT-NATIVE 目前主流的应用大体分成三类:Native App, Web App, Hybrid App.texingfenxi [https://cloud.githubusercontent.com/assets/3880323/8510235/3706bf10-230c-11e5-8eb1-52eeb31cf6bf.png] Native App优点 * 性能好,性能好,还是性能好 缺点 * 开发成本高,无法跨平台 * 升级困难 Web App优点 * 跨平台,Write Once , Run Anywhere * 版本升级容易 缺点 * 无法系统系统级的API * 临时入口,用户留存度低 * 性能差 Hybrid AppNative App 和 Web App 折中的方案,保留了 Native App 和 Web App 的优点。但是最受吐槽的还是性能差。页面渲染效率低,在Webview中绘制界面,实现动画,资源消耗都比较大。
2年前
移动开发