WXSS 如何进行编译?

news2024/11/20 19:28:18

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

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

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

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

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

相关文章

【C++核心编程】C++全栈体系(十)

C核心编程 第四章 类和对象 六、继承 继承是面向对象三大特性之一 有些类与类之间存在特殊的关系,例如下图中: 我们发现,定义这些类时,下级别的成员除了拥有上一级的共性,还有自己的特性。 这个时候我们就可以考…

华为DHCPv6实验配置

目录 配置AR1作为DHCPv6服务器为PC1分配IPv6地址 配置AR2作为DHCPv6服务器,AR1作为DHCPv6中继器为PC2分配IPv6地址 配置AR3作为DHCPv6 PD服务器为AR1分配地址前缀 什么是DHCP PD 配置AR1作为DHCPv6服务器为PC1分配IPv6地址 AR1 DHCPv6服务器端配置 ipv6 …

解决N+1问题的另一种方法 - 关联的多结果集ResultSet

如果我的博客对你有帮助,欢迎进行评论✏️✏️、点赞👍👍、收藏⭐️⭐️,满足一下我的虚荣心💖🙏🙏🙏 。 从版本 3.2.3 开始,MyBatis 提供了另一种解决 N1 查询问题的方…

C语言——位段

文章目录思维导图:一. 什么是位段二.位段的内存分配三.位段的跨平台问题四.位段的应用结语:思维导图: 一. 什么是位段 位段的声明和结构体类似,但是有2个不同: 位段的成员必须是int、unsigned int 或 signed int(在很多平台上cha…

python自学之《21天学通Python》(9)——基于tkinter的GUI编程

第12章 基于tkinter的GUI编程 Windows的图形用户界面非常方便用户操作,因此,Windows操作系统得到了广大个人计算机用户的欢迎。在Python中,也可以编写美观的GUI界面应用程序与项目。tkinter是Python自带的用于GUI编程的模块,tkin…

【论文速递】CVPR2022 - 学习 什么不能分割:小样本分割的新视角

【论文速递】CVPR2022 - 学习 什么不能分割:小样本分割的新视角 【论文原文】:Learning What Not to Segment: A New Perspective on Few-Shot Segmentation 获取地址:https://openaccess.thecvf.com/content/CVPR2022/papers/Lang_Learning_What_Not_…

Linux--线程控制--线程相关函数--tid--0109 10

1.如何理解线程 定义:在一个程序里的一个执行路线就叫做线程(thread)。 更准确的定义是:线程是“一个进程内部的控制序列”。 每个进程都有自己的进程地址空间和task_struct结构体,如果我们通过一定的方式在创建进程…

【记录】ChatGPT|近期两次更新一览(更新至2023年1月12日)

如果你还没有使用过ChatGPT,可以先看看我的上一篇文章:【记录】ChatGPT|注册流程、使用技巧与应用推荐(更新至2022年12月14日)。   昨天晚上,ChatGPT突然很多人都无法登录,包括我。我当时以为…

SpringBoot+Redis+@Cacheable实现缓存功能

SpringBootRedisCacheable实现缓存功能一、pom文件加入Redis与cache的依赖和yml配置二、EnableCaching允许使用注解进行缓存三、Redis配置四、业务逻辑1.UserController2.UserService3.UserServiceImpl4.AdminServiceImpl5.Cacheable和CachePut区别五、测试1.执行saveUser方法2…

剑指offer----C语言版----第十七天----面试题23:链表中环的入口节点

目录 1. 链表中环的入口节点 1.1 环形链表Ⅰ 1.1.1 题目描述 1.1.2解题思路 1.1.3 扩展问题 1.2 环形链表Ⅱ 1.2.1 题目描述 1.2.2 思路分析 1. 链表中环的入口节点 在leetcode上的剑指offer专栏没有收录这道题目,但Leetcode上是有这道题目的,环…

U3D客户端框架之 音效管理器 与 Fmod介绍安装导入Unity

一、Fmod介绍与安装导入Unity 1.Fmod与Unity内置Audio播放器对比 Unity内置的Audio底层使用的是FMOD,但是功能不够齐全,高级一点的功能如混合(Mix)等无法使用; 音效管理应该和Unity工程解耦合,这样子可以减轻音效设计师的负担&a…

ArcGIS基础实验操作100例--实验86矢量面重叠分析

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台:ArcGIS 10.6 实验数据:请访问实验1(传送门) 空间分析篇--实验86 矢量面重叠分析 目录 一、实验背景 二、实验数据 三、实验步骤 (1&am…

初阶指针详解✍

目录1.内存和地址2.指针变量的大小3.指针类型的意义意义1:指针访问权限的大小意义2:指针类型决定指针的步长4.野指针野指针成因如何规避野指针5.指针的运算指针加减整数指针减指针指针的比较运算6.指针与数组的关系7.二级指针1.内存和地址 内存是电脑上特…

2、C语言程序规范

目录 1. 代码缩进 2. 变量、常量命名规范 3. 函数的命名规范 4. #include指令 5. 注释 6. main函数 7.函数返回值 8. 变量赋初值 俗话说&#xff0c;“没有规矩&#xff0c;不成方圆。” 如&#xff1a;第一个程序 #include <stdio.h>void main(){printf("…

基于java Springmvc+mybatis 电影院售票管理系统设计和实现以及文档

基于java Springmvcmybatis 电影院售票管理系统设计和实现以及文档 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java毕设项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留…

vue报错汇总

项目场景&#xff1a; 使用vue报错汇总。 1、项目启动不报错也不成功 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; 项目启动时&#xff0c;一直启动不成功&#xff0c;末句提示 98% emitting Copyplugin… 原因分析&#xff1a; 最有可能是因为require或者import了…

系统设计技巧:使用Postgres作为发布/订阅和作业服务器

如果在项目中需要发布/订阅和作业服务器&#xff0c;可以尝试使用 Postgres。它将为您提供大量数据完整性和性能保证&#xff0c;并且不需要您或您的团队学习任何新技术。如果你正在做任何足够复杂的项目&#xff0c;你将需要一个 发布/订阅[1] 服务器来处理事件。本文将向你介…

黑马“兔年限定”春节礼盒准时送达,快来领!

哈咯艾瑞巴蒂&#xff0c;我是播妞前几天一个热搜引起了我的注意# 原来兔年要打384天的工 #看到这标题播妞突然头皮发紧我搜索了一下&#xff0c;原来是......农历癸卯兔年全年共有384天今年的春节是2023年1月22号2024年的春节是2月10号从今年春节到明年的春节算一年由于“闰二…

XCTF:ics-05

测试了所有功能点&#xff0c;大部分没有做出来&#xff0c;只有设备维护中心可以点击 查看源码&#xff0c;发现云平台设备维护中心这里有一个超链接 看到变量传参page&#xff0c;有点像页面文件包含功能&#xff0c;那有可能存在文件包含&#xff0c;测试下&#xff1a; …

ORB-SLAM2 --- LoopClosing::CorrectLoop函数

目录 1.函数作用 2.函数流程 3.code 4.函数解析 4.1 结束局部地图线程、全局BA&#xff0c;为闭环矫正做准备 4.2 根据共视关系更新当前关键帧与其它关键帧之间的连接关系 4.3 通过位姿传播&#xff0c;得到Sim3优化后&#xff0c;与当前帧相连的关键帧的位姿&#xf…