评论

微信小程序WXS 有什么用?

微信小程序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

最后一次编辑于  2019-12-02  
点赞 9
收藏
评论

5 个评论

  • 小肥羊🍊
    小肥羊🍊
    2019-12-02

    大家不要评论,我记录下,仅此而已。

    2019-12-02
    赞同 4
    回复
  • 鸣
    2023-12-09

    我觉得挺好的呀, 有自己的思考, 也能启发读者. 退一步说, 微信官方开发文档写得那么烂, 不一样公开给人看吗.

    2023-12-09
    赞同 1
    回复
  • 查小飞
    查小飞
    2020-10-19

    怎么还有看不起的?真是,会敲两个字母就把你牛逼坏了?活该搬砖一辈子。

    2020-10-19
    赞同 1
    回复
  • 王浩Hanks🇨🇳
    王浩Hanks🇨🇳
    2019-12-02

    笔记做成这样,就别公开了,我是不太好意思 -.-

    2019-12-02
    赞同
    回复 2
    • 小肥羊🍊
      小肥羊🍊
      2019-12-02回复小肥羊🍊
      每个人对小程序的熟悉程度不一样,对您可能很easy的知识点,对我可能就非常难啃,每个人起步一样,我觉得我已经整理成这样,对我收货很大,我没义务让所有人都觉得看了就有收货。
      2019-12-02
      5
      回复
    • 王浩Hanks🇨🇳
      王浩Hanks🇨🇳
      2019-12-02回复小肥羊🍊
      努力吧
      2019-12-02
      回复
  • Mr.Zhao
    Mr.Zhao
    2019-12-02
    自言自语,根本就不是做笔记
    2019-12-02
    赞同
    回复 1
    • 小肥羊🍊
      小肥羊🍊
      2019-12-02
      自娱自乐,自学自卖,仅此而已。
      2019-12-02
      1
      回复
登录 后发表内容