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

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

相关推荐
H0481 小时前
symbol为什么说是为了解决全局变量冲突的问题
javascript
Always_Passion2 小时前
FE视角下的Referrer全面解析
javascript·面试
七牛云行业应用2 小时前
大模型接入踩坑录:被 Unexpected end of JSON 折磨三天,我重写了SSE流解析
javascript·人工智能·代码规范
_AaronWong3 小时前
Vue3+Element Plus 通用表格组件封装与使用实践
前端·javascript·vue.js
代码煮茶3 小时前
JS 异步编程实战 | 从回调地狱到 Promise/Async/Await(附代码 + 面试题)
javascript·面试
全栈老石3 小时前
手写一个无限画布 #3:如何在Canvas 层上建立事件体系
前端·javascript·canvas
csdn飘逸飘逸3 小时前
Autojs基础-device(设备)
javascript
csdn飘逸飘逸3 小时前
Autojs基础-文件系统(files)
javascript
wuhen_n3 小时前
patch算法:新旧节点的比对与更新
前端·javascript·vue.js
十里八乡有名的后俊生3 小时前
深度解析:JavaScript中的import方式 - 静态导入、动态导入与CSS处理机制
前端·javascript·面试