初步认识wxs

微信小程序的特点

        微信小程序是双线程的。它的架构分为app-service(逻辑层)和page-frame(视图层),分别运行在不同的线程。

什么是wxs

        wxs就是经过重写的,一种简单的运行在视图层的js代码,可以做一些简单的逻辑运算。它的作用就相当于vue中的计算属性(computed)。因为它可以使用{{ }}来进行内容的书写,所以他还可以相当于vue2中的过滤器(filter)。每个wxs负责维护其那一部分的wxml,wxss,有自己独特的作用域。

wxs的作用

        1、wxs就是在视图层中运行的js,在对view做一些操作时,可以对view数据做一些变换。

        2、wxs对性能的贡献只有一点:与wxml运行在同一个线程,避免了重复操作时跨线程通信的开销。

        简单来说,wxs就是wxml中的js代码。

wxs的使用

       wxs写在外面的使用方法

//page/index.wxs

  var msg = " hello world "

 //取出数组中最大值的数
 var getMax = function(array){
   var max;
   for(var i = 0; i= array[i] ? max : array[i])
    }
     return max
   };

  modele.exports={
    msg:msg,
    getMax:getMax
    };

  //可以写两个module.exports
  module.exports.data = " some msg"


    
    

      {{tools.msg}}
      {{tools.getMax(array)}}
      {{tools.data}}

//page/index.js 
    page({
        data:{
            array:[1,2,3,4,5,1,2,3,4]
        }
    })

          wxs写在wxml里面的写法

//pages/index/wxml

   
     var msg = " hello world "
     module.exports.msg=msg;
   

    {{m1.msg}}

         在b中引入a-----》注意点:需要使用相对路径

//page/a.wxs
     

    var a = "我是a"

    module.exports.a=a;

//page/b.wxs

      var b = require(./a.wxs)

module属性

        module属性是当前标签的模块名。在单个wxml文件内,建议其为唯一值。若重复的      话,则遵从唯一性,按照先后顺序,后者覆盖前者。不同文件之间的wxs模块名不会相互覆盖。

        module属性值得命名必须符合以下规则

         1、首字符必须是:字母(a-z  A-Z),下划线(_)

         2、剩余字符可以是字母(a-z A-Z),下划线(_),数字(0-9)

变量  

  •         
    • ​​​​​wxs中的变量均为值得引用
    • 没有声明的变量直接赋值使用,会被定义为全局变量
    • 如果只声明变量而不赋值,则默认为undefined
    • var表现与JavaScript一致,会有变量提升。

        变量名的命名规则与module属性的命名规则一致

wxs中的数据类型

        wxs语言目前有以下几种数据类型:

    • number :数字
    • string : 字符串
    • boolean :布尔
    • object : 对象
    • function : 函数
    • array :数组
    • date :日期
    • regexp :正则

你可能感兴趣的:(javascript,微信小程序,前端)