微信小程序内嵌网页新能力

更新时间:2017-11-06 21:26:36点击:5232 行业新闻

微信更新的内嵌网页能力,除了跳转网页和小程序关联上限提升,微信还发布了没有宣布的新能力。这个新能力究竟是什么?看完文章你就知道了。

11月2日,iPhone X发售的前一晚,微信小程序发布了一个重量级的更新:小程序内嵌网页能力开发。新能力使用起来也很简单:登录公众平台mp.weixin.qq.com,使用小程序帐户登录,并进入设置-开发设置-业务域名进行配置。然后,在小程序中就可以使用webview标签,实现对网页的展示。

安徽修补匠科技有限公司


这个组件说起来非常简单,但影响却非常的大。这个webview标签承载的浏览器,跟微信内置的浏览器类似,核心是一样的,但在小程序里删掉或新增了某些功能。安徽修补匠科技有限公司的技术人员测试了一下,大部分JS内库均能使用,利用它你甚至能直接放个HTML5 游戏。可以说在这个内嵌的网页里,能做到事情跟普通网页没啥区别。而网页最大的技术优势在于它有标准的编码规范,成熟的JS、HTML和CSS框架,这些跟现有微信webview一样。

值得注意的是,这次改动还让小程序具备了更广的新特性。原本在小程序中,仅仅能通过远程接口的热更新,实现前端页面的固定模式的切换。有了这个webview之后,开发者可以基于它做一些特殊的内页,可以随时变换该页面的外观、布局和数据。

从开发人力来看,目前小程序的前端开发者综合能力普遍比纯页面重构者高,因为他们要兼顾很多不同的技术点,这样会导致部分小程序开发人力资源紧张。而这个webview的出现,会让部分专注页网页重构的同学,参与到小程序开发的工作中来,从而减缓原本小程序开发的总体压力。

对于运营来说,某些内页的迭代可以更及时和更可控,内容缔造也可以更加快速。对产品来说,小程序现在可以做更多交互功能。以原来网页的开发套路做一个聊天室,或者以原来网页的形式拉起第三方App。

安徽修补匠科技有限公司的员工测试了一下,WeixinJSBridge的launch3rdApp是可以用的,但具备权限控制机制。理论上如果具备权限,那么能从小程序中间接通过webview的方式,拉起第三方App。与直接在微信打开网页,有什么区别?从小程序产品逻辑看,小程序webview最关键的限制有这些:每个小程序帐号仅支持配置最多20个域名,每个域名仅支持绑定最多20个小程序。每个小程序一年内最多支持修改域名50次,个人开发者和海外开发者暂不开放。微信限制了域名数量以及域名和小程序之前的绑定关系,目的在于限制跳转范围。意思是:小程序不能像现有微信webview中的网页那样,能在页面中随意跳转到任意网页。但这个限制对于专注于做自身内容和服务的开发团队来说,并不会产生多大影响,成熟产品的站点一般不会有太多的外链,20个域名已经满足业务需求。

除此之外,这样的限制方式能保证认真准备内容和服务的团队更高效和及时地迭代内容,而又防止了生态中混乱的跳转。从技术角度看,还有另一个区别是,小程序webview 提供了三类私有的API:

第一、小程序的webview往普通小程序内页跳转接口
wx.miniProgram.navigateTo:切换到某个小程序内页,带推进切换效果。
wx.miniProgram.navigateBack:返回来源页,带推进切换效果。
wx.miniProgram.switchTab:切换到小程序的某个页卡。
wx.miniProgram.reLaunch:直接重启小程序。
wx.miniProgram.redirectTo:切换到某个小程序内页,不带推进切换效果。
第二、在小程序的webview中,支持与HTML5中JSSDK类似的接口,包括上传、拍照、地图、摇一摇、iBeacon、扫一扫、卡券等等的功能。可以说,依靠小程序的webview,就已经能做出具备独特微信功能的应用;
第三、在小程序本身的分享回调方法中,追加了webViewURL参数。该参数为小程序webview的src值。这个可以让用户把当前webview所在的内页分享出去,然后其他用户点击这个分享链接时,小程序内能从新拿到这个webview的src值,实现webview再一次展示。其实影响的地方还很多,这里就不一一细说。

有同学担心这个webview进来后,小程序会因此变得臃肿,会让小程序进入传统混合应用的怪圈。其实这个问题,类似为什么原生App要能访问网页,而不会被网页取代,这是因为App拥有网页不可能有的特性。


微信的产品规划是很牛的,敢把webview放开,一定是觉得小程序有自己的核心特性了。

第二个更新点是小程序关联公众号的数量上限提高了,现在一个小程序,可以跟500个公众号绑定。

第三个更新点是自定义组件开放公测了,这货是用来做代码组件化的。



推荐阅读