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

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

相关推荐
嵌入式×边缘AI:打怪升级日志4 分钟前
第十一章:主控访问多个传感器(Modbus 网关/桥接器设计)
开发语言·javascript·ecmascript
qq_24218863327 分钟前
微信小程序AI象棋游戏开发指南
人工智能·微信小程序·小程序
Highcharts.js31 分钟前
Highcharts 3D漏斗图(Funnel 3D)完全指南:从模块加载到一文学会三维漏斗可视化
javascript·开发文档·highcharts·图表开发·漏斗图·3d 图表
我是伪码农44 分钟前
Vue 2.11
前端·javascript·vue.js
wuhen_n1 小时前
JavaScript 防抖与节流进阶:从原理到实战
前端·javascript
打瞌睡的朱尤1 小时前
Vue day11商品详细页,加入购物车,购物车
前端·javascript·vue.js
SuperEugene1 小时前
《对象与解构赋值:接口数据解包的 10 个常见写法》
前端·javascript
Never_Satisfied1 小时前
在JavaScript中,如何给字符串数组中的元素去重
开发语言·javascript·ecmascript
打瞌睡的朱尤1 小时前
Vue day12 Vue3认识,写法区分
前端·javascript·vue.js
阿珊和她的猫1 小时前
Vue Router 的使用指南
前端·javascript·vue.js