E企盈营销工具技术服务商 热线:4006-838-530

wxs,微信小程序视图层WXS_小程序WXS模块

E企盈直播平台营销卖货系统

微信小程序视图层WXS_小程序WXS模块微信小程序的WXS代码可以编写在小程序wxml文件中的wxs标签内,或以.wxs为后缀名的文件内。模块每一个微信小程序的.wxs文件和wxs标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数,只能通过module.exports实现。.wxs文件在微信开发者工具里面,右键可以直接创建小程序的.wxs文件,在其中直接编写WXS脚本。示例代码:///pages/comm.wxsvarfoo=”‘helloworld’fromcomm.wxs”;varbar=function(d){returnd;}module.exports={foo:foo,bar:bar};上述例子在/pages/comm.wxs的文件里面编写了小程序的WXS代码。该.wxs文件可以被其他的.wxs文件或WXML中的wxs标签引用。module对象每个wxs模块均有一个内置的module对象。属性exports:通过该属性,可以对外共享本模块的私有变量与函数。示例代码:///pages/tools.wxsvarfoo=”‘helloworld’fromtools.wxs”;varbar=function(d){returnd;}module.exports={FOO:foo,bar:bar,};module.exports.msg=”somemsg”;!–page/index/index.wxml–wxssrc=”./../tools.wxs”module=”tools”/view{{tools.msg}}/viewview{{tools.bar(tools.FOO)}}/view页面输出:somemsg’helloworld’fromtools.wxsrequire函数在小程序的.wxs模块中引用其他wxs文件模块,可以使用require函数。引用的时候,要注意如下几点:只能引用小程序的.wxs文件模块,且必须使用相对路径。微信小程序wxs模块均为单例,wxs模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个wxs模块对象。如果一个小程序wxs模块在定义之后,一直没有被引用,则该模块不会被解析与运行。示例代码:///pages/tools.wxsvarfoo=”‘helloworld’fromtools.wxs”;varbar=function(d){returnd;}module.exports={FOO:foo,bar:bar,};module.exports.msg=”somemsg”;///pages/logic.wxsvartools=require(“./tools.wxs”);console.log(tools.FOO);console.log(tools.bar(“logic.wxs”));console.log(tools.msg);!–/page/index/index.wxml–wxssrc=”./../logic.wxs”module=”logic”/控制台输出:’helloworld’fromtools.wxslogic.wxssomemsgwxs标签属性名类型默认值说明moduleString当前wxs标签的模块名。必填字段。srcString引用.wxs文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。module属性module属性是当前wxs标签的模块名。在单个微信小程序的wxml文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同文件之间的wxs模块名不会相互覆盖。module属性值的命名必须符合下面两个规则:首字符必须是:字母(a-zA-Z),下划线(_)剩余字符可以是:字母(a-zA-Z),下划线(_),数字(0-9)示例代码:!–wxml–wxsmodule=”foo”varsome_msg=”helloworld”;module.exports={msg:some_msg,}/wxsview{{foo.msg}}/view页面输出:helloworld上面例子声明了一个名字为foo的模块,将some_msg变量暴露出来,供当前页面使用。src属性src属性可以用来引用其他的wxs文件模块。引用的时候,要注意如下几点:只能引用小程序的.wxs文件模块,且必须使用相对路径。wxs模块均为单例,wxs模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个wxs模块对象。如果一个wxs模块在定义之后,一直没有被引用,则该模块不会被解析与运行。示例代码:///pages/index/index.jsPage({data:{msg:”‘hellowrold’fromjs”,}})!–/pages/index/index.wxml–wxssrc=”./../comm.wxs”module=”some_comms”/wxs!–也可以直接使用单标签闭合的写法wxssrc=”./../comm.wxs”module=”some_comms”/–!–调用some_comms模块里面的bar函数,且参数为some_comms模块里面的foo–view{{some_comms.bar(some_comms.foo)}}/view!–调用some_comms模块里面的bar函数,且参数为page/index/index.js里面的msg–view{{some_comms.bar(msg)}}/view页面输出:’helloworld’fromcomm.wxs’hellowrold’fromjs上述例子在文件/page/index/index.wxml中通过wxs标签引用了/page/comm.wxs模块。注意wxs模块只能在定义模块的WXML文件中被访问到。使用include或import时,wxs模块不会被引入到对应的WXML文件中。template标签中,只能使用定义该template的WXML文件中定义的wxs模块。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » wxs,微信小程序视图层WXS_小程序WXS模块
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