程序内嵌网页能力开放

2017-11-02 微信公众平台

“ 为便于开发者灵活配置小程序，小程序现开放内嵌网页能力。”

开发者登录小程序后台配置业务域名后，即可实现小程序内嵌网页。

详情请看：小程序支持内嵌网页文档说明；https://kf.qq.com/touch/sappfaq/171102ue6viI171102jm63uy.html

从移动平台崛起以来，HTML5移动应用开发迅速变成了热门话题，开发者们被各种开发HTML5移动应用的方法搞得晕头转向，今天请到了金山云基础架构部研发负责人柴春燕给大家分享如何避免HTML5移动应用最容易踩的那些坑。

柴春燕－－

微软社区精英计划博客组负责人，HTML5研究小组成员，擅长HTML5及移动应用开发；

具有多年Web开发经验，曾参与开发微软Visual Studio 2010中文学习平台，基于SaaS模式的E-Learning系统；

曾负责当当网Web前端开发及移动应用开发，担任百度音乐高级研发工程师；

目前就职于金山云，初期负责金山云前端架构，现任基础架构部研发经理。

01/移动应用中HTML5的新特性

工欲善其事，必先利其器。我比较推崇的学习技术的方式，是先整体了解，然后结合实际需求，再做针对性的学习。整体了解的方式，比较建议是直接看官网的API文档，这里可以推荐几个网站： http://www.w3school.com.cn/html5/index.asp, https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5, http://www.html5rocks.com， http://caniuse.com/

其中，特别说明下http://caniuse.com/，通过这个网站，我们可以非常快速的查询到你所想使用的html5的特性在各个浏览器，包括不同终端的浏览器的兼容性情况。

HTML5 在移动应用开发上面能够利用的特性主要有：

1. form input type

表单是我们在开发中经常会遇到的，如果按照传统的方式，要介入jquery validate或者自己写正则进行判断，但是其实html5的form表单新增的input type属性，能够快速帮我们实现所需要的功能。

2. video & audio

移动浏览器是不支持flash的，在一些微信专题活动中，经常会看到嵌入音频，那么audio标签就是比较适合的应用场景，html5中audio提供的api attr还是比较全面的。

视频格式一般有mp4和webm两种格式，在使用的时候，一般建议同时生成两种，根据浏览器兼容性，进行相应的选择。音频audio，一般会同时制作mp3 ogg格式。

3. storage

关于web storage，大家可以参考我之前分享的一篇内容：

http://www.chaichunyan.com/topics/html5-training/5.html5_storage/#/

重点是localstorage，尤其是我们在做移动应用的性能优化时，localstorage能够发挥很大的作用。

学习的时候，建议大家带着问题去学习，比方说“localstorage最大的存储容量是多少？”“有没有有效期？”“cookie是有域的概念的，那么localstorage呢？”

4. css3

html5其实更多的是一个web标准，这个标准里边，包含了html、JavaScript api、css。css3是我们在移动应用中要重点学习和掌握的。

1.选择器

2.自定义字体

3.多栏布局

4.文字,容器阴影

5.圆角

6.渐变效果

7.动画 ...

大家可以通过下面一个例子有一个直观的印象：

http://www.chaichunyan.com/topics/html5-training/7.css3_summary/demos/index.html

之前很多我们需要通过js或者切图实现的效果，在移动端，就可以直接通过css3实现。

这里特别强调下关于布局，css3弹性布局，希望大家能够仔细去了解，我在面试时候，必问的一道题，当然，面试只是手段，更重要的是希望能够学以致用，真正在实际工作中发挥作用。

flexbox布局的兼容性，弹性盒模型实现的原理，这些我们在做移动终端调试时候，如果只是靠反复试错，那么效率是非常低的。

了解了html5的特性，开发者就会在移动应用上一展身手了。

02/HTML5移动应用中踩过的那些坑

1.布局

移动浏览器访问的web站点，后面称为mobile webapp哈（泛指移动终端浏览器访问的web站点），能不能使用传统的流式布局？答案是可以，但是要慎用。

mobile webapp对css3的弹性布局支持还是比较给力的，iOS Safari还好，但是Android的碎片化非常严重，尤其是Android上面各种第三方浏览器会做各种各样的定制化，使用flexbox比float能够减少你在布局调试上的时间，而且兼容性有保证。

2.图片适配

这里边要提供一个概念，是屏幕分辨率和物理分辨率，为什么我们使用ios看到的图片清晰度那么高，原因是普通的手机屏幕，一点显示一个像素，但是iphone4s 以后是一个点四个像素。

那按照320的设计稿切出来的图片，在iphone上面显示肯定是有锯齿的。

处理方法可以参见我之前分享的一篇文章：图片的适配与清晰度

http://blog.csdn.net/spring21st/article/details/7513906

3.字体

我把字体的处理分为两类，一种是艺术字体、icon，另一种是我们在页面中的字体。

移动终端对网络的要求是比较高的，我们要尽可能减少网络请求，图片是非常大的网络开销，当然，我们可以用合并图片的方式减少请求数，但是请求量变大了。

css3支持web fonts，所以，我们可以引入字体文件，而不是所有的字体都是通过切图的方式来实现。对于icon，一种方式是base64处理，但是现在更常见的做法，是转换成矢量字体。

这里推荐一个网站：font awesome http://fortawesome.github.io/Font-Awesome/icon/css3/

这里边涵盖了大部分我们会用到的图标，当然，公司有精力和人力的情况下，建议可以维护自己的矢量字体库。

4.横竖屏

我们可以通过css 的media query 判断横竖屏。

但是这种只能控制样式展现，当我们需要监听横竖屏变化的时候，就只能通过js监听window.onorientationchange事件的方式实现。

