wordpress网站换空间,专业建材网站建设,开发个网站开票名称是什么意思,泊头做网站#x1f48c; 所属专栏#xff1a;【微信小程序开发教程】 #x1f600; 作 者#xff1a;我是夜阑的狗#x1f436; #x1f680; 个人简介#xff1a;一个正在努力学技术的CV工程师#xff0c;专注基础和实战分享 #xff0c;欢迎咨询#xff01; … 所属专栏【微信小程序开发教程】 作 者我是夜阑的狗 个人简介一个正在努力学技术的CV工程师专注基础和实战分享 欢迎咨询 欢迎大家这里是CSDN我总结知识的地方喜欢的话请三连有问题请私信 文章目录前言一、WXS 脚本1、什么是 wxs2、wxs 的应用场景3、. wxs 和 JavaScript 的关系二、WXS 脚本 - 基础语法1、内嵌 wxs 脚本2、定义外联的 wxs 脚本3、使用外联的 wxs 脚本三、WXS 的特点1、与 JavaScript 不同2、不能作为组件的事件回调3、隔离性4、性能好总结前言 大家好又见面了我是夜阑的狗本文是专栏【微信小程序开发教程】专栏的第29篇文章; 今天开始学习微信小程序的第15天开启新的征程记录最美好的时刻每天进步一点点。 专栏地址【微信小程序开发教程】 此专栏是我是夜阑的狗微信小程序开发过程的总结希望能够加深自己的印象以及帮助到其他的小伙伴。 如果文章有什么需要改进的地方还请大佬不吝赐教。 一、WXS 脚本 前面已经大致了解小程序中生命周期分别是应用生命周期和页面生命周期在实际开发过程中一般初始化数据的操作都会放在 onLoad 或者 onLaunch 里。所以了解生命周期的执行顺序与作用对后续的开发很有帮助。接下来就来学习一下小程序中的 WXS 脚本。话不多说让我们原文再续书接上回吧。 1、什么是 wxs WXSWeiXin Script是小程序独有的一套脚本语言结合 WXML可以构建出页面的结构。
2、wxs 的应用场景 wxml 中无法调用在页面的 .js 中定义的函数但是wxml 中可以调用 wxs 中定义的函数。因此小程序中 wxs 的典型应用场景就是“过滤器”这一点跟 Vue 有点类似。
3、. wxs 和 JavaScript 的关系 虽然 wxs 的语法类似于 JavaScript但是 wxs 和 JavaScript 是完全不同的两种语言
wxs作用有自己的数据类型number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型 function 函数类型、array 数组类型、 date 日期类型、 regexp 正则不支持类似于 ES6 及以上的语法形式不支持let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc… 支持var 定义变量、普通 function 函数等类似于 ES5 的语法遵循 CommonJS 规范module 对象、require() 函数、module.exports 对象
二、WXS 脚本 - 基础语法
1、内嵌 wxs 脚本 wxs 代码可以编写在 wxml 文件中的 wxs 标签内就像 Javascript 代码可以编写在 html 文件中的 script 标签内一样。 wxml 文件中的每个 wxs/wxs 标签必须提供 module 属性用来指定当前 wxs 的模块名称方便在 wxml 中访问模块中的成员这里可以看下下面栗子具体代码如下
message.js 首先在js端定义好变量。
Page({/*** 页面的初始数据*/data: {count: 0,userName: csh,},
})message.wxml 将文本转成大写。
view{{test1.toUpper(userName)}}/viewwxs moduletest1// 将文本转成大写module.exports.toUpper function (str) {return str.toUpperCase();}
/wxs不出意外的话在页面会出 csh 的大写形式看一下实际效果 2、定义外联的 wxs 脚本 wxs 代码还可以编写在以 .wxs 为后缀名的文件内就像 javascript 代码可以编写在以 .js 为后缀名的文件中 一样。示例代码如下 创建 .wxs 文件 tool.wxs
function toLower(str){return str.toLowerCase();
}module.exports {toLower: toLower
}到这里就定义好模块里的函数。
3、使用外联的 wxs 脚本 前面定义好了外联的 wxs 脚本接下来就要去使用了。在 wxml 中引入外联的 wxs 脚本时必须为 标签添加 module 和 src 属性其中
属性说明module用来指定模块的名称src用来指定要引入的脚本的路径且必须是相对路径通过下面的栗子来学习一下具体代码如下
message.js 在js端定义好变量。
Page({/*** 页面的初始数据*/data: {count: 0,userName: csh,country: CHINA,},
})message.wxml 引用外联的tool.wxs 脚本并命名为 test2将文本转成小写。
view{{test2.toLower(country)}}/viewwxs src../../utils/tool.wxs moduletest2/wxs可以来看一下实际效果 三、WXS 的特点
1、与 JavaScript 不同 为了降低 wxsWeiXin Script的学习成本 wxs 语言在设计时借大量鉴了 JavaScript 的语法。但是本质上 wxs 和 JavaScript 是完全不同的两种语言
2、不能作为组件的事件回调 wxs 典型的应用场景就是“过滤器”经常配合 Mustache 语法进行使用例如
view{{test1.toUpper(userName)}}/view但是在 wxs 中定义的函数不能作为组件的事件回调函数。例如下面的用法是错误的
button bindtaptest2.toLower按钮/button3、隔离性 隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面
wxs 不能调用 js 中定义的函数wxs 不能调用小程序提供的 API
4、性能好 在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。 在 android 设备上二者的运行效率无差异 总结 感谢观看这里就是WXS 脚本的介绍使用如果觉得有帮助请给文章点个赞吧让更多的人看到。 也欢迎你关注我。 原创不易还希望各位大佬支持一下你们的点赞、收藏和留言对我真的很重要 最后本文仍有许多不足之处欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正下期再见。 更多专栏订阅: 【LeetCode题解持续更新中】 【Java Web项目构建过程】 【微信小程序开发教程】⚽ 【JavaScript随手笔记】 【大数据学习笔记华为云】 【程序错误解决方法建议收藏】 【软件安装教程】 订阅更多你们将会看到更多的优质内容
