1.简介wxs语法

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。

比如,在有些部分用 js 语法不能实现的部分就可以用 wxs 来实现。
详细来说,如一个查询部分:一个输入框,当在输入框里输入时,下面就会自动找出包含输入内容的信息。这里如果我们不添加其他的按钮的时候,使用 js 语法就不可能。就要使用到 wxs 语法了。

2.引用方式

WXS 代码可以编写在 wxml 文件中的 标签内,或以 .wxs 为后缀名的文件内。
每一个 .wxs 文件和 标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。
如:
<wxs src="./../tools.wxs" module="tools" />
src 为 .wxs 文件相对于本文件的相对位置,而 module 是模块的名字,可以自己取,建议唯一,若重复则后者会覆盖前者,在后面使用中会使用到。

var foo = "'hello world' from tools.wxs";   //tools.wxs文件
var bar = function (d) {return d;
}
module.exports = {FOO: foo,bar: bar,
};
module.exports.msg = "some msg";
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

结果:

some msg
'hello world' from tools.wxs

3.在.wxs模块中引用其他 wxs 文件模块,可以使用 require 函数

1.只能引用 .wxs 文件模块,且必须使用相对路径。
2.wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
3.如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。

上面的 tools.wxs 文件为例

var tools = require("./tools.wxs");  //1.wxsconsole.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

<wxs src="./1.wxs" module="test" />

结果:

'hello world' from tools.wxs
logic.wxs
some msg

4.注意事项

1. 模块只能在定义模块的 WXML 文件中被访问到。使用 或 时, 模块不会被引入到对应的 WXML 文件中。
2. 标签中,只能使用定义该 的 WXML 文件中定义的 模块。

微信小程序wxs语法相关推荐

  1. 微信小程序 基础语法

    微信小程序 基础语法 官网:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/ .wxml文件中 列表渲染 <view ...

  2. 微信小程序基本语法介绍

    我们用了一定的篇幅介绍了一下小程序的全局语法,包括app.json的配置,app.js的语法及全局样式app.wxss的配置.本节我们就介绍一下页面的具体语法. 页面组成 小程序是由一个个页面组成的, ...

  3. 微信小程序——基本语法

    WXML语法 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 数据绑定 <!--数据绑定使用 Mustache ...

  4. 微信小程序插值语法和数组变量检测踩过的坑

    引言 微信小程序用的是vue,但是又不同于vue,这就导致我们容易基于vue的思维来踩坑 插值语法 我当时尝试在wxml文件给插值语法的数据调用js内部的方法,但是显示的却是NAN,我查了一下,发现w ...

  5. 微信小程序wxs封装使用以及公共js组件封装

    wxs封装 wxs可以直接写在wxml页面中,并且在对应的位置调用,比如在{{ xxx.xxx() }}调用wxs的函数 <view><view>第{{m1.getMax(1) ...

  6. 微信小程序---wxs文件(脚本文件)的解读与使用

    一.wxs文件(脚本文件) wxs就是在page-frame中运行的js,可以在view数据做一些变换. wxs对性能的贡献就只有一点:与wxml是在同一个线程运行的,避免了跨线程通信的开销 简单来说 ...

  7. 微信小程序WXSS语法介绍

    WXSS 样式 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS与Web开发中的CSS类似.为了更适合小程序开发 ...

  8. 微信小程序WXS模块的使用

    WXS模块的使用 微信官方文档地址 index.wxml <view class="container"><view>{{common.msg}}</ ...

  9. 移动端 | Vue.js对比微信小程序基础语法

    (1)vue 自定义组件与父组件的通信,props:[abb],可以看成自组建的一个自定义属性 (2)vue 模版语法{{}} 只能是在DOM中插入,<div>{{acc}}</di ...

最新文章

  1. 遍历Stream并设置属性值
  2. python3 转换json数据的单引号双引号注意点
  3. python课程将主要介绍哪些内容-Python课程详细介绍
  4. 两个相邻时间之间的差值计算
  5. React Native通信机制详解
  6. 不止代码 洛谷P1006 传纸条(dp)
  7. oracle 会话实例,返璞归真:Oracle实例级别和会话级别的参数设置辨析
  8. elementui树形复选框,element-ui checkbox 组件的树形联动
  9. os.path vs pathlib
  10. 晶振两端的谐振电容有特殊要求吗_干货 | 晶振电路设计诀窍
  11. 算法导论 CLRS 23.3 解答 (未完成)
  12. 爬虫python能做什么-Python除了爬虫,还能干啥?
  13. Silverlight.XNA(C#)跨平台3D游戏研发手记:(七)向Windows Phone移植之双向交互
  14. 怎么使用ABBYY中的Bates编号
  15. 《东周列国志》第七十二回 棠公尚捐躯奔父难 伍子胥微服过昭关
  16. AHP(层次分析法)的全面讲解及python实现
  17. 安装第三方库,出现“error: Microsoft Visual C++ 14.0 is required. Get it with “Microsoft Visual……”解决方案
  18. switch怎么用字符c语言,switch怎么用c语言-switch用c语言讲解
  19. 考研人最烦的6句话,教你霸气回怼!
  20. Linux攻关之基础模块七 命令总结

热门文章

  1. 抖音小程序--如何进行小视频挂载??
  2. java ftpclient 池_FTPClient,连接池实现
  3. 【知识图谱】(task3)知识图谱的存储和查询
  4. 谷歌:此Google帐户尚未与设备相关联安装应用程序之前请访问您设备上的googleplay商店应用程序怎么解决?
  5. 实录分享 | Google Borg 系统 与 Coding Docker 实践
  6. 计算机为什么设置网关地址,默认网关怎么设置?默认网关怎么填?
  7. 数据上云|OneMO DTU数传模组接入OneNET云平台操作详细过程
  8. java 加载 xsd文件_Spring中自定义xsd文件操作方式
  9. 监控windows服务,当服务停止后自动重启服务
  10. 关于确界的一些习题与结论