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

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

相关推荐
遂心_12 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
遂心_12 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy13 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy13 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
一个不爱写代码的瘦子14 小时前
迭代器和生成器
前端·javascript
源猿人17 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin17 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖19 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬19 小时前
Promise 的场景和最佳实践
前端·javascript
Emma歌小白19 小时前
如何首次运行小程序后端
微信小程序