小程序WXS脚本解析

小程序WXS脚本解析,第1张

wxs脚本存在的意义是因为小程序的渲染机制决定的。小程序的webview 与 js逻辑渲染的分离导致小程序在某些场景需要高频触发this.setData() 时会出现卡顿现象,为了解决卡顿场景wxs 脚本顺势而生。

官方介绍:

wxs脚本的解决方案:wxs脚本是运行在wxml视图层的,避开了跨线程通信的成本。wxs可以直接 *** 作wxml的视图元素,也可以充当类似vue 中computed的角色来格式化数据,减少调用this.setData()的次数,减少性能损耗。

wxs 需要注意的是只能通过console.log()来调试脚本,无法通过debugger和断点进行。

使用实例详看官方文档( https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html )

注意细节的理解以及官方在文档末尾提供的参考示例。

程序没有所谓的compute计算属性,看文档发现有wxs模版,这个可以充当是小程序的计算属性了。

具体的使用方法如下:(记录一下,怕时间久了忘记了)

【官方文档地址】( https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/ )

1.可以在根目录下新建一个util存放,wxs文件后缀是 .wxs。在wxs文件中,直接声明函数就可以了,然后用module.exports导出(类似于单独写一个js文件,然后引入)

2.使用:util是上面定义的别名,checkCouponData是wxs文件中定义的一个方法,该方法需要传入一个参数

小程序的wxs功能可以让wsmxl可以调用和编写js,基本上wxs和JS无关系,只是语法形式很相似。

如下写了两个关于时间的函数,并将它们导出,

<wxs module="m1">

var getMax = function(flightDate) {

    var now = getDate().getDate()

    var flDate = getDate(flightDate).getDate()

    if( now <flDate ){

      return '+1'

    }else{

      return ''

    }

}

var formartTime = function(flightDate,format){

  if(flightDate){

    var realDate = getDate(flightDate)

    function timeFormat(num) {

      return num <10 ? '0' + num : num

    }

    var date = {

      "Y": timeFormat(realDate.getFullYear()),

      "M": timeFormat(realDate.getMonth() + 1),

      "d": timeFormat(realDate.getDate()),

      "h": timeFormat(realDate.getHours()),

      "m": timeFormat(realDate.getMinutes()),

      "s": timeFormat(realDate.getSeconds()),

      "q": Math.floor((realDate.getMonth() + 3) / 3),

      "S": realDate.getMilliseconds(),

    }

    if (!format) {

      format = "yyyy-MM-dd hh:mm:ss"

    }

    if( format == 'hh:mm' ){

        return date.h+':'+date.m

    }else{

        return date.h+':'+date.m

    }

  }else{

    return false

  }

}

module.exports.getMax = getMax

module.exports.formartTime = formartTime

</wxs>

可在页面添加如下使用:

m1.formartTime()  m1.getMax()


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/12031362.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存