小程序脚本语言WXS详解

WXS脚本语言是 Weixin Script脚本的简称,是JS、JSON、WXML、WXSS之后又一大小程序内部文件类型。截至到目前小程序已经提供了5种文件类型。

解构小程序的几种方式,其中一种方式就是通过文件类型:JS、JSON、WXML、WXSS、WXS。前面四种之前已经介绍过,今天主要是介绍WXS这种文件类型。如果你是PHP、JAVA、C#程序员的话写过服务端代码的话,就很好理解WXS这种脚本语言了。能够更加方便的动态实现页面上的一些基本逻辑判断,而不用全部的依赖后台实现,再通过接口返回。

一、WXS创建方式
WXS的使用,有两种方式。 一种是直接在WXML中编写

 module="foo">

var some_msg = "hello world"; 

module.exports = { msg : some_msg, }

 {{foo.msg}} 

另外一种是使用单独的WXS文件,然后在WXML中引入即可

 src="./../logic.wxs" module="logic" />

二、WXS文件的构成
1、数据类型 类似小程序大厦的砖头、保暖砖、预制件之类的内容,这些都是通用的内容,这些是编程语言的基本构成项,数据类型可以是简单的类型,也可以是复杂的类型。从普通的数字再到复杂的对象。

WXS 语言目前共有8种数据类型:
number : 数值 string :字符串 boolean:布尔值 object:对象 function:函数 array : 数组 date:日期 regexp:正则

WXS中使用var或let来定义变量,从定义中很难看出变量的类型,判定一个变量是什么类型。 可以使用变量的属性constructor。 还可以使用 typeof这种方式来判定变量的类型
例如:

var number = 10;

console.log( "Number" === number.constructor );

console.log( ‘number‘ === typeof number );

2、变量 变量就是构建小程序这座大厦的基本件,虽然是很小,但是有自己的规范,主要有如下几个方面: 命名规范, 首字符必须是:字母(a-zA-Z),下划线(), 剩余字符可以是:字母(a-zA-Z),下划线(), 数字(0-9)。 大小写不同则是不同的变量
保留字符

delete void typeof null undefined NaN Infinity var if else true false require this function arguments return for while do break continue switch case

default

3、操作运算符 根据操作对象的个数,可以分为一元、二元、多元运算符。 我们常用的加减乘除这些都需要两个操作对象才能完成,那这些就是二元运算符。 自增或自减这些只需要一个运算符就可以完成。这些就是一元运算符。 需要二个以上的运算对象的那就是多元运算符了。

4、选择结构 选择结构,又称为判断结构, 如果C条件满足了则执行一种情况,条件不满足则执行另外一种情况 。 另外一种是多条件的,如果C1条件满足了,则执行A部分,如果C2条件满足了则执行B部分,如果C3条件满足则执C部分,以此类推,所有条件都不满足是则执行Z部分。

// if ... else 

if (表达式) 语句;

else 语句;

if (表达式) 

语句;

else 

语句;

if (表达式) { 

代码块; 

} else { 

代码块; 

}

// if ... else if ... else ...

if (表达式) {

 代码块; 

} else if (表达式) { 

代码块; 

} else if (表达式) { 

代码块; 

} else { 

代码块; }

switch (表达式) { 

 case 变量: 

 语句; 

 case 数字: 

 语句; 

 break; 

 case 字符串: 

 语句; 

 default: 

 语句; 

}

5、循环结构 简单的事情,不想重复的写代码,那就可以把公共执行的部分剥离出来

for (语句; 语句; 语句) 

语句;

for (语句; 语句; 语句) {

 代码块; 

}

while (表达式) 

语句;

while (表达式){ 

代码块; 

}

do { 

代码块; 

} while (表达式)

支持使用 break,continue 关键词。 break是结束整个循环 continue是中断当前本次循环
到这里的时候就先停一下 通过1和2这两个部分完成的组件,再通过3、4、5这三大部分的“粘合剂” 就可以完成后面6和7慢慢的你会发现写小程序就是盖房子一样的,把原材料准备好,使用粘合剂给连接起来就可以了。
6、模块(自定义的函数) 在WXS中编写业务逻辑与内容,使用 moudle.exports的方式把变量或函数公开。

// /pages/tools.wxs

var foo = "‘hello world‘ from tools.wxs";

var bar = function (d) { return d; }

module.exports = { 

 FOO: foo, 

 bar: bar,

};

module.exports.msg = "some msg";

在使用的地方地方,需要引入对就的模块才能使用

<wxs src="./../tools.wxs" module="tools" />

 {{tools.msg}} view>

 {{tools.bar(tools.FOO)}} view>

注意:tool.FOO FOO是大写,因为上面部分是使用FOO做为对外公开的变量名。
7、函数库(已经定义好的函数)

console

console.log() console.info() console.warn() console.error() 

这是引用的chrome的经典内容。

Math

Math.PI Math.ceil() Math.floor()

带有()是对应的方法,没有带括号的是属性,

Number

MAX_VALUE

MIN_VALUE

NEGATIVE_INFINITY

POSITIVE_INFINITY

JSON

stringify(object): 将 object 对象转换为 JSON 字符串,并返回该字符串。

parse(string): 将 JSON 字符串转化成对象,并返回该对象。

Global

属性

NaN

Infinity

undefined

方法

parseInt

parseFloat

isNaN

isFinite

decodeURI

decodeURIComponent

encodeURI

encodeURIComponent

以上内容的更多用法可以参考ES语法 http://es6.ruanyifeng.com/

