微信小程序wxs标签 在wxml文件中编写JavaScript逻辑

PC端开发 可以在界面中编写JavaScript脚本

vue/react这些框架更是形成了一种常态 因为模板引擎和jsx语法本身就都是在js中的

我们小程序中其实也有类似的奇妙写法 不过先声明 这东西不是很强大

我们可以先写一个案例代码

wxml代码参考

html 复制代码
<view>
    <wxs module="wordStyle">
        var formatText = function(text) {
            return text+"测试高级数据整理";
        }
        module.exports = {
            formatText: formatText
        }
    </wxs>
    <text>{{ wordStyle.formatText('hello') }}</text>
</view>

运行结果是这样的

好 我们来读一下这个代码 很明显

就相当于是一个js模块 有点像html中的 srcipt标签

里面声明了一个函数 formatText 接受一个参数 text

然后 方绘制就是传进来的 text 加上 测试高级数据整理

然后返回回去

后面 我们module.exports导出这个函数

然后在界面元素中 我们可以通过wordStyle对象来使用这里面写的函数

运行结果也明显是显示正确了的

相关推荐
-Da-17 分钟前
【操作系统学习日记】并发编程中的竞态条件与同步机制:互斥锁与信号量
java·服务器·javascript·数据库·系统架构
Irene199120 分钟前
JavaScript脚本加载的两种方式:defer/async 的区别
前端·javascript·php
志遥1 小时前
我把 Sentry 接进了 7 端小程序:从异常捕获、Breadcrumb 到 Source Map 定位
微信小程序·监控
进击的尘埃1 小时前
用了大半年 Claude Code,我总结了 12 个真正改变工作流的配置技巧
javascript
luanma1509801 小时前
Laravel 8.X重磅特性全解析
前端·javascript·vue.js·php·lua
kyriewen1 小时前
为什么我的代码在测试环境跑得好好的,一到用户电脑就崩?原来凶手躲在地址栏旁边
前端·javascript·chrome
ETA81 小时前
面试官:说说事件冒泡与委托?这是我见过最透彻的回答
前端·javascript
云起SAAS2 小时前
在线客服系统源码 | 支持PC管理端+H5访客端+实时聊天
微信小程序·ai编程·看广告变现轻·在线客服系统源码
朝阳5812 小时前
局域网聊天工具
javascript·rust
晴天162 小时前
Neutralinojs 核心原理解析
javascript·electron·node.js