tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Cloud Mini Program Platform
    Documentation
    Download PDF

    WXS Modules

    Last updated: 2024-07-12 16:58:40
    Download PDF
      WXS code can be written in <wxs> tags in a wxml file or in files with the extension .wxs.

      Modules

      Each .wxs file or <wxs> tag is an independent module.
      Each module has an independent scope. This means the variables and functions in a module are private by default and not visible to other modules.
      A module can only externally expose its private variables and functions through the module.exports implementation.

      wxs Files

      In Weixin DevTools, right-click to create a .wxs file. You can write WXS scripts directly in the file.
      Sample code:
      // /pages/comm.wxs
      
      var foo = "'hello world' from comm.wxs";
      var bar = function(d) {
        return d;
      }
      module.exports = {
        foo: foo,
        bar: bar
      };
      In the above example, WXS code is written in the /pages/comm.wxs file. This .wxs file can be referenced by other .wxs files or <wxs> tags in WXML.

      module Objects

      Each wxs module contains one built-in module object.

      Properties

      exports: This property is used to share the module’s private variables and functions externally.
      Sample code:
      // /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>
      Page output:
      some msg
      'hello world' from tools.wxs

      require Functions

      You can use a require function to reference another wxs file module in a .wxs module.
      When referencing another wxs file module, you must note the following:
      You can only reference .wxs files modules and must use relative paths;
      All wxs modules are single instances. The first time a wxs module is referenced, it is automatically initialized as a single-instance object. Multiple pages, multiple regions, and multiple references all use the same wxs module object;
      If a wxs module is never referenced after it is defined, the module is not parsed or run.
      Sample code:
      // /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";
      // /pages/logic.wxs
      
      var tools = require("./tools.wxs");
      
      console.log(tools.FOO);
      console.log(tools.bar("logic.wxs"));
      console.log(tools.msg);
      <!-- /page/index/index.wxml -->
      
      <wxs src="./../logic.wxs" module="logic" />
      Console output:
      'hello world' from tools.wxs
      logic.wxs
      some msg

      <wxs> Tags

      Property Name
      Type
      Default Value
      Description
      module
      String
      -
      The module name of the current <wxs> tag. This is a required field.
      src
      String
      -
      The relative path of the referenced .wxs file, only valid when this tag is a single closed tag or the tag content is empty.

      module Property

      The module property is the module name of the current <wxs> tag. In a single wxml file, we recommend that this value be unique. In the case of duplicate module names, the value is overwritten based on the order (the latter overwrites the former). The names of wxs modules are not overwritten across different files.
      The name specified by the module property value must comply with the following rules:
      The first character must be an English letter (a-z, A-Z) or underscore (_).
      The remaining characters can be English letters (a-z, A-Z), underscores (_), or numbers (0-9).
      Sample code:
      <!--wxml-->
      
      <wxs module="foo">
      var some_msg = "hello world";
      module.exports = {
        msg : some_msg,
      }
      </wxs>
      <view> {{foo.msg}} </view>
      Page output:
      hello world
      The above example declares a module with the name foo that exposes the some_msg variable for use on the current page.

      src Property

      The src property is used to reference another wxs file module.
      When referencing another wxs file module, you must note the following:
      You can only reference .wxs files modules and must use relative paths.
      All wxs modules are single instances. The first time a wxs module is referenced, it is automatically initialized as a single-instance object. Multiple pages, multiple regions, and multiple references all use the same wxs module object.
      If a wxs module is never referenced after it is defined, the module is not parsed or run.
      Sample code:
      // /pages/index/index.js
      
      Page({
        data: {
          msg: "'hello wrold' from js",
        }
      })
      <!-- /pages/index/index.wxml -->
      
      <wxs src="./../comm.wxs" module="some_comms"></wxs>
      <!-- You can also directly use single tag closed syntax.
      <wxs src="./../comm.wxs" module="some_comms" />
      -->
      
      <!-- Calls the bar function in the some_comms module, and the parameter is foo in the some_comms module. -->
      <view> {{some_comms.bar(some_comms.foo)}} </view>
      <!-- Calls the bar function in the some_comms module, and the parameter is msg in page/index/index.js. -->
      <view> {{some_comms.bar(msg)}} </view>
      Page output:
      'hello world' from comm.wxs
      'hello wrold' from js
      In the above example, the <wxs> tag is used to reference /page/comm.wxs in the file /page/index/index.wxml.

      Note

      A <wxs> module can only be accessed in the WXML file that defines the module. If you use <include> or <import>, <wxs> modules are not introduced into the corresponding WXML files.
      In a <template> tag, you can only use the <wxs> module defined in the WXML file that defines the <template>.
      
      
      
      Contact Us

      Contact our sales team or business advisors to help your business.

      Contact Us
      Technical Support

      Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy