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

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

一、WXS创建方式

WXS的使用,有两种方式。

一种是直接在WXML中编写

<!--wxml-->

<wxs module="foo">

var some_msg = "hello world";

module.exports = {    msg : some_msg, }

</wxs>

<view> {{foo.msg}} </view>

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

<!-- /page/index/index.wxml -->

<wxs 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是中断当前本次循环

到这里的时候就先停一下

通过12这两个部分完成的组件,再通过345这三大部分的“粘合剂”就可以完成后面67慢慢的你会发现写小程序就是盖房子一样的,把原材料准备好,使用粘合剂给连接起来就可以了。

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";

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

<!-- page/index/index.wxml -->

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

<view> {{tools.msg}} </view>

<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 种注释的方法。

<!-- wxml -->

<wxs module="sample">

// 方法一:单行注释

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

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

var a = 1;

var b = 2;

var c = "fake";

</wxs>

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

//加载页面数据

//给评论区加载数值

//臭鸡蛋数

//转发数

//投票数

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

总结下:

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

全栈工程师微信号:fullstackeer

全栈工程师

文章链接

小程序脚本语言WXS,你想要的都在这里了的更多相关文章

  1. 小程序脚本语言WXS详解

    WXS脚本语言是 Weixin Script脚本的简称,是JS.JSON.WXML.WXSS之后又一大小程序内部文件类型.截至到目前小程序已经提供了5种文件类型. 解构小程序的几种方式,其中一种方式就 ...

  2. 微信小程序开发语言的选择

    微信使用的开发语言和文件很「特殊」. 小程序所使用的程序文件类型大致分为以下几种: ①WXML(WeiXin Mark Language,微信标记语言) ②WXSS(WeiXin Style Shee ...

  3. 小程序使用之WXS

    文章链接:https://mp.weixin.qq.com/s/F1zzS7mvMpFaplq4KINzQg 之前做过一段时间的小程序开发,自己也写过两个自己的小程序,了解些前端的知识,相对而言还是比 ...

  4. 一个Java编写的小玩意儿--脚本语言解释器(一)

    今天开始想写一个脚本语言编译器.在这个领域,我还是知道的太少了,写的这个过程肯定是艰辛的,因为之前从来没有接触过这类的东西.写在自己的博客里,算是记录自己的学习历程吧.相信将来自己有幸再回过头来看到自 ...

  5. 小程序列表倒计时 wxs 实现

    效果 代码 js //拿到服务器时间 var serverLocalDate = data.serverLocalDate; //调用函数开始计时 this.serverLocalDate(serve ...

  6. 微信小程序之 语言特点

    主页面的CSS样式默认为index.wxss,无需引入

  7. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. 小程序 第一个学习示例(TodoList)

    1. 概述 1.1 说明 在微信开发者工具环境下开发一个简易的TodoList功能,以便能够进行学习与熟练小程序相关功能与信息.. 示例中,初步计划包含以下功能: 1.能够进行新增计划信息 2.计划信 ...

  9. 【小程序】wxs使用

    wxs使用 WXS(WeiXin Script)是小程序的一套脚本语言,结合WXML,可以构建出页面的结构. wxs可以说就是为了满足能在页面中使用js存在的,在wxml页面中,只能在插值{{ }}中 ...

随机推荐

  1. 51nod 1008 N的阶乘 mod P

    输入N和P(P为质数),求N! Mod P = ? (Mod 就是求模 %)   例如:n = 10, P = 11,10! = 3628800 3628800 % 11 = 10   Input 两 ...

  2. [补档][COGS 2434]暗之链锁

    [COGS 2434]暗之链锁 题目 传说中的暗之连锁被人们称为Dark.<!--more-->Dark是人类内心的黑暗的产物,古今中外的勇者们都试图打倒它.经过研究,你发现Dark呈现无 ...

  3. matlab怎么查看已安装哪些工具箱和…

    问题描述:matlab怎么查看已安装哪些工具箱和它们相应的版本 解决方法:在命令行里敲击der,回车 效果:

  4. Fluent Validation with Web Api 2

    using FluentValidation;using FluentValidation.Attributes;using System;using System.Collections.Gener ...

  5. Java中StringBuffer类append方法的使用

    public static void testAppend() { StringBuffer sb = new StringBuffer("This is a StringBuffer!&q ...

  6. Hello world! My first blog!

    Hello world! My first blog!

  7. WPF中实现多选ComboBox控件

    在WPF中实现带CheckBox的ComboBox控件,让ComboBox控件可以支持多选. 将ComboBox的ItemsSource属性Binding到一个Book的集合, public clas ...

  8. 自适应Simpson积分

    自适应Simpson积分 作用 如标题所示,这玩意就是当你不会微积分的时候来求积分的. 总所周知,积分的定义就是函数的某一段与坐标轴之间的面积. 那么,自适应Simpson积分就是一种可以再某些精度下 ...

  9. Orcle导入导出dmp文件

    --Orcle导入导出dmp文件 --------------------------2013/12/06 导出表:   exp scott/tiger@mycon tables=(dept,emp) ...

  10. 实验演示Oracle“多版本一致读”和“Cross DDL”

    http://space.itpub.net/17203031/viewspace-756336   在各种事务级别中,Oracle实现的是“Read Committed”,也就是读取的数据都是已经提 ...