发现落地是可行的，我们有4名前端同学，从调研到上线，大概花了1个半月的时间，期间有踩一些坑，后面会说，整个开发总体来说是非常顺利的，下面进入正题~~ 产品简介 线上应用：mami.baidu.com 我们做的是一个移动端的单页...webapp，可以在这个h5页面完成商品选择->支付->订单跟踪整个闭环 ?...以上几个特征在母婴项目中也得到了很好的体现，redux是做单页web应用很好的选择。...React-router react-router作为webapp的路由模块，提供了丰富的功能，调用非常简单，react-router对pushstate支持很好，视图切换可以直接p-ajax ?...这套技术实现，框架库代码压缩后大于200K,gzip后实际传输大小为60K+，更适合大型的webapp。
今天给大家介绍一下我最近做的开源项目。...5、JS变量名(包括函数名)采用小驼峰的方式，组件名或者styled-components导出的样式容器名都采用大驼峰，常量名所有字母大写。...由于传视频比较麻烦，但是图片又比较单调，无法体现这个webApp的动感，因此以下采用gif. 1、推荐部分 首页推荐: ? 推荐歌单详情: ?...关于未来的规划，我是这么安排的: 月底完成收藏、播放历史功能 10月份之前完成登录功能和评论模块 10月中旬之前实现MV模块 同时撰写《手摸手，一起用React实现网易云音乐webApp》系列拆解文章...最后，我要好好感谢那些帮助过我的人和项目，让我有底气开始做这个项目，克服一个个难关。 感谢黄轶前辈vue音乐实战课程，让我学到了非常多的原生JS技能和组件封装技巧。
一、HBuilder调试webapp步骤 官网：http://www.dcloud.io/ ?
当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用 HTML5和CSS3技术做UI布局。...当使用HTML5和CSS3l做UI时，若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的 话，这也就失去了WEBAPP的本质意义了，且有些效果也无法实现的，所以在此又回到了我们的主题–...在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发 Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解...5、块级化a标签 请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。...为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝 采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik
对于传统WEB页面来说，980的宽度在iphone上显示是很正常的，也是满屏的，但对于webapp而言，可能就有点问题了，在iphone上我们的webapp在竖屏下通常宽度都是320。
window.onload 窗口加载完成事件；如果js代码写在body标签之前，则所有的js都要写在window.onload的事件中；即等待窗口加载完成之后再执行！...定时器 setInterval 做返回顶部的动画效果 6....清除定时器 实现步骤： 注册窗口滚动事件 滚动离顶部的距离大于300时，显示ICON 注册点击事件，返回顶部 ==>> 即设置scrollTop 的值为0 用定时器做返回顶部的滚动效果...用定时器做返回顶部的滚动效果 var dsj = setInterval(function(){ var distance = Math.max
2. react-create-app,react-scripts与eject构建项目
groupId ：the unique identifier of the organization or group that created the pro...
webapp开发框架选择需要注意： 第一步：开发支持的语言类型 根据前端开发人员的能力，来选择webapp开发框架。 例如：前端人员只会写react 就要求webapp开发框架支持react。...第二步：查看webapp开发框架文档是否齐全 例如：功能性API的详细使用文档和示例等 插件功能 示例代码 第三步：确认webapp开发框架能否满足项目需求 确认APP的功能是否都能满足，开发难易程度...例如：开发身份证识别功能，查看webapp开发框架API能否支持 第四步：确认webapp开发框架调试功能是否完善 1.调试工具 2.调试功能使用文档和使用示例 3.调试工具的使用难易程度 例如...：需要调试页面查看“获取app相关信息”接口的返回数据 调试工具文档 页面调试 调试结果 第五步：确认webapp开发框架测试完成是否可以打包发布 测试完成的APP是否有完整的打包流程，上架流程...例如：测试完成的webapp需要打包 应用打包 打包完成 下载安装包(.apk和.ipa)直接上传应用市场，就可以了。
用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发，与真机上的效果还是有些偏差，opera手机模拟器的效果亦不佳。...有时在pc上开发出来的webapp效果良好，在部分真机上就出现了偏差，这时候就需要我们进行微调。 在pc上微调后发布到测试环境再在手机上看效果，开发很慢，效率很低。...---- 下面看下效果，这里我用weinre自带的demo页面做示例： 手机连接wifi后访问:192.168.0.20:8081/demo/weinre-demo.html ?...但发现weinre安装的默认路径是C:\Users\hp\AppData\Roaming\npm\node_modules，不知道怎么更改此路径o(╯□╰)o，如果你们知道可以进行尝试下) 建议开发webapp...将静态文件上传至自己的服务器空间 比如，可以将静态文件上传至自己的域名空间，然后手机访问域名地址（这样做当然是可以访问的了O(∩_∩)O~） 建议： 1.webapp开发的时候，将可以连接的页面加上跳转链接
为什么要在这个时候探索flv.js做直播呢？原因在于各大浏览器厂商已经默认禁用Flash，之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用直播功能，这样的用户体验很致命。...可以看出在浏览器里做直播，使用HTTP-FLV协议是不错的，性能优于RTMP+Flash，延迟可以做到和RTMP+Flash一样甚至更好。...flv.js兼容方案 由于目前flv.js兼容性还不是很好，要用在产品中必要要兼顾到不支持flv.js的浏览器。...缩短这个收集时间(也就是减少GOP长度)可以优化延迟，但这样做的坏处是导致视频压缩率不高，传输效率低。 关闭音视频服务器的I桢缓存可以优化延迟，坏处是用户看到直播首屏的时间变大。...浏览器端开启flv.js的Worker，多进程运行flv.js提升解析速度可以优化延迟，这样做的flv.js配置代码是：{ enableWorker: true, enableStashBuffer
在平时的前端开发中，我们更多的是完成螺丝钉的角色，即在公司的前端框架下，实现各种业务逻辑，Vue技术栈并不是难点所在，难点往往在于从 0 到 1 搭建一个完整的实践项目，本项目带领读者开发媲美原生抖音APP的webApp...，使用vue.js作为此项目的技术栈，通过项目脚手架搭建、数据mock、架构设计、代码编写、编译打包，使读者了解前端开发全流程。
在慕课网上看到的课程，webapp图片滑动组件 ，讲师mark,讲的非常好，跟着老师的代码自己抄写了一遍，也算增加些印象 <!
公司内部有一款企业社交产品share，近期打算开发手机版，初期规划是通过webapp的方式嵌入到另一款即时通信native app。...之前团队还未接触过手机应用的页面重构工作，这次由我打头炮，搭建这款webapp的基本页面样式框架。...虽然曾经读过几篇关于webapp的经验总结的文章，也了解过HTML5、CSS3的新特性，但是实战起来还需要摸索。下面总结了这次开发的几点经验，分享给大家，若有不当之处欢迎斧正。...2、JS交互效果 在web端我们常常会引入jquery文件，但是在移动端我们不得不考虑网络带宽、流量的限制，尽量减少代码量。所以，JS库的使用则是能少则少了。...对于简单的交互效果，建议采用原生的JS来实现。
weinre 作为一种远程调试工具，在结构上分为三层： 目标页面（target）：被调试的页面，页面已嵌入 weinre 的远程 js，下文会介绍； Debug客户端（client）：本地的 Web Inspector...官网上也有相应的平台支持说明： Platforms supported - debug server 服务端 任何支持 node.js 的平台。...启动成功后看到如下界面： 给目标页面添加一行脚本 Target Script http://localhost:8081/target/target-script-min.js#anonymous 我们可以在命令行中 使用 ipconfig
如果你在为Android开发Web应用或者在为移动设备重新设计一个Web应用，你需要仔细考虑在不同设备上你的页面看起来是怎样的。因为Android设备有不同款型...
安卓和IOS的操作方式，开发模式，界面UI显示方面的差别，也使得原生APP的不同版本体验有很大的区别，光是做兼容性调测，都要花费开发企业不少的时间。...如：Ext js、jQuery。 缺点： 1.Ionic是一个前段框架。不能完全取代PhoneGap和JavaScript框架的作用 2.需要结合插件使用。...“快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率。...AppCan提供强大的设备调用能力，电话、短信、相机、LBS、传感器、数据库等常用的手机功能，开发者可以通过JS接口调用，轻松构建移动应用。...跟JQuery一样是一个轻量级的JS库，一样使用HTML5+CSS+JS的技术。应为轻量级，所以在web加载时比Sencha有一点优势。缺点显而易见，UI控件太少了。
虽说如此，现阶段webapp也会有许多优化心得、奇技淫巧可以拿出来说说的，这里小钗做一次分享，希望可以对webapp的同学有所帮助。...若他是webapp，我们可以做一些优化 我们应该避免页面长时间白页，这个时候便提出了fake页的概念。页面渲染只需要完整的HTML以及CSS，这个便是第一个优化点。...从数据请求数以及请求量来说，webapp首页的响应应该比较慢，若是任由js加载完成再渲染页面，用户很有可能失去耐心。...降低请求数 由webapp首页来说，不可避免的使用的js文件较多，这些文件分为两类： ① 框架js-css ② 各个业务团队js-css 所以可以限定每个业务团队只会加载这四个文件，以最小降低请求数，这里又涉及到并行加载...以框架库为例，除了核心包以外，不需要的UI或者功能库可以剔除，用到了再动态加载，减少首次加载量，这个一开始就得做好，做不好后期就不好改 以业务团队为例，首次加载的js与html模板会将常用的几个页面压缩合并
前一阵子,老板要将 WebAPP 放到 Android 和 iOS 里面,而我因为以前做过安卓,所以这方面就由我来打包,原理是很简单的,就是打开 APP 的时候用 webView 加载网站的网址,这样服务器一次更新...,就能更新微信版, iOS 版和 Android 版; 首先我要说一句,如果你的 WebAPP 里面有文件上传,并且想要完全兼容,那么就别用原生的 WebAPP, 后面我会写一个关于 crossWalk...Log.d("加载", "end "); } }); } 这是一个比较简单的 webView 例子,这里有几点需要说下: 关于WebSettings: 1.1 需要运行 js...WebViewClient帮助WebView处理各种通知、请求事件的 WebChromeClient是辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等; js...ImageFilePath 类文件,我将他放在 GitHub 里面了,后面我会附上链接: 至于 Android 4.2-4.4 会有问题 如果你是 native 开发者的话比较容易解决,就是在点击时直接用 js
持续更新… 测试浏览器 Chrome: 61.0.3163.73 Safari: 10.0（IOS 10.3.3） Github: webapp-bugs 1....html,js,output // 这样是可以弹出键盘的 submitBtn.onclick = function(e) { e.preventDefault(); inputEmail3...document.createElement('div'); createDiv.style.display = 'none'; document.body.appendChild(createDiv); // 未做兼容...input { text-shadow: rgba(0,0,0,0) 0px 0px 0px; } input.force-redraw { text-shadow: none; } JS...另外，如果一个页面中有输入框，聚焦之后，滑动过程中在IOS上可能会出现不流畅的问题，其实可以这么做：监测页面的touchmove事件，如果当前页面存在着输入框被active，那么直接让其blur，保证滑动过程中没有输入框被聚焦
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
