开发者社区> it大咖说> 正文

WePY-小程序框架设计

简介:
+关注继续查看

601f8e280246133d8dc3b5744b268e7ac9656f5e

0?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

d32a809e3b188eb513c33a3110ec9b07801482f6

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

阅读字数:2178  | 4分钟阅读


嘉宾演讲视频回放及PPT,请点击:http://t.cn/Rs3o7vR

摘要

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

小程序基础封闭内测


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


小程序架构


e8b6883780d294ef50117f246fc4d407b9645206

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


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


优势与限制


优势:


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


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


3、丰富的内置组件。


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


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


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


限制:


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


2、不支持组件开发。


3、不支持NPM包。


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


5、5个并发网络请求。


6、http特性不完善。


7、无法外跳。


主流框架特性


97c7325c6178467468d2c5b6769ebabf296e55a0

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


组件化开发框架WePYWePY简介


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


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


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


为什么会有WePY


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


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


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


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


小程序开源项目分类


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


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


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


开发模式选型


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

WePY项目代码结构


dc78eb4ecbf819bcb1fbf69ce1d31fb83effa3e9

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

WePY配套功能


8c259cf667fd81033454a8db6fae937a79d7bfc3


WePY编译过程

769742ef200cf46cba7877ff21a9e141f3c6e564

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


对比


5c7e47611e726c85d0c64e98d9bd3ab3951cb337


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。


模版语法转换


87a270a2accabb7e60cd198b4be9e54c3bc9559d

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

模块打包


b7a3642c1aa6bc559c2e68b248fd8d37d896f1ab

这一块我参考了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小程序https://chong.qq.com/mobile/wepy_chong.html,大家可以体验一下。


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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
9061 0
.NET Core实战项目之CMS 第十章 设计篇-系统开发框架设计
这两天比较忙,周末也在加班,所以更新的就慢了一点,不过没关系,今天我们就进行千呼万唤的系统开发框架的设计。不知道上篇关于架构设计的文章大家有没有阅读,如果阅读后相信一定对架构设计有了更近一部的理解,如果你没有阅读也希望大家能好好阅读一下!其实说白了,架构是为了应对软件系统复杂度而提出的一个解决方案,架构设计的最终目的也就是为了让复杂的问题简单化!今天我们就结合架构设计的思想来进行我们的CMS实战项目的架构设计,接着再设计下开发框架吧。
1324 0
californium 框架设计分析
Californium 源码分析 1. Californium 项目简介 Californium 是一款基于Java实现的Coap技术框架,该项目实现了Coap协议的各种请求响应定义,支持CON/NON不同的可靠性传输模式。
1133 0
高并发服务器框架设计方案
这样的框架存在一个很严重的问题,当客户端高并发请求到来,服务器需要进行大量的数据库操作,假设数据库最大连接数为1000个,此时有10000个请求访问应用服务器
1294 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19696 0
AI移动自动化测试框架设计(解读)
AI移动自动化测试框架设计(解读) 理想种的移动UI自动化框架: 易于开发和维护 稳定性 执行效率 跨平台 跨应用 支持Hybrid(混合应用) 传统的UI自动化框架(UIAutomator、Espresso、appium等),或多或少在这些方法做的不够完美。
4423 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
17986 0
软件框架设计之美
        这篇文章可以看做是Apress出版的那本<<软件框架设计的艺术>>进阶阅读。欢迎大家留言,一同分享自己的心得体会~         软件大师Robert Martin早在1994年的论文中就提到了OO设计度量准则,站在可维护性(Maintainablity),可扩展性(Extensibility),可重用性(Resuability)的角度上,提出了
920 0
+关注
it大咖说
大咖干货,不再错过
29
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载