您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 小程序

微信小程序编译的原理是怎样的?

时间:2023-01-09 12:29:25  来源:  作者:Onegun

过往中小企业或技术团队开发一个 App 的时间成本和人力成本居高难下,但是随着微信上线小程序,更像是为这部分群体打开了一扇天窗,此后小程序呈现出井喷式发展的状态,不仅微信,支付宝、百度、抖音等超级 App 都跟上步伐上线小程序平台。

小程序能够得到快速发展的原因,现在看来主要有三:一是之前中小企业开发 App 门槛高,耗时耗力还可能出现各种bug和体验不佳的问题;二是原有的 Web 端的用户生态并不完整,在 Web 上做业务的收益越来越小;三是背靠微信、支付宝等流量平台的红利,可以快速低成本获得用户。

如果概括的讲小程序的优势也可以分为以下几个小点:

  1. 获客成本低:挂靠微信/支付宝等超级 App,让超级 App 的用户成为自己的潜在用户。
  2. 用户访问成本低:通过扫一扫、附近的小程序、分享、App 内搜索等即可直接访问。
  3. 更轻量触达:不必再记住网址,不必下载 App,点击直达。
  4. 用户体验更好:功能几乎和 App 一样全面,包括语音、支付、地理等,远超 H5 的体验。
  5. 用户负担更小:一个账号走天下,减轻个人负担,包括账号、会员、线上、线下。
  6. 更安全:安全无需自己维护,由超级 App 直接负责。

那小程序对于中小企业来讲是否还有难点呢?那必然有!WXML、WXSS、架构、规则、文档,对于开发者来说可能都是陌生事物。

小程序编译

微信开发者工具和微信客户端都无法直接运行小程序的源码,因此我们需要对小程序的源码进行编译。更通俗的讲可以理解为:小程序编译更像是一个翻译器,把小程序源码翻译为微信客户端和开发工具可以读懂的语言,以便能够明白小程序想要表达和实现的效果。

代码编译过程包括本地预处理、本地编译和服务器编译。为了快速预览,微信开发者工具模拟器运行的代码只经过本地预处理、本地编译,没有服务器编译过程,而微信客户端运行的代码是额外经过服务器编译的。

什么是 WXSS ?

小程序是基于 Web 规范,采用 htmlcss 和 JS 等搭建的一套框架,微信官方给它们取了一个很厉害的名字:WXML、WXSS,但本质上还是在整个 Web 体系之下构建的。

所以在正式了解小程序编译的原理前,非常有必要搞清楚什么是 WXML 、WXSS 。

WXML:WeiXin Markup Language ,是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。

WXSS :WeiXin Style Sheets ,是一套样式语言,用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改,更通俗的可以理解成基于CSS改了点东西,又加了点东西。

与 CSS 相比,WXSS 扩展的特性有:

  • 尺寸单位
  • 样式导入

如何进行编译?

小程序的框架包含两部分 View 视图层、AppService 逻辑层,View 层用来渲染页面结构,AppService 层用来逻辑处理、数据请求、接口调用,它们在两个进程(两个Webview)里运行。

WXSS 并不可以直接执行在 Webview 层进行渲染,而是通过了一层编译工具。

编译的工具名字叫 WCSC,这个编译的过程是在微信开发者工具端执行的,在微信开发者工具的控制台界面,输入 help() 命令可见如所示界面。

如果 help() 函数执行后无效果或者报错,请检查控制台下方位置是否为 top 选项卡。

可以看到这里有一些命令,继续在控制台执行第八条 openVendor() 命令。这时候弹出了一个名为 WeappVendor 的文件夹,可以看到最后一个文件名称正是我们要寻找的 WCSC 。文件种类是可执行文件。WXSS 正是用这个工具来编译的。

我们找到了 WCSC 编译工具后,把这个工具复制到项目的 pages/index 目录下,与 index.wxss 同目录。

在执行编译前,先看一下 index.wxss 内部结构是怎样的。

看完内部结构后,把终端目录打开到 pages/index 目录中。执行:

$ ./wcsc -js index.wxss >> wxss.js

这时候可以看到目录中多了一个 wxss.js 文件。

wxss.js 文件就是 WXSS 文件编译后的文件,index.wxss 文件会先通过 WCSC 可执行程序文件编译成 js 文件。并不是直接编译成 css 文件。

