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

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

相关推荐
C_心欲无痕4 分钟前
Next.js 的哲学思想
开发语言·前端·javascript·ecmascript·nextjs
hxjhnct4 分钟前
Vue-Router 哈希路由 vs 历史路由详解
javascript·vue.js·哈希算法
00后程序员张7 分钟前
iOS 应用加固软件怎么选,从源码到IPA方案选择
android·ios·小程序·https·uni-app·iphone·webview
海鸥两三8 分钟前
登录页面form表单
前端·javascript·css
[H*]9 分钟前
Flutter框架跨平台鸿蒙开发——Pattern Matching模式匹配
android·javascript·flutter
imHere·9 分钟前
UniApp + 微信小程序 xr-frame 3D 开发实战指南
微信小程序·uni-app·xr
游戏开发爱好者816 分钟前
iOS App 抓不到包时的常见成因与判断思路,结合iOS 调试经验
android·ios·小程序·https·uni-app·iphone·webview
qq_124987075317 分钟前
基于微信小程序宠物服务系统(源码+论文+部署+安装)
java·spring boot·后端·微信小程序·小程序·毕业设计·宠物
玫城10 小时前
[ VUE ] 封装通用数组校验组件,el-input内使用
前端·javascript·vue.js
弓.长.14 小时前
React Native 鸿蒙跨平台开发:实现一个多功能单位转换器
javascript·react native·react.js