开发 | 只需 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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React Native项目组织结构介绍

代码组织: 目录结构: . ├── components //组成应用的各个组件 │   ├── Routers.android.js //每个组...

2737
来自专栏电光石火

推荐几款比较好看HTML admin后台模板

H+是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了...

5.5K1
来自专栏软件测试经验与教训

Fiddler用法整理

读书与实践是获取知识的主要渠道,学习的权力只掌握在每个人自己手中,让学习成为一种生活的习惯,这比任何名牌大学的校徽重要得多!

1561
来自专栏优启梦

PHP使用curl取HTTP状态码

3399
来自专栏一个爱瞎折腾的程序猿

react-native 项目初始化

1871
来自专栏技术博客

ExtJs十一(ExtJs Mvc图片管理之一)

图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内。因而,将图片管理做成一个扩展比较方便。当然,做成MVC模式也行,不争...

1373
来自专栏技术博客

ExtJs十三(ExtJs Mvc图片管理之三)

现在要完成目录的编辑操作。因为目录的编辑只是改变目录名称,因而使用Cellediting插件就可完成工作。要完成这个不难,首先在目录树的定义中加入以下语句隐藏列...

1203
来自专栏云计算教程系列

如何使用WP-CLI安装WordPress

很多人都熟悉WordPress的安装,Wordpress安装起来非常简单,其号称5分钟快速安装。但是,当您需要部署多个Wordpress时,重复的工作会拖慢你大...

1632
来自专栏张戈的专栏

桌面白屏(Active故障)修复批处理

一年前我在做用户系统维护服务工作时发现 AD 域环境下,AD 用户桌面经常会出现壁纸无法显示,ActiveDesktop 桌面损坏之类的故障,当时从前人心得里学...

3356
来自专栏码生

实现更安全、高扩展的自定义键盘 非UIButton

自定义键盘的封装网上的例子比比皆是,有的封装的非常完美,直接pod 集成到项目中便可以简单的使用,可是为什么我还要自定义一个呢? 一不是不是为了显摆,二不是网...

1182

扫码关注云+社区

领取腾讯云代金券