草庐IT

技术干货贴|小程序WXSS编译原理

放鸢 2023-03-28 原文
近年来,小程序蓬勃发展,从微信到支付宝、抖音等各大平台,小程序纷纷上线。小程序发展如此快速,究其原因离不开它的几大特点:获客成本低、用户访问成本低、轻量触达、用户体验佳、用户负担小、更加安全。

小程序背靠微信、支付宝等流量平台的红利,可以快速低成本获得用户。但对于中小型企业,仍有待解决的难点。对于开发者来说,WXML、WXSS、架构、规则、文档可能都是陌生事物。

今天就聚焦于小程序的编译原理,为大家做一次技术分享。


小程序编译

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

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

什么是 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。

小程序的深化价值

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

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

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

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

有关技术干货贴|小程序WXSS编译原理的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep,它会中断应用程序。否则,计算机将持续运行数周,直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗?欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数,使应用程序能够通知系统它正在使用中,从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  3. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后,Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用,我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  4. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此

  5. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  6. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

  7. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  8. ruby - Sinatra set cache_control to static files in public folder编译错误 - 2

    我不知道为什么,但是当我设置这个设置时它无法编译设置:static_cache_control,[:public,:max_age=>300]这是我得到的syntaxerror,unexpectedtASSOC,expecting']'(SyntaxError)set:static_cache_control,[:public,:max_age=>300]^我只想将“过期”header设置为css、javaascript和图像文件。谢谢。 最佳答案 我猜您使用的是Ruby1.8.7。Sinatra文档中显示的语法似乎是在Ruby1.

  9. ruby - 检查是否通过 require 执行或导入了 Ruby 程序 - 2

    如何检查Ruby文件是否是通过“require”或“load”导入的,而不是简单地从命令行执行的?例如:foo.rb的内容:puts"Hello"bar.rb的内容require'foo'输出:$./foo.rbHello$./bar.rbHello基本上,我想调用bar.rb以不执行puts调用。 最佳答案 将foo.rb改为:if__FILE__==$0puts"Hello"end检查__FILE__-当前ruby​​文件的名称-与$0-正在运行的脚本的名称。 关于ruby-检查是否

  10. ruby-on-rails - 如何在 Gem 中获取 Rails 应用程序的根目录 - 2

    是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录?这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢,抱歉我的英语不好 最佳答案 我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以,在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码,您的模块将在

随机推荐