以上就是微信小程序编译的原理。

当然支付宝小程序、百度小程序、FinClip小程序等原理都大同小异,只不过官方起名换了一种叫法,例如支付宝小程序将 WXML 、WXSS 分别称为 AXML、ACSS,FinClip小程序分别叫做FXML、FTSS。

小程序的深化价值

说到小程序开发者如何提升其利用价值其实上一篇文章有讲到,在各个巨头推出自己的小程序开放平台后,微信、支付宝也逐渐将自己的小程序运行能力作为一个付费服务开放给开发者和第三方企业,详情可以查阅:微信开放小程序运行SDK,我们的App可以跑小程序了。

这种「Native + 小程序」的混合开发模式其实非常适合现已经有 App 的企业,一是优质的体验已经成为用户决定是否打开app的重要因素;二是低成本的开发和跨端,能够避免 IOSAndroid 重复开发;三是小程序管理后台直接上架下的方式相当于让app具备了热更新能力,规避了应用商店上架审核的流程。

例如 FinClip 在集成 SDK 后便使得自己的 App 具备小程序运行能力,配合小程序管理后台能够实现全生命周期的管理,不管是上下架、授权、使用数据都能实现低门槛使用,而免费的社区版也基本上能够满足一般企业的使用规模。

希望能够带给接触过小程序开发的同学一些更深入的认识,也能够帮助深入学习小程序开发的同学一些新的思路。



