微信小程序WXS 有什么用?
微信WXS介绍
WXS(WeiXin Script)是微信创造的一套脚本语言,它的官方说法是:“WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致”。
那微信为何要脱离 JavaScript ,单独创造一套语言呢?这要从微信小程序的底层逻辑(运行环境)讲起。
小程序的运行环境分为逻辑层和视图层,分别由2个线程管理,其中:
WXML 模板和 WXSS 样式工作在视图层,界面使用 WebView 进行渲染
JavaScript代码工作在逻辑层,运行在JsCore或v8里
小程序在视图层与逻辑层两个线程间提供了数据传输和事件系统。这样的分离设计,带来了显而易见的好处:
逻辑和视图分离,即使业务逻辑计算非常繁忙,也不会阻塞渲染和用户在视图层上的交互
但同时也带来了明显的坏处:
视图层(webview)中不能运行JS,而逻辑层JS又无法直接修改页面DOM,数据更新及事件系统只能靠线程间通讯,但跨线程通信的成本极高,特别是需要频繁通信的场景
从本质来讲,wxs是一种被限制过的、运行在视图层webview里的js。它并不是真的发明了一种新语言。
WXS特征及适用场景
WXS具备如下特征:
WXS是可以在视图层(webview)中运行的JS
WXS无法直接修改业务数据,仅能设置当前组件的class和style,或者对数据进行格式化。
WXS是被限制过的JavaScript,可以进行一些简单的逻辑运算
故可以得出WXS的适用场景,主要包括:
数据格式处理,比如文本、日期格式化,或者国际化。
类比vue
微信小程序的wxs语法 可以当做vue的计算属性和vue filter 使用。因为wxs中的函数可以写在{{ }}中 。
例如:
可用在
<view>{{ foo() }}</view>
知识背景
其实今天总结wxs是有真实背景的,在周末我在开发在线答题小程序的过程中,需要在一个radio中存放一个字符串,但是这个字符串需要通过JSON.stringfy转化成字符串,但是微信小程序本身的wxml绑定{{}}并不支持,所以才有了本文。
就是说在wxml中如果需要对小程序的this.data数据进行额外的操作,就可以用wxs,这个在vue里面就是计算属性。
帖子来源
https://developers.weixin.qq.com/community/develop/doc/000a2ab8840b9011be89e3d3d56c00