评论

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

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

4 个评论

  • 小肥羊🐑🥬
    小肥羊🐑🥬
    12-02

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

    12-02
    赞同 1
    回复
  • 菜汤不甜
    菜汤不甜
    12-02

    wxs这块有问题,可以帮忙看下嘛https://developers.weixin.qq.com/community/develop/doc/000a448c2f07b022bf8927a9f51000?jumpto=comment&commentid=000c04a5f286c0a3ba8941f065b4

    12-02
    赞同
    回复
  • Hanks
    Hanks
    12-02

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

    12-02
    赞同
    回复 2
    • 小肥羊🐑🥬
      小肥羊🐑🥬
      12-02回复小肥羊🐑🥬
      每个人对小程序的熟悉程度不一样,对您可能很easy的知识点,对我可能就非常难啃,每个人起步一样,我觉得我已经整理成这样,对我收货很大,我没义务让所有人都觉得看了就有收货。
      12-02
      2
      回复
    • Hanks
      Hanks
      12-02回复小肥羊🐑🥬
      努力吧
      12-02
      回复
  • 米法(BINNIE SMILE)
    米法(BINNIE SMILE)
    12-02
    自言自语,根本就不是做笔记
    12-02
    赞同
    回复 2
    • 小肥羊🐑🥬
      小肥羊🐑🥬
      12-02
      自娱自乐,自学自卖,仅此而已。
      12-02
      回复
    • 菜汤不甜
      菜汤不甜
      星期五 10:07
      笔记是给看自己的,文章才是给别人看的,各位评论的不要难为人家了
      星期五 10:07
      回复