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

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

相关推荐
FindYou.1 小时前
基于mdEditor实现数据的存储和回显(导出pdf&表情包&目录)
javascript·vue
SuperEugene2 小时前
数组查找与判断:find / some / every / includes 的正确用法
前端·javascript
说私域2 小时前
技术赋能直播运营:开源AI智能名片商城小程序助力个人IP构建与高效运营
人工智能·tcp/ip·小程序·流量运营·私域运营
phltxy3 小时前
Vue进阶实战:自定义指令与插槽的核心用法及实战案例
前端·javascript·vue.js
说私域3 小时前
流量思维向长效思维转型:开源链动2+1模式AI智能名片小程序赋能私域电商品牌建设
人工智能·小程序·开源·产品运营·私域运营
Never_Satisfied3 小时前
在JavaScript / HTML中,触发某个对象的click事件
开发语言·javascript·html
许同3 小时前
JS-WPS 自动化办公(5)多Sheet整合
开发语言·前端·javascript
_OP_CHEN3 小时前
【前端开发之JavaScript】(四)JS基础语法下篇:函数与对象核心要点深度解析
开发语言·前端·javascript·界面开发·前端开发·网页开发·语法基础
强子感冒了3 小时前
JavaScript学习笔记:函数、方法与继承(原型与class)
javascript·笔记·学习
打瞌睡的朱尤12 小时前
Vue day10 完整购物网页(登录页,首页,搜索)
前端·javascript·vue.js