微信小程序> wxs,小程序使用之WXS

wxs,小程序使用之WXS

浏览量:973 时间: 来源:程序猿tx
之前做过一段时间的小程序开发,自己也写过两个自己的小程序,了解些前端的知识,相对而言还是比较容易上手的,小程序的视图采用wxml与wxss编写,对比前端就是html与css。wxml跟html类似是描绘页面结构的,小程序有一套自己的标签,而大部分前端的css样式都可以用在wxss里面。关于数据绑定部分,小程序使用Mustache语法(双大括号)进行绑定。这里要讲的是wxs,小程序自己的一套脚本语言,可以用于渲染页面。
一个简单的例子,新建一个a.wxml文件,代码如下:
wxsmodule="a"varstr="qwerty"module.exports.txt=str/wxsview{{a.txt}}/view这里wxs代码直接编写在wxml文件内,定义wxs的module名为a,这个参数是必须的;通过exports暴露对外的属性,外部使用的话,直接通过module名调用属性值。当然,wxs代码也可以写在以.wxs为后缀名的文件内a.wxs,里面直接编写代码:
varstr="qwerty"module.exports.txt=str使用的话,在a.wxml文件内同样需要使用标签,并且定义module名,注意src使用相对路径引入wxs文件:
wxssrc="./index.wxs"module="a"/view{{a.txt}}/view这里推荐使用以.wxs为后缀名来封装代码,这样便于其他文件通用。
同时,在.wxs模块中可以引用其他wxs文件模块,注意这里只能以文件的形式引用,通过require引用文件相对路径。
//编写b.wxs文件varstr="123456"module.exports.txt=str//wxs代码直接编写在wxml文件内wxsmodule="a"//通过require引用b.wxs文件varb=require("./b.wxs")varstr="qwerty"module.exports.txt=b.txt/wxsview{{a.txt}}/view------------------------------------------//在a.wxs里引用b.wxsvarb=require("./b.wxs")varstr="qwerty"module.exports.txt=b.txt//a.wxml里引入a.wxswxsmodule="a"src="./index.wxs"/view{{a.txt}}/view同样wxs还可以对外暴露方法,
wxsmodule="a"varadd=function(i,j){returni+j}module.exports.add=add/wxsview{{a.add(1,2)}}/view这样我们可以通过编写wxs,对data数据进行处理,渲染到view层。
实际项目中,通过wxs可以简化代码,更加具有通用性。
欢迎关注我的个人博客:
更多精彩欢迎关注微信号:春风十里不如认识你一起学习,一起进步,欢迎上车,有问题随时联系,一起解决!!!

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