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

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

相关推荐
angerdream13 分钟前
最新版vue3+TypeScript开发入门到实战教程之DOM操作
javascript·vue.js
笨笨狗吞噬者16 分钟前
【uniapp】小程序支持分包引用分包 node_modules 依赖产物打包到分包中
前端·微信小程序·uni-app
我命由我123451 小时前
JS 开发问题:url.includes is not a function
开发语言·前端·javascript·html·ecmascript·html5·js
程序员小李白1 小时前
vue2基本语法详细解析(2.7条件渲染)
开发语言·前端·javascript
SuperEugene1 小时前
Vue3 项目目录结构规范:按业务域划分,新人快速上手|项目规范篇
前端·javascript·vue.js
陕西小伙伴网络科技有限公司1 小时前
kettle单转换实现分页查询
开发语言·前端·javascript
南知意-2 小时前
cloud-app-admin:一款现代化、开箱即用的 Vue 3 后台管理模板
前端·javascript·vue.js·开源·开源项目
前端小王呀2 小时前
Vue 中高级开发面试题及答案
前端·javascript·vue.js
进击的尘埃2 小时前
AI 生成单元测试的质量治理:覆盖率虚高、断言失焦与变异测试验证
javascript
new code Boy2 小时前
前端核心基础汇总
开发语言·javascript·原型模式