当前位置: 首页 > Web前端 > HTML

WXS

时间:2023-04-02 20:28:59 HTML

小程序使用文章链接:https://mp.weixin.qq.com/s/F1zzS7mvMpFaplq4KINzQg之前做过一段时间的小程序开发,自己也写了两个小程序来学习关于前端,相对来说还是比较好用的。小程序的view是用wxml和wxss写的,前端是html和css。wxml类似于html来描述页面结构。小程序有自己的一套标签,大部分前端的css样式都可以在wxss中使用。关于数据绑定部分,小程序使用Mustache语法(双大括号)进行绑定。这里要说的是wxs,一种小程序自带的脚本语言,可以用来渲染页面。一个简单的例子,新建一个.wxml文件,代码如下:varstr="qwerty"module.exports.txt=str{{a.txt}}这里直接将wxs的代码写在wxml文件中,wxs的模块名定义为a.这个参数是必需的;外部属性通过导出公开。对外使用,直接通过模块名调用属性值。当然也可以把wxs的代码写在后缀为.wxs的文件a.wxs中,代码直接写在里面:varstr="qwerty"module.exports.txt=str如果用的话就是还需要在a.wxml文件中使用标签并定义模块名称。注意src使用相对路径导入wxs文件:{{a.txt}}推荐使用.wxs作为后缀对代码进行封装,方便其他文件使用。同时在.wxs模块中可以引用其他wxs文件模块。注意这里只能以文件的形式引用,通过require引用文件的相对路径。//写入b.wxs文件varstr="123456"module.exports.txt=str//wxs代码直接写入wxml文件//通过require引用b.wxs文件varb=require("./b.wxs")varstr="qwerty"module.exports.txt=b.txt{{a.txt}}-----------------------------------------//引用b.wxsvarina.wxsb=require("./b.wxs")varstr="qwerty"module.exports.txt=b.txt//将a.wxs引入a.wxml{{a.txt}}同样,wxs也可以暴露方法,varadd=function(i,j){returni+j}module.exports。add=add{{a.add(1,2)}}这样我们就可以通过写wxs来处理data数据并渲染到view层。在实际项目中,通过wxs可以简化代码,更加通用。欢迎关注我的个人博客:https://www.manjiexiang.cn/更多精彩,敬请关注微信公众号:春风相识,不如相知相知。一起学习,一起进步。!!