但是，下面这种情况会让你很无语：

那我们推荐下面这种实现方案：

相比较pc web，mobile webapp的调试更复杂，而且未知的问题更多，遇到问题，我们要有耐心去跟踪定位，就像之前我们遇到iscroll性能问题、fast-click穿透的问题，都是一点一点排查处理的。

03/混合应用（Hybrid）的注意事项

现在“快速迭代，敏捷开发，低成本上线“基本上是每家公司都追求的目标，混合应用就是在这种场景下应运而生。

Hybrid App优点众多，Web前端工程师0成本介入，不依赖版本的实时更新，快速实现跨平台需求，等等。但是，我对混合的看法是，根据实际情况合理使用，因地制宜。

那么什么样的场景适合混合应用开发？

1. 快速原型，验证产品功能。我们之前开发过一个app，Android和iOS提供宿主环境，webview展现内容都是通过html5实现的，半个月就开发上线了，较之传统应用开发人员成本和时间成本都缩短很多。

2. 内容类的应用，比如csdn的app，就是采用hbuilder混合方案实现的，对性能要求没有那么高。

在考虑hybird的时候，要避免以下几个误区：

（1）为了HTML 5而Hybrid App

html5只是技术实现手段而已，要根据公司的实际业务场景，以及人员配比，综合考虑，不能因为react native比较火，就必须要在公司推行这种实现方案，我觉得为技术而技术是不可取的。

（2）忽略移动应用中的关键因素

mobile webapp本质上还是基于PC的一种开发模式，开发者使用PC浏览器模拟App中的webview进行调试。PC浏览器与手机webview的区别是巨大的，包括能支配的CPU资源，最大占有的内存，运行的网络环境，click和touch事件的区别，浏览器对CSS/JS的解析和对事件处理等等。

app工程师考虑比较多的内存的问题，这些在web开发时候是很少考虑的。另外，就是网络环境方面，虽然现在3g、4g覆盖率越来越高，但是移动终端的访问和pc还是有很大差距，wifi和蜂窝网络的切换，基站变化等诸多因素都会导致网络间歇性断开，web开发对于这种不稳定网络环境问题的处理上都有所欠缺。

（3）交互体验一致性

ios和Android的交互设计是两套规范，虽然有相似的地方，但是从操作习惯上，就已经决定了，我们想用一套交互设计，适配两个平台是很难的，包括包括视觉风格，界面切换，操作习惯等。

Hybrid App方案是一把双刃剑，一方面它平衡了Native App和Web页面的优缺点，一定程度上解决了Native App开发过程中迭代慢，版本依赖，Native开发资源不足的问题，但另一个方面过度依赖Hybrid方案会造成Web前端开发成本快速上升，甚至造成App整体体验下降，甚至造成功能缺失。

回到最开始那句话”不要为了Hybrid而Hybrid“，根据实际场景，控制好方案中native和web的边界。

04/Q&A

Q1：关于响应式开发中对于手机屏幕高度的解决有没有什么好的解决方案？

响应式开发本质上是移动设计优先的一种开发方式，我没太明白对于手机屏幕高度的解决，具体的问题是什么样的，原则上高度是不需要做处理的，除非是你对首屏有要求。关于响应式开发，可以看看我这篇文章http://www.chaichunyan.com/index.php/2016/03/03/html5-wrd/

Q2:对首屏有要求的情况, 除了判断高度还有没有其他好的解决方案?如果是flex布局可以解决这个问题吗？

问题的根本是获取首屏的高度，（1）如果你是后端渲染的话，可以获取机型和浏览器版本，拿到屏幕分辨率做适配 （2）根据屏幕宽度做适配，但是做不到完全绝对的首屏自适应，如果有更好的方案，我再跟大家分享。

Q3:hybrid开发中，h5页面太多的话，会不会影响ios发布？

之前有ios对phonegap这种跨平台的应用审核是不通过，不过现在放开这个限制了。h5页面过多，会影响应用的性能和体验，建议可以把h5打包放到ipk里边，但是要做好静态资源的版本管理。

Q4：css3 弹性布局中， 由于android碎片化严重的问题， 能不能有好的案例指导？ 我们要求支持到android4以上版本。

真的要善用文档和工具, http://caniuse.com/#search=flex, 我分享时候提到的这个网站，明确说明了flex兼容性。

如果是Android4.4以上机型，基本上可以放心使用，注意的地方有两个：1. 要记得写各个浏览器的css前缀 2. flex里边可以嵌套flex.

Q5：hybird开发过程中， 原生代码登录权限问题，h5部分的页面，如何共享登录相关信息？

这要看你实现的方案，（1）嵌套静态的h5页面，那么需要native打开webview的时候，使用js briage调用页面js的方法，写入用户信息，实现登录共享 （2）如果打开的是动态渲染的页面（如php输出的页面），那么可以在请求的url中携带用户token，php通过query string判断验证，这个是native和webview数据交互的问题。

Q6：h5动画在部分安卓webview中有时候会出现卡顿,这种情况改怎么优化呢?

1. 可以做简单的测试，看看浏览器支持的情况，如果浏览器支持不够好，那么可能要做降级处理。

2. 减少动画效果，因为动画是要使用gpu渲染的，原生app能够流畅，很大程度上是直接调用硬件处理的。

优化的方案我这边基本上是降级处理，Android低版本不支持的话，就使用基本动画，比方不会使用3D翻转。因为h5毕竟受限于webview环境，像jquery 和 zepto都提供对机型和浏览器的判断。

Q7：在移动端浏览器上能支持h5离线存储的性能吗？

No problem.我们在实际项目中，优化前端性能，曾经用localstorage做静态资源的版本管理和存储。

更多技术干货关注公众号“极牛”。