• 微信小程序中的 WXS 语法


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

    WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
    WXS 中不支持 let和const;不支持箭头函数

     1.变量

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

    变量命名必须符合下面两个规则:

    1. 首字符必须是:字母(a-zA-Z),下划线(_)。
    2. 剩余字符可以是:字母(a-zA-Z),下划线(_), 数字(0-9)。
    var bar = "hello world"

    2.运算符

    大致和 JS 中相同。

    3.语句

    大致和 JS 中相同。

    4.数据类型

    WXS 语言目前共有以下几种数据类型:string、number、boolean、object、array、function、date、regexp。

    数据类型判断可以使用 constructor 属性,也可以使用 typeof 区分部分数据类型。

    var string = "str";
    console.log( "String" === string.constructor )
    
    var func = function(){};
    console.log( "Function" === func.constructor )

    4.1.date

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

    var  date = getDate(1500000000000);

    4.2.regexp

    生成 regexp 对象需要使用 getRegExp函数。

    var reg = getRegExp('(\d)(?=(?:\d{3}[+]?)+$)','g');

    5.模块

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

    5.1.编写在 WXML 文件中的 <wxs> 标签内

    WXML 文件中的 <wxs> 标签有两个属性:

    5.1.1.module:是当前 <wxs> 标签的模块名

    在单个 WXML 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。
    不同文件之间的 wxs 模块名不会相互覆盖。

    <!--wxml-->
    <wxs module="foo">
        var some_msg = "hello world";
        module.exports = {
          msg : some_msg,
        }
    </wxs>
    <view> {{foo.msg}} </view>    

    5.1.2.src:引用 .wxs 文件的相对路径

    <wxs src="./../comm.wxs" module="some_comms" />
    <view> {{some_comms.msg}} </view>

    5.2.编写在以 .wxs 为后缀名的文件内

    // utils.wxs
    var formatNumber = function(val){
      var reg = getRegExp('(\d)(?=(?:\d{3}[+]?)+$)','g');
      return (val>1000) ? val.toString().replace(reg, '$1,') : val;
    }

    6.导出

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

    每个 wxs 模块均有一个内置的 module 对象。module 对象有一个exports属性,通过该属性,可以对外共享本模块的私有变量与函数。

    // utils.wxs
    var formatNumber = function(val){
      var reg = getRegExp('(\d)(?=(?:\d{3}[+]?)+$)','g');
      return (val>1000) ? val.toString().replace(reg, '$1,') : val;
    }
    module.exports = {
      formatNumber: formatNumber
    }

    7.导入

    7.1.在.wxml 中引用

    //home.wxml
    <wxs src="../../utils/utils.wxs" module="utils"></wxs>
    <text>{{utils.formatNumber(fanNum)}}</text>

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

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

    // utils.wxs
    var tools = require("./tools.wxs");
    console.log(tools.msg);

    参考---https://blog.csdn.net/wsln_123456/article/details/109294965

    小程序官网参考1---https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

    小程序官网参考2---https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html

  • 相关阅读:
    【jquery ,ajax,php】加载更多实例
    关于scrollTop
    jquery 底部导航透明度变化
    jquery 处理密码输入框(input type="password" ) 模仿placeholder
    物化视图基于rowID快速刷新
    ora-01653 无法通过1024扩展
    oracle临时表空间
    java.lang.ClassCastException: java.math.BigDecimal cannot be cast to java.lang.Integer
    redis 简单使用
    BigDecimal 运算
  • 原文地址:https://www.cnblogs.com/pwindy/p/16189207.html
Copyright © 2020-2023  润新知