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

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

相关推荐
吴声子夜歌25 分钟前
JavaScript——异步编程
开发语言·前端·javascript
吴声子夜歌34 分钟前
TypeScript——命名空间
javascript·ubuntu·typescript
xujing_061 小时前
跑马灯组件vue3+es6
前端·javascript·es6
我只是来分享的1 小时前
Js也能写外挂?8 行代码改掉《植物大战僵尸》的阳光值!对于js来说超越调用大漠超越调用memory.js
javascript
Mahut1 小时前
我们是怎么用 TanStack 全家桶的
前端·javascript·架构
说实话起个名字真难啊1 小时前
前端JS审计:渗透测试的“破局之钥”
开发语言·前端·javascript·测试工具
吴声子夜歌1 小时前
TypeScript——编译器和编译选项
前端·javascript·typescript
Traced back2 小时前
[特殊字符] Vue3 常用指令大全
前端·javascript·vue.js
Highcharts.js2 小时前
在React中使用图表库时,优先选择组件化方案可以降低开发复杂度
前端·javascript·react.js·数据可视化·highcharts
竹林8182 小时前
从零到一:在 React 前端中集成 The Graph 查询 NFT 持有者数据实战
前端·javascript