小北微信小程序小白系列教程第四篇-- 脚本语言(WXS)

这是微信小程序近期引入的一个概念,我们可以在开发者工具中直接以独立文件的形式建立它们。

当然你也可以使用wxs标签直接在wxml文件中使用。

两种访问均可以。

使用场景:比如我们可以在视图里直接纳入简单的逻辑代码或是对page传递过来的变量进行处理(例如筛选和格式化等等),让你编码更简单。

因此wxs有自己的变量和语法,接下来开始流水账。

变量

官方文档地址为

https://mp.weixin.qq.com/debu...

变量提升问题

微信官方说:“var表现与javascript一致,会有变量提升。

举个例子
比如我们在Page里定义了一个m.msg变量,如下图

而你在wxml的wxs内也定义了一个m.msg,如下图

则我们在视图内使用{{m.msg}}会输出hello world 而不是abc。

对于声明但是没有定义的变量。

还是上面的例子,比如你定于如下图

我们用log打印下,只是声明的变量值统一为undefined,当然你在视图内引用的时候并不会报错,只是显示为空而已。

保留标识符

wxs内部定义了一些标识符,有特殊的含义,不允许变量使用,比如var、if、for、this、case、else等等,都是用来表示某种语法结构的。

详细表看官方文档,都已经给出了,当然你记不住也没关系,开发工具会报错如下信息。

注释

官方文档:https://mp.weixin.qq.com/debu...

这里有一点要说下,就是wxs支持的第三种注释方法,当我们写一个 /* 时候,代表从 /* 开始往后的所有 wxs 代码均被注释,这里的所有代表wxs块的结尾,有一点要注意,看图。

注释的范围是当前模块,因此m2的msg2变量依然可以在视图上显示出来。

运算符

官方文档:https://mp.weixin.qq.com/debu...

该有的都有了,比如最常用的大于小于不等于、求余数、三元运算符等等,你在一个计算机语言中用的运算符在wxs内都有,具体都有哪些见官方文档。

语句

官方文档:https://mp.weixin.qq.com/debu...

话说计算机语言无外乎真假问题、多少问题!抽象过来就是判断语句和循环语句,wxs的判断和循环语句和其他语言都差不多,相信大家自己看文档就清楚,还是需要注意下truthy的问题。

truthy是什么?

wxs集成了js的逻辑,有truthy的概念,简单点说每个变量隐藏着boolean属性,而if是根据truthy来判断分支而非狭义的boolean。

具体什么是truthy推荐大家看下面的这篇文章:http://blog.csdn.net/notzuono...

写的相当不错。

数据类型

官方文档:https://mp.weixin.qq.com/debu...

我们把"hello world"叫做字符串类型,909叫做整数类型,wxs一共支持如下几种数据类型。

number / string / boolean / object / function / array / date / regexp

你可能会差异为何function还是一种数据类型,完全没问题的,看下图我定义的函数类型的变量b

你能用的函数

官方文档:https://mp.weixin.qq.com/debu...

很多很多,一种是类库,一种是每种数据变量的函数。

比如你是字符串的时候,就可以使用它的replace、search等等函数,大部分函数的功能和命名和js中的都一样,看官方文档吧。

模块

官方文档:https://mp.weixin.qq.com/debu...

这些年js界出现了比如seajs、webpack等模块化工具,wxs也是这个逻辑。

每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。

我们不能直接使用模块内的数据,只能和模块暴露出的接口进行沟通,所以每个模块都有类似下面的语句

其实在js中也是这样的。

当我们要使用一个外部的 .wxs时候

如果此刻你是一个.wxs文件,那就直接使用 类似于 var msg = require("./msg.wxs");语法即可

如果此刻你是一个wxml文件,那需要使用wxs标签,指定src和module属性,如下语句 <wxs src="./../msg.wxs" module="msg" />

当然有一些要注意的地方,这里不做陈述,大家务必仔细看下官方文档,我们必须要看的。

最后

以上5篇其实没有太多技术问题,更多是小程序的基础课程,我们只需要记住它、使用它即可。

接下来我们会对一些组件、api进行讲解,希望电脑前的你安装好微信小程序开发工具,要写写代码啦。

相关阅读:

小北微信小程序小白系列教程第三篇-- 样式(WXSS)

小北微信小程序小白系列教程第二篇 -- 入口

小北微信小程序小白系列教程第一篇-- Hello World

本文作者:北哥 个人站长 @ 北哥兄弟连
原文地址:小北微信小程序之小白教程系列之-脚本语言(WXS)-新手教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,045评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,114评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,120评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,902评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,828评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,132评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,590评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,258评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,408评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,335评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,385评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,068评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,660评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,747评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,967评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,406评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,970评论 2 341

推荐阅读更多精彩内容

  • 引言 WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 注意 w...
    OzanShareing阅读 1,363评论 0 3
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,308评论 0 9
  • 作为一名后端开发人员,我希望能从后端语言的某些模式来理解小程序,让我快速的入门。 今天我们依然模拟一个女项目经理和...
    极乐叔阅读 669评论 0 0
  • 2.4.2 WXS WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结...
    wangbu2阅读 1,231评论 0 2
  • 假如你不够快乐 也不要把眉头深锁 人生本来短暂 为什么 还要栽培苦涩 打开尘封的门窗 让阳光雨露洒遍每个角落 走向...
    简小取阅读 297评论 6 5