初步认识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.length,++i){
     max = max == underfined ? array[i] : (max >= array[i] ? max : array[i])
    }
     return max
   };

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

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

<!-- //page/index.wxml -->
    <!-- //首先进行导入 -->
    <wxs src="./index.wxs" module="tools" />

     <view> {{tools.msg}}</view>
     <view> {{tools.getMax(array)}}</view>
     <view> {{tools.data}}</view>

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

          wxs写在wxml里面的写法

//pages/index/wxml

   <wxs module="m1">
     var msg = " hello world "
     module.exports.msg=msg;
   </wxs>

    <view>{{m1.msg}}</view>

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

//page/a.wxs
     

    var a = "我是a"

    module.exports.a=a;

//page/b.wxs

      var b = require(./a.wxs)

module属性

        module属性是当前<wxs>标签的模块名。在单个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 ：正则