7、微信小程序-wxs脚本
1、什么是 WXS
WXS ( WeiXin Script )
是小程序独有的一套脚本语言,结合 WXML ,可以构建出页面的结构。
2、WXS 的应用场景
wxml 中无法调用在页面的 .js 中定义的函数(不包括事件绑定),但是, wxml 中可以调用 wxs 中
定义的函数。因此,小程序中 wxs 的典型应用场景就是“过滤器”。
3、WXS 的特点
1、与 JavaScript 不同:
为了降低 wxs ( WeiXin Script )的学习成本, wxs 语言在设计时借大量鉴了 JavaScript 的语
法。但是本质上, wxs 和 JavaScript 是完全不同的两种语言
!,主要有以下区别:
虽然 wxs 的语法类似于 JavaScript ,但是 wxs 和 JavaScript 是完全不同的两种语言:
① wxs 有自己的数据类型
number 数值类型、 string 字符串类型、 boolean 布尔类型、 object 对象类型、
function 函数类型、 array 数组类型、 date 日期类型、 regexp 正则
② wxs 不支持类似于 ES6 及以上的语法形式
不支持: let 、 const 、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
支持: var 定义变量、普通 function 函数等类似于 ES5 的语法
③ wxs 遵循 CommonJS 规范
module 对象
require() 函数
module.exports 对象
2、. 不能作为组件的事件回调:
wxs 典型的应用场景就是“过滤器”
,经常配合 Mustache 语法进行使用,例如:
但是,在 wxs 中定义的函数不能作为组件的事件回调函数。例如,下面的用法是错误的:
c. 隔离性
隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面:
① wxs 不能调用 js 中定义的函数
② wxs 不能调用小程序提供的 API
d. 性能好
在 iOS 设备上,小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
在 Android 设备上,二者的运行效率无差异
4、使用WXS
1)内嵌 wxs 脚本
wxs 代码可以编写在 wxml 文件中的 标签内,就像 Javascript 代码可以编写在 html 文件中的 标
签内一样。
wxml 文件中的每个 标签,必须提供 module 属性,用来指定当前 wxs 的模块名称,方便在wxml 中访问模块中的成员,示例代码如下:
<!-- 定义一个文本,调用wxs中的方法 -->
<view>{{ m1.toUpper(username) }}</view>
<!-- 定义一个wxs的标签,并指定module模块名称 -->
<wxs module="m1">
<!-- 向外暴露一个方法 -->
module.exports.toUpper = function(str) {return str.toUpperCase()
}
</wxs>
2)外联的 wxs 脚本
wxs 代码还可以编写在以 .wxs 为后缀名的文件内,就像 Javascript 代码可以编写在以 .js 为后
缀名的文件中一样。示例代码如下:
// 1.定义方法
function toLower(str) {return str.toLowerCase()
}
// 2.暴露成员
module.exports = {toLower: toLower
}
在 wxml 中引入外联的 wxs 脚本时,必须为 标签添加 module 和 src 属性,其中:
module 用来指定模块的名称
src 用来指定要引入的脚本的路径,且必须是相对路径
示例代码如下:
<!-- 1.使用外联式引入外部的wxs文件 -->
<wxs module="m2" src="../../utils/tools.wxs"></wxs>
<!-- 2.调用 m2 模块的方法 -->
<view>{{ m2.toLower(country) }}</view>
7、微信小程序-wxs脚本相关推荐
- 微信小程序——wxs脚本
WXS目录 一.WXS的概述 1.什么是wxs 2.应用场景: 3. wxs 与JavaScript (1)wxs 支持的数据类型: (2)wxs 不支持类似于 ES6 及以上的语法形式 (3)wxs ...
- 微信小程序-WXS脚本
1.概述:WXS(WeiXin Script)是小程序独有的一套脚本语言,结合 WXML,可以构建出页面的结构. 2. wxs 的应用场景 wxml 中无法调用在页面的 .js 中定义的函数,但是,w ...
- 微信小程序---wxs文件(脚本文件)的解读与使用
一.wxs文件(脚本文件) wxs就是在page-frame中运行的js,可以在view数据做一些变换. wxs对性能的贡献就只有一点:与wxml是在同一个线程运行的,避免了跨线程通信的开销 简单来说 ...
- 微信小程序的脚本就是c语言,新手尝试编写微信小程序(2)——我的第一个微信小程序...
前面,我们大体上了解了微信小程序的框架,已经简单的页面元素显示方法及变量和自定义函数的调用.这里我们继续来探索隐藏在微信默认新建的小程序中的秘密.这篇博文,我们来进一步了解一下第一个小程序中的几个典型 ...
- 微信小程序wxs封装使用以及公共js组件封装
wxs封装 wxs可以直接写在wxml页面中,并且在对应的位置调用,比如在{{ xxx.xxx() }}调用wxs的函数 <view><view>第{{m1.getMax(1) ...
- 微信小程序WXS模块的使用
WXS模块的使用 微信官方文档地址 index.wxml <view class="container"><view>{{common.msg}}</ ...
- 微信小程序WXS的使用
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,wxs类似js和js又不一样,好多js语法能在js使用不能在wxs使用可以构建出页面的结构.wxs有两种使用方式: 1. 单 ...
- 微信小程序 WXS(WeiXin Script)
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构. 注意: wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行. wxs 与 javasc ...
- 微信小程序---JavaScript脚本
小程序的主要开发语言是JavaScript.我们介绍以下小程序的独特开发,js到复习的时候详细介绍 一.模块化 1.对外暴露接口(moudule.exports) 在一个js文件中我们可以把整个文件当 ...
- 微信小程序 Wxs篇
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构. [注意] WXS 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行. WXS 与 JavaS ...
最新文章
- C++范围解析运算符::
- R语言ggplot2可视化柱状图(条形图)可视化中保留没有用到的因子水平(占位保留)
- c/c++十七: 变长参数
- java导出csv文件使用Excel打开乱码问题
- how to check unsolved conflicts file list in git merge?
- 金古桥机器人_泽塔奥特曼上演“吃瘪预定”,金古桥强势回顾,阿尔法被骑着打脸...
- Vue-组件之间的数据共享
- Nginx连接fastcgi的方式
- 【Fltk】Fltk1.3.3+VS2015 编程
- Java基础之==与equal()的区别
- 微信小程序开发出现Page “pages/detail/detail” has not been registered yet.
- svm 预测标签的概率输出
- 51单片机60秒倒计时 数码管显示
- 怎么建立局域网_win8系统如何建立局域网 win8建立局域网操作方法【步骤详解】...
- 三口烧瓶规格有哪些_三口烧瓶有哪些规格,用途是什么 | | 化工资讯网
- pygame-KidsCanCode系列jumpy-part16-enemy敌人
- 文本检测时对图片进行方向矫正
- 转载:Openssl生成rsa和椭圆曲线加密公钥密钥创建根ca签名https服务器证书签名...
- 面试高频算法题补充系列:如何判断一个点是否在三角形内?
- K12526 找双亲和孩子