uni-app运行到微信小程序时 wxs文件中的函数放在标签属性中会报错

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app运行到微信小程序时 wxs文件中的函数放在标签属性中会报错

示例代码:

<view :class="' ' + computed.add(1,2)">{{computed.add(1,2)}}</view>  
<wxs src="./index.wxs" module="computed"></wxs>

操作步骤:

  • wxs 中的函数放在标签属性上

预期结果:

  • 前面没有空字符串时正常运行

实际结果:

  • 前面没有空字符串时会报错

bug描述:

wxs中的函数运行到微信小程序时,函数放在标签属性中会报错,函数前增加一个空字符串可以解决

信息项 内容
产品分类 uniapp/小程序/微信
PC开发环境 Windows
PC开发环境版本 Windows10
HBuilderX类型 正式
HBuilderX版本 3.99
第三方工具版本 3.7.9
基础库版本 2.8.8
项目创建方式 HBuilderX

1 回复

uni-app 中,当你将 WXS 文件中的函数直接放在标签属性中使用时,可能会遇到报错。这是因为 WXS 文件中的函数在微信小程序中的使用方式与普通的 JavaScript 函数有所不同。

问题原因

在微信小程序中,WXS 文件中的函数需要通过特定的方式引入和使用,而不能直接像普通的 JavaScript 函数那样在标签属性中调用。

解决方案

  1. 引入 WXS 文件: 首先,你需要在页面的 WXML 文件中引入 WXS 文件。例如:

    <wxs src="path/to/your.wxs" module="tools" />

    这里的 module="tools" 表示你将 WXS 文件中的函数挂载到 tools 对象上。

  2. 使用 WXS 函数: 在 WXML 中,你可以通过 tools 对象来调用 WXS 文件中的函数。例如:

    <view>{{tools.yourFunction(param)}}</view>

    这里的 yourFunction 是你在 WXS 文件中定义的函数,param 是传递给函数的参数。

  3. WXS 文件示例: 假设你的 WXS 文件内容如下:

    // path/to/your.wxs
    function yourFunction(param) {
        return param + ' processed by WXS';
    }
    
    module.exports = {
        yourFunction: yourFunction
    };
  4. 注意事项

    • WXS 文件中的函数不能直接访问页面的 datamethods,它们只能处理传入的参数。
    • WXS 文件中的函数是同步执行的,不能包含异步操作。

示例

假设你有一个 WXS 文件 tools.wxs,内容如下:

// tools.wxs
function formatText(text) {
    return text.toUpperCase();
}

module.exports = {
    formatText: formatText
};

WXML 文件中引入并使用:

<wxs src="tools.wxs" module="tools" />

<view>{{tools.formatText('hello world')}}</view>
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!