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

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

相关推荐
阿伟来咯~19 分钟前
vue3+Nest.js项目 部署阿里云
开发语言·javascript·ecmascript
不想上班只想要钱1 小时前
vue3使用<el-date-picker分别设置开始时间和结束时间时,设置开始时间晚于当前时间,开始时间早于结束时间,结束时间晚于开始时间
前端·javascript
2501_915373882 小时前
Electron 入门指南
前端·javascript·electron
吃瓜群众i3 小时前
兼容IE8浏览器的8个实用知识点
前端·javascript
niech_cn3 小时前
仿微信上传头像,实现拍摄、相册选择、手动缩放、裁剪、蒙版、撤回、还原、上传微信本地文件功能
微信·小程序
猫头虎3 小时前
如何解决IDE项目启动报错 error:0308010C:digital envelope routines::unsupported 问题
javascript·ide·vue.js·typescript·node.js·编辑器·vim
Mintopia3 小时前
Three.js 在数字孪生中的应用场景教学
前端·javascript·three.js
da-peng-song3 小时前
ArcGIS arcpy代码工具——根据属性结构表创建shape图层
javascript·python·arcgis
Jedi Hongbin5 小时前
echarts自定义图表--仪表盘
前端·javascript·echarts