南宁微信开发者必须要理解小程序内嵌 Web 页面能力

2017年11月14日次浏览分类:行业聚焦

1.网页版小程序是什么?
答:就是一个小程序,有小程序的附近定位,微信里关键词搜索、转发等功能,但是内容是嵌套的一个网页。

2.网页版小程序的用途有哪些?
答:比如客户本身有一个手机网站,他们想做个小程序。按照正常的方法,需要重新搭建小程序的布局,重新添加内容。现在只需要把原来的手机网站嵌入进来,小程序就完成了。

再简单点说:

1、内嵌网页的域名需要在小程序管理后台设置为业务域名,也就是需要先加入白名单
一个小程序最多可以添加 20 个业务域名,且一年只可修改 50 次业务域名。

2、内嵌的网页用起来跟微信内打开体验差不多,下拉也会显示“网页由 XX 域名提供”

3、内嵌的网页可以播放视频,但是视频必须是在白名单域名内的
我测试把视频放在七牛,就无法播放,一直在加载中。

3、内嵌的网页可以嵌入 iframe,而且 iframe 打开的页面可以不在白名单内
iframe 我试了百度首页,淘宝宝贝详情页,我自己的另一个不在白名单域名下页面,都能够打开。
这应该是 bug 而不是 feature。

4、内嵌网页想与小程序通信,只能通过 JSSDK,但是目前只开放了部分接口,具体看开发文档
也就是如果你之前基于微信服务号授权做的页面,就没办法直接在小程序内嵌网页使用了,因为没办法授权。

5、但是,如果已经微信打开并且授权过的页面,在小程序打开也是登录状态
也就是说,微信内置浏览器和小程序内置浏览器其实是同一个实例,至少都共享 cookie 了
我刚才特意测试过,一开始用小程序内嵌网页打开一个需要服务号授权的页面,结果一片空白,然后退出小程序,用微信打开页面,授权之后,再打开小程序,就是已授权状态了


微信宣布「为方便开发者灵活配置小程序,小程序现开放内嵌 Web 页面能力」。

在这之前,如果有人问我,在微信中做一个产品,是用小程序还是 Web 页面 (严谨,既不是 HTML5 更不是 H5…) 的时候,我会这么说:

  • 产品上,Web 上能做的,小程序中大部分都能做。小程序上能做的,Web 上不一定能做。

  • 营销上,Web 能用到的入口,除了朋友圈以外,小程序都可以用。小程序能用到的若干入口,Web 不能使用。

关于后一点,朋友圈分享现在普遍会用海报来做,在这点上 Web 和小程序的能力其实是一样的,都是只能帮你保存图片到相册,再请用户手动发送到朋友圈。而小程序独有的发现 - 小程序、搜索框快捷方式等对用户回访特别重要的入口,Web 页面是不能使用的。

那么,昨天的发布意味着什么?简单地说,小程序的开发成本有了很大的下降

微信小程序刚刚上线的时候,由于小程序使用类似 HTML、CSS 和 JavaScript 等 Web 语言的方式进行开发,让一些媒体误以为小程序就是 Web 开发,欢呼将「迎来 Web 开发的春天」。我自己的第一份工作就是 Web 开发工程师,Web 开发入门确实比较容易;可是尽管小程序使用了 Web 语言,那只是语法上的一致,整个开发模式完全不同,更接近于原生 App 的开发而不是 Web。打个比方,对在看这篇文章的大多数人来说,读中文要比读英文更容易,但假如你看不懂英文版的《量子力学导论》,翻译成中文版你也不一定能看懂。开发小程序,需要有专门的、独立于 Web 团队之外的团队,按小程序的规范重新设计、重新开发,不能将已有的产品直接迁移过来。

可以理解微信当初做这个决定,是希望开发者按照微信的要求,为微信的用户重新去思考、设计一套全新的用户体验,而不是将已有的 Web 页面搬进来。历史上,包括 Microsoft 的 Windows Phone 平台、Google 的 Chrome Packaged App 都冒过类似的险,而其实 Apple 也做过类似的决定——Steve Jobs 2010 年 4 月亲笔写过一篇文章,解释为何 iPhone 不支持 Flash (Thoughts on Flash),其中最重要的原因是,Apple 不希望第三方开发者将已有的产品直接搬过来,而是希望开发者能直接在 iOS (当年还叫 iPhone OS) 进行开发,为 iPhone 的用户提供最好的体验。这些决定赌的是,新平台 (小程序或 iOS) 带来的商业上的好处,最终会让开发者们愿意付出这个成本。

那时候的 iPhone 还很弱小,但后来的历史证明 Steve Jobs 赌对了——Adobe 公司今年 7 月宣布,将在 2020 年最终停止 Flash 的更新和分发。

微信,则在昨天支持了开发者直接嵌入已有网页。

所以,如果你已经有一个网站,可以直接在小程序中套个壳,把网站中的 Web 页面摇身一变成一个小程序。至于这和直接分发 Web 页面有什么区别——

  • 产品上,Web 上能做的,小程序中大部分都能做。小程序上能做的,Web 上不一定能做。

  • 营销上,Web 能用到的入口,除了朋友圈以外,小程序都可以用。小程序能用到的若干入口,Web 不能使用。

细心的你可能已经注意到了,上面这两条并没有任何变化… 对,在小程序的用法上其实没有任何变化,只是开发成本下降了。

那么,在今天之后,使用微信小程序框架开发的「原生」小程序,和嵌入已有的 Web 页面的「Web」小程序,在用户感受上会有什么区别呢?

  • 「原生」小程序,整个小程序是提前下载的,不会有 Web 页面打开时的页面加载感。我们过去的可用性研究表明,这是用户对一个界面是「Web」还是「原生」的最主要判断标准。对于偏工具型的小程序,「原生」的感受应该会更好。

  • 「原生」小程序对体验的控制更完整,自己要做的事情也更多。例如 Web 页面中用户可以选择页面上的文字复制,而在「原生」小程序界面中,这是需要单独添加的功能。

  • 「原生」小程序提供了一些专属的控件和 APIs(接口),如展示群信息、发送推送等,这些只有使用小程序框架开发才能使用。

所以,如果需要和微信生态整合得更紧密,可以使用「原生」方式开发;如果追求快速迁移已有 Web 产品,嵌入 Web 页面更快。

注意,微信小程序嵌入网页的功能,目前还不对个人开放,且对网页的域名有要求。

责任编辑:超博科技    来源:vcb.cn