专栏首页知晓程序开发 | 只需 2 分钟!带你玩转小程序新语言 WXS

开发 | 只需 2 分钟!带你玩转小程序新语言 WXS

最近,微信官方

WXS 是微信官方推出的一种脚本语言。引入 WXS 后,小程序开发者可以将数据处理代码进行拆分,打造逻辑更灵活的小程序

小程序开发者应该如何在小程序里,使用 WXS 呢?知晓程序(微信号 zxcx0101)今天就来一步步教你如何使用 WXS。

关注「知晓程序」微信公众号,在微信后台回复「开发」,获取小程序全套开发经验。

WXS 的语法是怎样的?

WXS 的语法与 JavaScript 如出一辙,在 JS 中可用的语句,WXS 几乎都可以支持。

例如,你可以在 WXML 中,写如下代码:

执行语句后,在小程序中它可以输出「Hello World」;在调试控制台中,我们也可以看到「Hello」的提示语句出现。

某种程度上,我们也可以将 WXS 视作插入在 WXML 中的 JS 代码,虽然二者在本质上是两种语言。

需要注意的是,小程序中的 WXS 无法使用小程序的 API 接口,以及全局函数。WXS 只能读取 JS 中的 data,并加以处理、使用。

同时,只有在 WXML 中使用 Mustache 语法(双花括号)引用 WXS 模块中的内容,WXS 中的代码才会加载、执行。

如何在小程序项目里开启 WXS?

在最新版的「微信 Web 开发者工具 Beta」中,我们就已经可以开启 WXS 功能了。

需要注意的是,普通的「微信 Web 开发者工具」是没有 WXS 选项的

关注「知晓程序」微信公众号,回复「我要用工具」,查看「微信 Web 开发者工具 Beta」的下载地址。

在开发者工具中,我们可以这样启用 WXS:

  • 进入需要启用 WXS 功能的项目。
  • 点击开发者工具右上角的「项目」按钮。
  • 在「项目设置」中,勾选「使用 WXS」。

之后,我们就可以在项目中使用 WXS 了。

需要注意的是,无论用户的微信版本是多少,你都可以直接启用 WXS

开发者工具在编译、上传代码的时候,会自动将你的 WXS 代码进行转义,所以无需担心兼容性问题。

如何使用 WXS?

微信为我们提供了两个使用 WXS 方法:直接插入 WXS 代码,以及引用 WXS 文件。

1. 直接插入 WXS 代码

直接在 <wxs> 标签里,插入 WXS 代码。

2. 引用 WXS 文件

新建并编写 WXS 文件后,在 WXML 的 WXS 标签中,利用 src 属性,引用相对位置的 WXS 文件。

需要注意的是,每一个 WXS 模块,都需要用 module 标签进行命名。命名模块后,开发者工具才能正常进行编译、在 WXML 中引用模块中的变量与函数。

另外,小程序的条件渲染和循环渲染对 WXS 是无效的

也就是说,即使将 WXS 代码包裹在未渲染的代码中,只要渲染的 WXML 部分调用了此模块,这段 WXS 代码依然会被加载。

关于 WXS,我们就说到这里,希望得知更多有关 WXS 的信息,可以查阅官方文档。

关注「知晓程序」微信公众号,在微信后台回复「文档」,获取小程序官方技术文档地址。

本文分享自微信公众号 - 知晓程序(zxcx0101),作者:让你更知小程序的

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 这款小程序,带你去飞机、火车到不了的地方

    那么问题就来了:去客运站排队买票太麻烦;在网上买的话,不同的车站有不同的客户端、微信服务号,一个个去下载、关注也够烦。

    知晓君
  • 答题类小程序大热回归,连「国家队」也出来搞事情 | 晓访

    知晓君
  • 在小程序里实现手势缩放,你可以这样做 | 实战教程

    知晓君
  • python3 函数

    py3study
  • 目标检测(object detection)系列(十二) CornerNet:anchor free的开端

    过去的目标检测算法,two-stage方法从Faster R-CNN开始,one-stage方法从SSD开始,都无一例外的引入了anchor,anchor先验的...

    chaibubble
  • 一文学会使用全球第四大数字芯片仿真器iverilog!

    Icarus Verilog(以下简称iverilog )号称“全球第四大”数字芯片仿真器,也是一个完全开源的仿真器。由于Synopsys、Cadence、Me...

    碎碎思
  • 一文学会使用全球第四大数字芯片仿真器iverilog!

    Icarus Verilog(以下简称iverilog )号称“全球第四大”数字芯片仿真器,也是一个完全开源的仿真器。由于Synopsys、Cadence、Me...

    网络交换FPGA
  • 程序员必备开发神器【MAC篇】

    上图,Alfred 图标,放大镜+小帽子,个人理解的意思就是搜索+酷,而且酷占了大部分,没错,一旦使用你了Alfred,你就会觉得自己非常的酷,就像你打绝地求生...

    先知先觉
  • 黑客利用“Trition”恶意软件关闭了关键的基础设施工厂

    文/仙踪数码 胜云 据网络调查人员和其软件被攻击的公司称,黑客最近入侵了国外一个关键基础设施的安全系统,这是一次分水岭攻击,导致工厂停止运营。 周四,火眼公司披...

    企鹅号小编
  • 项目那些事?真人真事,真实在话。

    市场人员会对项目进行评估,这时候,便是彰显一个市场人员的底气和能力的时候了,是时候表演真正的技术了。

    赵腰静

扫码关注云+社区

领取腾讯云代金券