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

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

相关推荐
2501_916008897 小时前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
晴殇i7 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
码农刚子7 小时前
ASP.NET Core Blazor简介和快速入门 二(组件基础)
javascript·后端
我是日安8 小时前
从零到一打造 Vue3 响应式系统 Day 27 - toRef、toRefs、ProxyRef、unref
前端·javascript·vue.js
不如喫茶去8 小时前
VUE查询-历史记录功能
前端·javascript·vue.js
一枚前端小能手8 小时前
「周更第8期」实用JS库推荐:decimal.j
前端·javascript
Tech_Lin8 小时前
JavaScript Date时间对象的常用操作方法总结
前端·javascript
小岛前端9 小时前
🔥Vue3 移动端组件精选!满足各种场景!
前端·vue.js·微信小程序
一枚前端小能手9 小时前
🚫 请求取消还在用flag?AbortController让你的异步操作更优雅
前端·javascript
JohnYan9 小时前
工作笔记 - VSCode ssh远程开发
javascript·ssh·visual studio code