微信小程序是如何实现快速编译的?

news2025/1/22 12:58:09

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

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

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

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

那小程序对于中小企业来讲是否还有难点呢?那必然有!WXML、WXSS、架构、规则、文档,对于开发者来说可能都是陌生事物。
之前的文章对于小程序的双线程架构作了介绍和说明:为什么小程序性能高于H5,聊聊双线程技术 ,接下来会聚焦于小程序的编译原理。

小程序编译

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

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

什么是 WXSS ?

小程序是基于 Web 规范,采用 HTML 、CSS 和 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的重要因素;二是低成本的开发和跨端,能够避免 iOS、Android 重复开发;三是小程序管理后台直接上架下的方式相当于让app具备了热更新能力,规避了应用商店上架审核的流程。

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/151646.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

线程进阶

常见的锁策略乐观锁 vs 悲观锁乐观锁:预测锁竞争不是很激烈悲观锁:预测锁竞争会很激烈轻量级锁 vs 重量级锁轻量级锁加锁解锁开销比较小,效率更高重量级锁加锁解锁开销比较大,效率更低多数情况下,乐观锁,也…

在CSDN年收入竟达五位数?----大学生技术自媒体成长之路

前言: Hello大家好,我是Dream。 还有不到两周就要过年了,自己也马上迈入了21岁,感慨时间飞快,从19岁开始入驻C站,到现在也已经整整两年了,把自己最好的两年青春时光留在了CSDN,超百万…

定义输出格式的使用-printf()函数

目录&#x1f4d6;printf()函数简介格式化规定符格式控制特殊规定字符示例printf()函数简介 printf()函数是格式化输出函数, 一般用于向标准输出设备按规定格式输出信息。 printf()函数的调用格式为:printf("<格式化字符串>", <参量表>);这里看输出很简…

Lua入门学习

一、初识Lua脚本 Lua 是一种轻量小巧的脚本语言&#xff0c;用标准C语言编写并以源代码形式开放&#xff0c; 其设计目的是为了嵌入应用程序中&#xff0c;从而为应用程序提供灵活的扩展和定制功能。官网&#xff1a;https://www.lua.org/ 1、HelloWorld CentOS7默认已经安装…

什么是docker

文章目录简介Docker 架构特性局限Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中&#xff0c;然后发布到任何流行的 Linux或Windows操作系统的机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#xff0c…

〖产品思维训练白宝书 - 产品思维认知篇⑨〗- 像 产品经理 一样去思考解决问题

大家好&#xff0c;我是 哈士奇 &#xff0c;一位工作了十年的"技术混子"&#xff0c; 致力于为开发者赋能的UP主, 目前正在运营着 TFS_CLUB社区。 &#x1f4ac; 人生格言&#xff1a;优于别人,并不高贵,真正的高贵应该是优于过去的自己。&#x1f4ac; &#x1f4e…

数据结构:算法的初步认识

算法是解决特定问题求解步骤的描述&#xff0c;在计算机中表现为指令的有限序列&#xff0c;并且每条指令表示一个或多个操作。 什么是算法 要求你写一个求 123…100 结果的程序&#xff0c;你应该怎么写呢? 大多数人会马上写出下面的C语言代码(或者其他语言的代码): int a,…

seata的AT模式

seata 分布式事务解决方案 官网 &#xff1a; seata.io 事务模式&#xff1a; 名词 TC &#xff1a; transaction coordinator 事务协调者 维护全局事务 和 分支事务的状态&#xff0c;驱动全局事务提交或者回滚TM &#xff1a; transaction manager 事务管理器 定义全局事…

(考研湖科大教书匠计算机网络)第一章概述-第三节:计算机网络的定义、功能分类

文章目录一&#xff1a;计算机网络的定义&#xff08;1&#xff09;最简单定义&#xff08;2&#xff09;较好定义二&#xff1a;计算机网络功能三&#xff1a;计算机网络的分类&#xff08;1&#xff09;按照“覆盖范围”分类&#xff08;2&#xff09;按照“使用者”分类&…

