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

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

相关推荐
用户57573033462420 分钟前
🔥 前端必考!AJAX 数据请求全解析,async true/false 区别一次搞懂
javascript
烤麻辣烫42 分钟前
正则表达式快速掌握
前端·javascript·学习·正则表达式·html
心之语歌2 小时前
flutter 父子组件互相调用方法,值更新
前端·javascript·flutter
肖。35487870942 小时前
html中onclick误区,后续变量会更改怎么办?
android·java·javascript·css·html
Lee川2 小时前
从字符串操作到数组映射:一次JavaScript数据处理的深度探索
javascript
随逸1773 小时前
《React 性能优化:useMemo 与 useCallback 实战》
javascript·react.js
HelloReader3 小时前
Tauri 用“系统 WebView + 原生能力”构建更小更快的跨平台应用
前端·javascript·后端
滕青山3 小时前
JSON转TypeScript接口核心JS实现
前端·javascript·vue.js
Xin_z_3 小时前
Vue3 + Element Plus el-tree 节点点击选中问题修复总结
前端·javascript·vue.js
吴声子夜歌3 小时前
小程序——项目结构
小程序