Tags:小程序   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
接触小程序有一段时间了,总得来说小程序开发门槛比较低,但其中基本的运行机制和原理还是要懂的.了解小程序的由来在小程序没有出来之前,最初微信WebView逐渐成为移动web重要入...【详细内容】
2023-01-13  Tags: 小程序  点击:(1)  评论:(0)  加入收藏
过往中小企业或技术团队开发一个 App 的时间成本和人力成本居高难下,但是随着微信上线小程序,更像是为这部分群体打开了一扇天窗,此后小程序呈现出井喷式发展的状态,不仅微信,支...【详细内容】
2023-01-09  Tags: 小程序  点击:(0)  评论:(0)  加入收藏
大家好,我是Echa。由于昨天小编发布一篇关于适合接私活的小程序开源项目相关优质的干货文章:推荐16个适合接私活的小程序开源项目,有兴趣的粉丝们看看这篇。结果陆陆续续小编收...【详细内容】
2023-01-06  Tags: 小程序  点击:(20)  评论:(0)  加入收藏
由于Html5来了,为了曾热点,所以都叫H5了。 而且,现在很多的APP开发,其实就是一个软件的壳,内部都是H5,但实际上外部也是h5,谈不上原生应用,至于H5有什么BUG,就是很多东西都无法解决的...【详细内容】
2023-01-05  Tags: 小程序  点击:(1)  评论:(0)  加入收藏
作为一个还算得上策划的策划,其实经常还是会有很多想法冒出来的,一部分会因为自己简单浅薄的可行性评估淘汰,另一部分则会被能力和精力所打败。这不,昨天是新年的第一天,起床就在...【详细内容】
2023-01-02  Tags: 小程序  点击:(13)  评论:(0)  加入收藏
这几年,小程序、小游戏,非常火。业内人都知道,小程序或小游戏,就是H5应用,就是html+JS。这类应用,反编译很容易,网上就有很多方法教程。对小程序反编译之后,可轻松获得源码。稍加修...【详细内容】
2022-12-30  Tags: 小程序  点击:(22)  评论:(0)  加入收藏
来源 | Tech星球文 | 陈桥辉在抖音上打网约车或将成为现实。Tech星球独家获悉,抖音已经开放交通出行服务的平台服务商入驻资格,目前开放的细分类型有打车/网约车、顺风车/拼车...【详细内容】
2022-12-26  Tags: 小程序  点击:(16)  评论:(0)  加入收藏
为推进智慧城市建设,进一步统一公共服务移动端入口,让市民办事更方便、企业办事更快捷,本市融合“北京通”办事与“北京健康宝”服务,推出“京通”小程序,将于12月20日起逐步启动...【详细内容】
2022-12-20  Tags: 小程序  点击:(49)  评论:(0)  加入收藏
小编周末休息的时候,听说微信小程序近期频刷存在感,临近2022年的尾巴又放大招,更新了三个功能,着实有点太猛。后面还得归功天天外链,实现了小程序跳转链接,很多商家及个体网友都在...【详细内容】
2022-12-12  Tags: 小程序  点击:(0)  评论:(0)  加入收藏
环境:TP5+EasyWechat4① 小程序后台配置违禁关键词小程序端配置违禁关键词② 手动修改下easywechat的checkText方法 ③ PHP代码 public function _initialize() {...【详细内容】
2022-12-04  Tags: 小程序  点击:(61)  评论:(0)  加入收藏
▌简易百科推荐
接触小程序有一段时间了,总得来说小程序开发门槛比较低,但其中基本的运行机制和原理还是要懂的.了解小程序的由来在小程序没有出来之前,最初微信WebView逐渐成为移动web重要入...【详细内容】
2023-01-13  Onegun    Tags:小程序   点击:(1)  评论:(0)  加入收藏
过往中小企业或技术团队开发一个 App 的时间成本和人力成本居高难下,但是随着微信上线小程序,更像是为这部分群体打开了一扇天窗,此后小程序呈现出井喷式发展的状态,不仅微信,支...【详细内容】
2023-01-09  Onegun    Tags:小程序   点击:(0)  评论:(0)  加入收藏
大家好,我是Echa。由于昨天小编发布一篇关于适合接私活的小程序开源项目相关优质的干货文章:推荐16个适合接私活的小程序开源项目,有兴趣的粉丝们看看这篇。结果陆陆续续小编收...【详细内容】
2023-01-06  Echa攻城狮  今日头条  Tags:UI库   点击:(20)  评论:(0)  加入收藏
作为一个还算得上策划的策划,其实经常还是会有很多想法冒出来的,一部分会因为自己简单浅薄的可行性评估淘汰,另一部分则会被能力和精力所打败。这不,昨天是新年的第一天,起床就在...【详细内容】
2023-01-02  简简单单的翻车鱼  今日头条  Tags:小程序   点击:(13)  评论:(0)  加入收藏
这几年,小程序、小游戏,非常火。业内人都知道,小程序或小游戏,就是H5应用,就是html+JS。这类应用,反编译很容易,网上就有很多方法教程。对小程序反编译之后,可轻松获得源码。稍加修...【详细内容】
2022-12-30  JShaman  今日头条  Tags:小程序   点击:(22)  评论:(0)  加入收藏
小编周末休息的时候,听说微信小程序近期频刷存在感,临近2022年的尾巴又放大招,更新了三个功能,着实有点太猛。后面还得归功天天外链,实现了小程序跳转链接,很多商家及个体网友都在...【详细内容】
2022-12-12  莉莉丝    Tags:小程序   点击:(0)  评论:(0)  加入收藏
环境:TP5+EasyWechat4① 小程序后台配置违禁关键词小程序端配置违禁关键词② 手动修改下easywechat的checkText方法 ③ PHP代码 public function _initialize() {...【详细内容】
2022-12-04  世界上最好的语言  今日头条  Tags:小程序   点击:(61)  评论:(0)  加入收藏
做微信小程序开发,为了节省更多的时间,引用了Vant Weapp框架。安装Vant Weapp的的流程非常简单,这一块就不做介绍了,只说在安装完成后进行运行,调试器报错 [渲染层网络层错误] Fa...【详细内容】
2022-11-27  企尚网络  今日头条  Tags:微信小程序   点击:(305)  评论:(0)  加入收藏
短信想必大家都并不陌生,甚至可以说耳熟能详,有学者闲来无事根据统计得出我们每日都会收到三条到十条的短信,短信内容不一,有验证信息,也有支付记录。那你知道如何从短信跳转至微...【详细内容】
2022-11-10  王海军的日记    Tags:小程序   点击:(276)  评论:(0)  加入收藏
微信公众号h5应该如何转跳到小程序,难度大吗?很多人心里会有这样的疑问也是正常的,认为只有“专业人员”才能够进行操作,其实不然,普通人也是能够进行操作的。实际上很简单,“专业...【详细内容】
2022-11-09  王海军的日记    Tags:小程序   点击:(66)  评论:(0)  加入收藏
站内最新
站内热门
站内头条