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

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

相关推荐
咸鱼加辣15 分钟前
【前端框架】路由配置
javascript·vue.js·前端框架
咸鱼加辣15 分钟前
【前端框架】一段普通的 JavaScript 程序
开发语言·javascript·前端框架
爱吃的强哥17 分钟前
uni-app 开发微信小程序注意点
微信小程序·小程序·uni-app
雪域迷影18 分钟前
怎么将.ts文件转换成.js文件?
javascript·typescript·npm·tsc
narukeu22 分钟前
聊下 rewriteRelativeImportExtensions 这个 TypeScript 配置项
前端·javascript·typescript
枫子有风34 分钟前
Day6 前端开发(from teacher;HTML,CSS,JavaScript,Web APIs,Node.js,Vue)
javascript·css
晚烛9 小时前
实战前瞻:构建高可靠、强协同的 Flutter + OpenHarmony 智慧教育平台
javascript·flutter·html
保护我方头发丶9 小时前
ESP-wifi-蓝牙
前端·javascript·数据库
董世昌4110 小时前
什么是扩展运算符?有什么使用场景?
开发语言·前端·javascript
Yaru1110 小时前
Vue 3.6 预览版特性
javascript·vue.js