【Linux学习】进程控制

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《Linux学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 在前面&#xff0c;我们学习了进程的相关概念&#xff0c;在这里本喵会给大家介绍如何控制进程。…

私人影院微信小程序源码,采用腾讯小程序云开发,包括影院动态,最新影讯,房间预约,后台预约管理,导出预约表格Excel数据等功能

功能介绍 私人影院是很多年轻人比较喜欢的地方&#xff0c;虽然空间小&#xff0c;但是他们喜欢在这样的空间里享受休闲的时光&#xff0c;通过提前预约订位&#xff0c;可以使商家和消费者节省时间&#xff0c;减少人力成本&#xff0c;大大方便业务的拓展&#xff0c;同时也…

Word控件Spire.Doc 【Table】教程(4):如何在C#、VB.NET中设置Word表格样式

Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下&#xff0c;轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具&#xff0c;专注于创建、编辑、转…

备战蓝桥杯数学基础:位运算理论

[TOC](目录)位运算概述位运算就是基于整数的二进制表示进行的运算&#xff0c;由于计算机内部就是以二进制来村塾数据&#xff0c;位运算是相当快的。基本的位运算共6种&#xff0c;分别为按位与、按位或、按位异或、按位取反、左移和右移与、或、异或这三者都是两数间的运算&a…

【算法刷题】栈与队列题型及方法归纳

栈与队列的特点 1、栈&#xff1a;FIFO 栈是仅能对其一端进行操作的结构&#xff0c;实现后进先出的效果。在C中采用容器适配器的方式实现栈。&#xff08;容器适配器实际上就是对某一类型的对象进行泛化&#xff0c;定义了这一类泛化对象的可进行操作的逻辑&#xff09; 什么…

上半年要写的博客文章22

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…

极端尺度物体的显著性分割方法(SOD 新 SOTA)

Paper Link&#xff1a;http://cvteam.buaa.edu.cn/papers.htmlBackground&#xff1a;显著性物体分割在常规图像场景取得突破进展&#xff0c;在极端尺度物体场景仍面临挑战。图像前景物体分割是深度学习、计算机视觉等领域的研究热点&#xff0c;在机器视觉、智能交通、智慧医…

Mac 电脑磁盘空间释放记录

起因 点开钉钉页面就卡住&#xff0c;看了一下&#xff0c;光一个钉钉占到4G左右的内存&#xff0c;给钉钉发了工单&#xff0c;没人理我。又随手看了一下系统磁盘空间使用情况&#xff0c;发现快满了&#xff01;&#x1f613; 应用清单 我是一个应用的超轻度用户&#xff…

NFT市场聚合器:他们有没有得到广泛使用?他们对于冷门的NFT交易市场有什么影响?

聚合器是什么&#xff1f;NFT市场聚合器是一种交易工具平台&#xff0c;允许用户在一个页面同时间从多个不同的市场浏览和发现NFT。 这些聚合器将市场上的NFT挂单整合在一起&#xff0c;使用户更容易找到并购买NFT&#xff0c;并节省了用户在多个不同NFT市场之间比较来回比较NF…

rabbitMQ简介

rabbitMQ简介 目前应用最广泛的一个基于AMQP规范的开源的消息中间件RabbitMQ是一个由erlang开发的AMQP(Advanved Message Queue Protocol)的开源实现 rabbitMQ的重要概念 Message&#xff1a;消息&#xff0c;消息是没有名称的&#xff0c;消息由消息头和消息体组成&#xf…

腾讯安全联合Gartner发布SOC+白皮书,助力政企构筑实战化安全运营体系

随着数字化浪潮的蓬勃兴起&#xff0c;各类政企机构上云步伐加快。与此同时&#xff0c;如高危漏洞、勒索病毒、挖矿木马、APT攻击等威胁层出不穷&#xff0c;安全形势日益严峻。许多政企机构虽部署了较为完备的基础安全产品&#xff0c;但防御体系仍以异构设备堆叠式为主&…