三、注释
单独的把这一块拿出来,一方面是说明其重要性,另一方面是学习一门语言与他人沟通中很重要的 一部分。WXS 主要有 3 种注释的方法。

module="sample">

// 方法一:单行注释

/* 方法二:多行注释 */

/* 方法三:结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释

var a = 1;

var b = 2;

var c = "fake";

在编程实践中,只要能把思路理清就能把代码实现出来,在大师兄的公司基本上推荐的是先写注释内容,然后再把注释内容转换为代码。

//加载页面数据 //给评论区加载数值 //臭鸡蛋数 //转发数 //投票数

所以对于大家学习一门新语言时,不要惧怕,只要能表达清自己的思路,然后再一步一步的把注释内容转为代码语言即可,通过我们之前的学习的调试工具就一点点完成自己的小程序。

总结下: 根据不同的需要给不同的数据类型通过变量的方式命名,通过操作运算符组合成自己的想要的业务代码。

相关文章:微信小程序新功能WXS解读
文章来源:微信小程序联盟

时间: 2024-10-31 21:09:46

小程序脚本语言WXS详解的相关文章

【微信小程序】支付过程详解

一.介绍 今天跟大家分享微信小程序集成支付. 二.分析 1.小程序支付API 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html#wxrequestpaymentobject 注释: 通过接口的查看,我们知道,小程序端要想使用支付的接口,必须要拿到相应的值 timeStamp:Linux时间戳,可获取本地时间. nonceStr:随机字符串,从服务器统一下单接口返回. package:统一下单接口返回的prepay_id参数

门店小程序开发模式系统详解

门店小程序开发(李想.185.6504.8478)门店是一种极具发展前景的新型业态,在门店购物已成为现代人快节奏生活的方式之一.门店的投资发展是一种见效比较快,但风险及投资成本较高的一种行业. 微信小程序从张小龙提出这一概念后到现在一直都非常的火,微信小程序从上线后就不断的完善,功能逐渐的增加,很多人都已经争先开始抢占微信小程序的红利,那么对于线下门店来说要如何抢占小程序的红利呢?这就需要赢在移动开发的门店微信小程序了. 一.门店微信小程序是什么? 门店微信小程序就像是门店在微信上的「名片」,它

微信小程序获取用户手机号详解

最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话密钥). 2.拿到jscode后,将其发送给服务端,服务端拿它与微信服务端做交互获取openid和sessionkey.具体获取方法如下: (1)需要写一个HttpUrlConnection工具类: <span style="font-size:18px;">public cl

彻底搞定C语言指针详解

1.语言中变量的实质 要理解C指针,我认为一定要理解C中“变量”的存储实质, 所以我就从“变量”这个东西开始讲起吧! 先来理解理解内存空间吧!请看下图: 内存地址→ 6 7 8 9 10 11 12 13 ----------------------------------------------------------------- ... | | | | | | | |.. ------------------------------- ---------------------------

11_Shell语言———管道详解

管道的基本用法为: COMMAND1 | COMMAND2 | COMMAND3 | ... COMMAND1 的输出结果会作为输入参数传递给COMMAND2, COMMAND2加以处理后会传递给COMMAND3, 依此类推.管道的使用便是Linux哲学思想中"组合小程序完成复杂任务"的体现方式. 如果管道的最后一个命令是在当前shell的子shell中执行,那么该执行结果不能保存为一个变量,这样会导致当前shell无法获取执行结果,这是由shell中"本地变量只对当前she

CentOS程序包管理器rpm、yum以及程序包编译安装详解

一.程序包管理器RPM和Yum简介 程序包管理器:将编译好的应用程序的各组成文件打包成一个或几个程序包文件,可以更方便地实现程序包的安装.升级.卸载和查询等管理操作. rpm软件包管理器(RPM Package Manager):rpm包存在依赖关系,依赖关系复杂,安装时间很长,虽然可以忽略依赖关系,但是可能会导致程序包安装后无法正常使用. yum程序包管理器( Yellow dog Updater, Modified):yum是基于RPM包管理,自动解决程序包间的依赖关系.根据配置文件的资源地

unity脚本执行顺序详解

unity脚本自带函数执行顺序如下:将下面脚本挂在任意物体运行即可得到 Awake ->OnEable-> Start ->-> FixedUpdate-> Update  -> LateUpdate ->OnGUI ->Reset -> OnDisable ->OnDestroy using UnityEngine; using System.Collections; public class timetest : MonoBehaviour

keil将程序装入外部FLASH详解

在实际项目中,经常出现芯片的内部FLASH空间不够的情况,这就需要将程序分一部分装到外部FLASH中. 为了让大家能少走些弯路,在这里把我在这其中遇到的一些问题和经验教训给大家分享一下. 仅供参考,如果有错误的地方欢迎指正,提前表示感谢! 转载请注明出处:blog.csdn.net/waitig1992 硬件环境介绍 芯片是LPC1788,外部FLASH是SST39VF1601(NORFLASH). 这个norflash在我的版本的keil(v4.0)中没有烧写算法,需要自己手动编写烧写算法,具

LNMP中一些隐藏的安装脚本及目录详解

伏笔VPS一向在用军哥的LNMP一键script搭建站点,使用的人挺多的,而许多人只晓得script是部署Nginx.MySQL/MariaDB.PHP.phpMyAdmin等建站主要环境的,却不晓得该部署包的别的功能script,这里就说下隐蔽的别的软件script及部署目录. script 1.lnmp部署 #这里用的是最新测试版1.5 wget -c http://soft.vpser.net/lnmp/lnmp1.5beta.tar.gz && tar zxf lnmp1.5bet