zoukankan      html  css  js  c++  java
  • WXS-视图层-微信小程序

    WXS

    WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

    WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。

    WXS 模块

    WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内。

    模块

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

    每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。

    一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现

    module 对象

    每个 wxs 模块均有一个内置的 module 对象

    属性

    • exports: 通过该属性,可以对外共享本模块的私有变量与函数。

    require函数

    .wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。

    引用的时候,要注意如下几点:

    • 只能引用 .wxs 文件模块,且必须使用相对路径。
    • wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
    • 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。

    <wxs> 标签

    属性名类型默认值说明
    module String   当前 <wxs> 标签的模块名。必填字段。
    src String   引用 .wxs 文件的相对路径。仅当本标签为单闭合标签标签的内容为空时有效。

    module 属性

    module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同文件之间的 wxs 模块名不会相互覆盖。

    module 属性值的命名必须符合下面两个规则:

    • 首字符必须是:字母(a-zA-Z),下划线(_)
    • 剩余字符可以是:字母(a-zA-Z),下划线(_), 数字(0-9)

    src 属性

    src 属性可以用来引用其他的 wxs 文件模块。

    引用的时候,要注意如下几点:

    • 只能引用 .wxs 文件模块,且必须使用相对路径。
    • wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
    • 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行

     

     

     

    上述例子在文件 /page/index/index.wxml 中通过 <wxs> 标签引用了 /page/comm.wxs 模块。

    注意

    • <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时,<wxs> 模块不会被引入到对应的 WXML 文件中。
    • <template> 标签中,只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

    变量

    概念

    • WXS 中的变量均为值的引用。
    • 没有声明的变量直接赋值使用,会被定义为全局变量。
    • 如果只声明变量而不赋值,则默认值为 undefined
    • var表现与javascript一致,会有变量提升。

    注释

    WXS 主要有 3 种注释的方法。

    示例代码:

    <!-- wxml -->
    <wxs module="sample">
    // 方法一:单行注释
    
    /*
    方法二:多行注释
    */
    
    /*
    方法三:结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释
    
    var a = 1;
    var b = 2;
    var c = "fake";
    
    </wxs>


    if 语句

    在 WXS 中,可以使用以下格式的 if 语句 :

    • if (expression) statement : 当 expression 为 truthy 时,执行 statement

    • if (expression) statement1 else statement2 : 当 expression 为 truthy 时,执行 statement1。 否则,执行 statement2

    • if ... else if ... else statementN 通过该句型,可以在 statement1 ~ statementN 之间选其中一个执行。

    if (表达式) {
      代码块;
    } else if (表达式) {
      代码块;
    } else if (表达式) {
      代码块;
    } else {
      代码块;
    }

    switch 语句

     
    switch (表达式) {
      case 变量:
        语句;
      case 数字:
        语句;
        break;
      case 字符串:
        语句;
      default:
        语句;
    }
    
    • default 分支可以省略不写。
    • case 关键词后面只能使用:变量数字字符串
     

    for 语句

    示例语法:

    for (语句; 语句; 语句)
      语句;
    
    for (语句; 语句; 语句) {
      代码块;
    }
    
    • 支持使用 breakcontinue 关键词。

    while 语句

    示例语法:

    while (表达式)
      语句;
    
    while (表达式){
      代码块;
    }
    
    do {
      代码块;
    } while (表达式)
    
    • 表达式为 true 时,循环执行语句代码块
    • 支持使用 breakcontinue 关键词。

    数据类型

    WXS 语言目前共有以下几种数据类型:

    • number : 数值
    • string :字符串
    • boolean:布尔值
    • object:对象
    • function:函数
    • array : 数组
    • date:日期
    • regexp:正则

    function

    语法

    function 支持以下的定义方式:

    //方法 1
    function a (x) {
      return x;
    }
    
    //方法 2
    var b = function (x) {
      return x;
    }

    function 同时也支持以下的语法(匿名函数,闭包等):

    var a = function (x) {
      return function () { return x;}
    }
    
    var b = a(100);
    console.log( 100 === b() );


    object

    语法

    object 是一种无序的键值对。

    arguments

    function 里面可以使用 arguments 关键词。该关键词目前只支持以下的属性:

    • length: 传递给函数的参数个数。
    • [index]: 通过 index 下标可以遍历传递给函数的每个参数。

    array

    语法

    array 支持以下的定义方式:

    var a = [];      //生成一个新的空数组
    
    a = [1,"2",{},function(){}];  //生成一个新的非空数组,数组元素可以是任何类型
    

    属性

    • constructor:返回字符串 "Array"
    • length

    date

    语法

    生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。

    getDate()
    getDate(milliseconds)
    getDate(datestring)
    getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])
    
    • 参数
      • milliseconds: 从1970年1月1日00:00:00 UTC开始计算的毫秒数
      • datestring: 日期字符串,其格式为:"month day, year hours:minutes:seconds"

    数据类型判断

    constructor 属性

    数据类型的判断可以使用 constructor 属性。

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

    typeof

    使用 typeof 也可以区分部分数据类型。

    基础类库

    console

    console.log 方法用于在 console 窗口输出信息。它可以接受多个参数,将它们的结果连接起来输出

    Math

    JSON

    方法

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

    == equality 等同,=== identity 恒等。

    但是如果<后面无空格则会报错:

     

  • 相关阅读:
    Linux运维笔记
    回到顶部过渡js代码
    好想你红枣
    鼠标点击区域问题
    ie6 hover 子元素无效bug
    IE6和7下text-indent导致inline-block标签消失的bug
    星星评分js代码
    洛谷P3147 [USACO16OPEN]262144 2048 合并 倍增 动归 递推
    洛谷P1114 “非常男女”计划
    洛谷P1108 低价购买 动态规划
  • 原文地址:https://www.cnblogs.com/playforever/p/12469741.html
Copyright © 2011-2022 走看看