微信小程序wxs语法
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语法相关推荐
- 微信小程序 基础语法
微信小程序 基础语法 官网:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/ .wxml文件中 列表渲染 <view ...
- 微信小程序基本语法介绍
我们用了一定的篇幅介绍了一下小程序的全局语法,包括app.json的配置,app.js的语法及全局样式app.wxss的配置.本节我们就介绍一下页面的具体语法. 页面组成 小程序是由一个个页面组成的, ...
- 微信小程序——基本语法
WXML语法 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 数据绑定 <!--数据绑定使用 Mustache ...
- 微信小程序插值语法和数组变量检测踩过的坑
引言 微信小程序用的是vue,但是又不同于vue,这就导致我们容易基于vue的思维来踩坑 插值语法 我当时尝试在wxml文件给插值语法的数据调用js内部的方法,但是显示的却是NAN,我查了一下,发现w ...
- 微信小程序wxs封装使用以及公共js组件封装
wxs封装 wxs可以直接写在wxml页面中,并且在对应的位置调用,比如在{{ xxx.xxx() }}调用wxs的函数 <view><view>第{{m1.getMax(1) ...
- 微信小程序---wxs文件(脚本文件)的解读与使用
一.wxs文件(脚本文件) wxs就是在page-frame中运行的js,可以在view数据做一些变换. wxs对性能的贡献就只有一点:与wxml是在同一个线程运行的,避免了跨线程通信的开销 简单来说 ...
- 微信小程序WXSS语法介绍
WXSS 样式 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS与Web开发中的CSS类似.为了更适合小程序开发 ...
- 微信小程序WXS模块的使用
WXS模块的使用 微信官方文档地址 index.wxml <view class="container"><view>{{common.msg}}</ ...
- 移动端 | Vue.js对比微信小程序基础语法
(1)vue 自定义组件与父组件的通信,props:[abb],可以看成自组建的一个自定义属性 (2)vue 模版语法{{}} 只能是在DOM中插入,<div>{{acc}}</di ...
最新文章
- 遍历Stream并设置属性值
- python3 转换json数据的单引号双引号注意点
- python课程将主要介绍哪些内容-Python课程详细介绍
- 两个相邻时间之间的差值计算
- React Native通信机制详解
- 不止代码 洛谷P1006 传纸条(dp)
- oracle 会话实例,返璞归真:Oracle实例级别和会话级别的参数设置辨析
- elementui树形复选框,element-ui checkbox 组件的树形联动
- os.path vs pathlib
- 晶振两端的谐振电容有特殊要求吗_干货 | 晶振电路设计诀窍
- 算法导论 CLRS 23.3 解答 (未完成)
- 爬虫python能做什么-Python除了爬虫,还能干啥?
- Silverlight.XNA(C#)跨平台3D游戏研发手记:(七)向Windows Phone移植之双向交互
- 怎么使用ABBYY中的Bates编号
- 《东周列国志》第七十二回 棠公尚捐躯奔父难 伍子胥微服过昭关
- AHP(层次分析法)的全面讲解及python实现
- 安装第三方库,出现“error: Microsoft Visual C++ 14.0 is required. Get it with “Microsoft Visual……”解决方案
- switch怎么用字符c语言,switch怎么用c语言-switch用c语言讲解
- 考研人最烦的6句话,教你霸气回怼!
- Linux攻关之基础模块七 命令总结
热门文章
- 抖音小程序--如何进行小视频挂载??
- java ftpclient 池_FTPClient,连接池实现
- 【知识图谱】(task3)知识图谱的存储和查询
- 谷歌:此Google帐户尚未与设备相关联安装应用程序之前请访问您设备上的googleplay商店应用程序怎么解决?
- 实录分享 | Google Borg 系统 与 Coding Docker 实践
- 计算机为什么设置网关地址,默认网关怎么设置?默认网关怎么填?
- 数据上云|OneMO DTU数传模组接入OneNET云平台操作详细过程
- java 加载 xsd文件_Spring中自定义xsd文件操作方式
- 监控windows服务,当服务停止后自动重启服务
- 关于确界的一些习题与结论