Using WXS in Views

Integrate script blocks into WXML by utilizing the <wxs> tag. Define the module namespace with module and link the source file via src. Functions within these blocks are callable directly using Mustache syntax.

<wxs module="utilLib" src="/pages/lib/helpers.wxs"></wxs>
<view>{{ utilLib.computeValue(1, 2) }}</view>

Here, utilLib represents the module key. The computeValue function executes independently of the page's logic scope, ensuring data safety but restricting access to standard page variables.

Passing Parameters

Dynamic data injection is required for flexible scripting.

Template Inputs

Attributes on the <wxs> tag can bind variables to the module instence.

<wxs module="handler" src="/lib/script.wxs" data="{{ offset: 50 }}">
</wxs>
<view wx:for="{{ list }}">
    <view>{{ handler.adjust(listItem, offset) }}</view>
</view>

The offset is injected globally for the block. During iteration, individual items are processed against this constant.

Logic Layer Context

While primari view-bound, module logic can be invoked if the environment supports bridging.

const handler = require('./lib/script.wxs');
// Execute calculation logic
console.log(handler.adjust(100, 50)); 

Note that execution context remains separated from standard app logic layers.

Key Considerations

Always isolate sensitive logic within WXS to prevent unintended leakage to the frontend. Performance gains are most significant when calculations occur directly in the view rendering thread rather than triggering updates from the logic layer.