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

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

相关推荐
小李子呢02111 小时前
前端八股性能优化(2)---回流(重排)和重绘
前端·javascript
吴声子夜歌3 小时前
Vue3——Vue实例与数据绑定
前端·javascript·vue.js
挖稀泥的工人6 小时前
AI聊天界面的布局细节和打字跟随方法
前端·javascript·面试
竹林8186 小时前
从“连接失败”到丝滑登录:我用 ethers.js 连接 MetaMask 的完整踩坑记录
前端·javascript
颜酱6 小时前
图片大模型实践:可灵(Kling)文生图前后端实现
前端·javascript·人工智能
Reart6 小时前
从0解构tinyWeb项目--(Day:2)
javascript·后端·架构
心连欣7 小时前
解锁对象遍历:当字符串遇上for...in循环
前端·javascript
jstopo网站8 小时前
水厂水泵工作流程图canvas动画
前端·javascript
张元清8 小时前
5 分钟用 Vite SSR 搭建一个全栈 React 应用
前端·javascript·面试
布局呆星8 小时前
Vue3 | 组件化开发---组件插槽与通信
前端·javascript·vue.js