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

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

相关推荐
inksci2 分钟前
推荐动态群聊二维码制作工具
前端·javascript·微信小程序
wuhen_n2 分钟前
Vue3 单元测试实战:从组合式函数到组件
前端·javascript·vue.js
郑州光合科技余经理2 小时前
海外O2O系统源码剖析:多语言、多货币架构设计与二次开发实践
java·开发语言·前端·小程序·系统架构·uni-app·php
工程师老罗8 小时前
Image(图像)的用法
java·前端·javascript
早點睡3908 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-swiper
javascript·react native·react.js
jump_jump9 小时前
深入 JavaScript Iterator Helpers:从 API 到引擎实现
javascript·性能优化
swipe9 小时前
把 JavaScript 原型讲透:从 `[[Prototype]]`、`prototype` 到 `constructor` 的完整心智模型
前端·javascript·面试
Dxy123931021610 小时前
JS发送请求的方法详解
开发语言·javascript·ecmascript
CHU72903510 小时前
定制专属美丽时刻:美容预约商城小程序的贴心设计
前端·小程序
harrain10 小时前
antvG2折线图和区间range标记同时绘制
前端·javascript·vue.js·antv·g2