微信小程序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对象来使用这里面写的函数

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

相关推荐
BillKu20 分钟前
vue3 字符串排序 localeCompare,确保排序为 “B01“, “B10“, “B2“
前端·javascript·vue.js
盟道科技28 分钟前
小程序电商订单超时自动取消的三种实现方案:定时扫描、Redis 过期监听、延迟消息对比与生产落地
数据库·redis·小程序
然我31 分钟前
从 Service 到生命周期:Agent Runtime 的插件内核
前端·javascript·agent
lhldsg39 分钟前
智慧场馆解决方案小程序系统:从架构设计到落地实践
java·小程序·需求分析
用户6919026813391 小时前
Agent 记忆处理机制详解:从变量数据类型到内存模型
javascript·架构
ShineWinsu1 小时前
对于 Vue 3:开发前需要掌握的 JavaScript 核心基础:从变量、数组方法到 Promise、Async/Await 与 ES Module 的解析
javascript·vue.js·elasticsearch
晴天162 小时前
Tsup:TypeScript库打包的“零配置极速方案”
前端·javascript·typescript
雪芽蓝域zzs2 小时前
第十七节:面包屑导航组件(适配多级嵌套路由)
前端·javascript·vue.js
凉红茶2 小时前
用Cursor开发微信小程序的第一天
微信小程序·小程序·ai编程
smileNicky2 小时前
React 弹窗组件如何在新标签页打开?
javascript·react.js·ecmascript