WePY小程序框架说明

摘要

去年11月初,微信小程序开始公测,小程序是一种新的开放能力,开发者可以一用Web相关技术快速开发小程序。这次分享内容包括:小程序开发基础内容;WePY框架说明,为什么要做这个框架以及框架介绍;WePY框架在我们业务开发中的实际应用和经验分享。

小程序基础

封闭内测

2016年8月,我们有手机充值、自选股、理财通、信用卡还贷和腾讯体育这五个团队参加了小程序的封闭内测。根据这五个产品形态可以看出小程序的一些特点,它面向的是一种服务,一种轻应用,它还是一种Web开发模式,上手简单。

小程序架构

我们平时做公众号开发或做一些混合应用时,Native层是必须的,在调用一些底层能力的时候,一定会用到JSBridge。


小程序和Web开发最大的区别就在于它的视图层和逻辑层完全分离。


优势与限制


优势:


1、视图操作基于数据绑定。


2、支持模块化。模块化最大的特点就是可以依赖于第三方。


3、丰富的内置组件。


4、登录API获取code,提升用户体验。


5、优秀的系统调用能力。


6、样式支持自适应单位rpx。


限制:


1、无法动态创建视图节点。


2、不支持组件开发。


3、不支持NPM包。


4、页面最多只能打开5层。


5、5个并发网络请求。


6、http特性不完善。


7、无法外跳。


主流框架特性

小程序框架唯一的缺陷就是缺少组件系统,无法支持组件化开发。


组件化开发框架WePY


WePY简介


WePY通过预编译手段使小程序支持组件化,类Vue.js风格的开发模式,让开发者可以像普通Web应用一样开发小程序。它是一款Github开源框架。


写过几篇关于WePY的文章,被一些社区转载,然后WePY框架先后被CSDN和开源中国首页推荐。


WePY用户交流群目前大概有1100人左右,并且有用户自发地开发第三方WePY组件。


为什么会有WePY


从开发角度来说,小程序有自己的一套固定的开发模式,我希望用户能够像开发H5一样开发小程序,这是我的初衷。


第二个是框架。一方面是因为小程序不支持组件化,另一方面是因为其它框架有一些比较好的特性在小程序里是没有的。我们想借鉴其它框架的优秀特性,把它们引入到小程序的开发当中去。


小程序出现以后,由于原来的代码无法迁移到小程序,所以需要重新开发一套H5业务,开发者要同时维护两套代码,这是比较令人头疼的问题。


小程序和H5所要实现的功能其实是一样的。我们现在不仅有H5,还有Native端,H5里还包含了微信端、QQ端。我们在考虑是否能有一个适配层,让小程序业务代码运行在微信、手Q甚至是原生APP之上。


小程序开源项目分类


增强库类:开发者对原生小程序进行二次分装,对小程序进行功能补充。


脚手架类:组织项目风格,并且会提供简单的编译打包功能。


预编译类:完全拥有自己的开发模式。


开发模式选型


在框架选型的时候参考了一些网上现有的框架,主要是从单文件组件、轻量级、学习成本低、社区与资源这几点去考虑。


WePY项目代码结构

这是WePY的一个代码对比图。


WePY配套功能

WePY编译过程

首先它拿到的是一个wpy格式文件,通过拆分分成Style、Template和Script。这部分进入编译器通过类型进行编译,生成四个文件,这四个文件会进入插件处理系统,最终生成了index.wxss、index.wxml、index.js、index.json,就是我们真正运行在小程序的文件。


对比

WePY与Web之间的联系


小程序与Web


做小程序开发的人一般都会考虑H5代码是否可以无痛转成小程序,但研究发现要做到这一步其实是很难的。


于是我们采取了一个折中的方法,用一份WePY代码去生成不同的类型,让它可以运行在小程序端。对于小程序就生成小程序可以运行的内容,对于Web端就生成Web端可以执行的内容。


小程序转Web时存在的问题


1、小程序的开发模式与Web端的开发模式不一样。


2、标签和样式存在差异。


3、小程序模版中的一些属性或者表达式在Web端原生并不支持。


4、Web原生不支持模块化。


5、小程序包含大量内置组件和API,但Web端并不支持。


开发模式


WePY本身是一种类似于Vue的开发方式,所以它的这套代码完全可以基于Vue运行在浏览器,基于小程序运行在微信端。开发模式通过WePY达到了统一。


标签与样式差异


标签相近可以直接通过替换来实现,但小程序标签有些小程序特有的属性,在Web端没有,所以它的有些标签的处理不是通过替换去做的。


rpx单位在Web端是没有的。rpx是以iPhone6为基础的1334×750的分辨率上,有750个物理像素,默认单位是750rpx,换算时1rpx=0.5px。


模版语法转换

模版语法几乎都是相似的,只有一些特殊语法需要进行转换。


模块打包

这一块我参考了webpack,因为Web端现在模块化打包已经比较成熟了。


首先这里举了一个例子,是模块化引用的关系。在做编译的过程中,我会梳理它的模块依赖关系,给每一个模块做编号。在打包bundle的时候会把它输出到同一个文件的数组里,拆分入口代码去定义wepy_require,再把原有代码中的require改成require数组1,调用数组1就可以了。这是整个模块化打包的原理。


小程序组件与API


因为小程序组件和API在Web端是没有的,所以我们要想办法在Web端去补齐它的这个差异。Web端是基于Vue运行的,可以使用Vue组件去完成它所有的组件。


只需要处理好接口让Vue代码可以直接注入到bundle里,让它可以完美运行。


只要把小程序的所有组件通过Vue实现一遍,那么这部分组件就可以在Web端运行。


基础API完全有能力在Web端实现,还有一部分不能在Web端实现的,比如调用用户属性,可以通过它提供的对应的JS API去实现。微信浏览器和QQ浏览器提供的JS API完全可以实现小程序API这一块,所以就分了两层,第一层是基础层,第二层是适配层。假如代码要运行在QQ端就用wepy-web-qq,这一块就包括了所有API在QQ端的实行。适配层可以让代码运行在不同的浏览器环境。


这里有一个我自己制作的DEMO小程序 chong.qq.com/mobile/wepy… ,大家可以体验一下。


我今天的分享就到这里,感谢聆听!


内容来源:2017年6月24日,腾讯前端高级工程师龚澄在“腾讯Web前端大会 TFC 2017 ”进行《WePY-小程序框架设计》演讲分享。IT大咖说作为独家视频合作方,经主办方和讲者审阅授权发布。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

本文作者2017-9-12 00:48
众观小程序
粉丝0 阅读60 回复0
上一篇:
对小程序页面的访问进行过滤发布时间:2017-09-07
下一篇:
WebSocket握手阶段使用发布时间:2017-09-12

精彩阅读

排行榜

小程序互动交流社区
181-2013-0473
周一至周五 9:00-18:00
意见反馈:79354359@qq.com

扫一扫联系我们