“This is the 14th day of my participation in the First Challenge 2022.

What is a WXS

WXS is a scripting language unique to applets that, combined with WXML, can be used to build the structure of a page

Application scenarios of WXS

Functions defined in page.js files cannot be called from.wxml files, but functions defined in WXS can be called from WXML, so a typical use of WXS in applets is filters (a wrapper processing of data before rendering it). The data is rendered to the page through the filter processing

WXS and JavaScript

Although the syntax of WXS is similar to JavaScript, WXS and JavaScript are completely different languages

  • wxsIt has its own data type
    • numberNumeric types
    • stringString type
    • boolenBoolean type
    • objectObject type
    • functionFunction types
    • arrayAn array type
    • dateThe date type
    • regexpRegular expression
  • wxsSyntax forms similar to ES6 and above are not supported
    • Not supported: let, const, structure assignment, expansion operators, arrow functions, object attribute abbreviations, and so on
    • Support: VAR definition of variables, ordinary function functions, similar to ES5 syntax
  • wxsFollow the CommonJS specification
    • moduleobject
    • The require function
    • The module. Rcports object

Embedded WXS scripts

  • wxsThe code can be written inwxmlIn the file<wxs>Inside the tag, likeJavaScriptThe code can be written inhtmlIn the filescripsSame in label
  • wxmlEach of the files<wxs> </wxs>Tags must be providedmoduleProperty to specify the currentwxsModule name for convenience inwxmlAccess a member in the module

Page structure (.wxml file)

<view>{{m1.toUpper(username)}}</view>

<wxs module="m1">
    module.exports.toUpper = function(str){
        return str.toUpperCase()
    }
</wxs>
Copy the code

Define the WXS script for the outreach

WXS code can also be written in files with the.wxs suffix, just as JavaScript code can be written in files with the.js suffix

  • Creation of external WXS scripts

    • Create a.wxsFile with suffix
    • Declare some methods or properties in a file,
    • withmodule.exportsTo share these methods or properties externally
    function toLower(str){
    return str.toLowerCase()
}

module.exports = {
    toLower: toLower
}
Copy the code

  • Use of external WXS scripts

    When you introduce an external WXS script into WXML, you must add module and SRC attributes to the WXS tag

    • moduleUsed to specify the name of the module
    • srcUsed to specify the path of the script to be imported, and must be a relative path
    // Call the method in the m2 module
<view>{{m2.toLower(country)}}</view>

// Reference the external tools. WXS script and name it m2
<wxs src=".. /.. /utils/tools.wxs" module="m2"></wxs>
Copy the code

    The characteristics of WXS

    • Unlike the JavaScript

      In order to reduce the cost of learning WXS, the WXS language was designed with JavaScript syntax in mind, but in essence, WXS and JavaScript are completely different languages

    • Cannot be an event callback for a component

      A typical use of WXS is filters, often used with Mustache syntax

      <view>{{m2.toLower(country)}}</view>
Copy the code

      Functions defined in WXS cannot be used as component event callbacks

      <button bindtap="m2.toLower(country)"> jump < / button >Copy the code

    • Isolation,

      Isolation: The WXS runtime environment is isolated from other JavaScript code

      • wxsCan’t calljsA function defined in
      • wxsThe API provided by the applet cannot be called

    • Performance is good

      On iOS devices, WXS in applets can be 2 to 20 times faster than JavaScript code. On Android devices, there is no difference in efficiency between the two