小程序 wxs语法入门

       在小程序的开发过程中，wxs模块是比较常见的，在这里，我做了些简单的测试。主要内容包括wxs的作用和使用的两种方式，稍微总结看一下。

       主要内容在注释里写了，做测试时按照下方我目录结构创建文件测试即可。

       index.wxml

<!-- 
  1.wxs的作用，结合的wxml和script的作用，从而在wxml中使用一些函数或操作，注意wxs有自己的代码规范，但基本上类似js。
  2.在wxml中使用js函数一般是事件绑定事件的操作，除此之外，JavaScript中定义的函数不能在wxml中直接使用.
 -->

 <!-- 1.1错误的演示，例如,求浮点数保留两位数的情况 -->
<!-- <view>{{12.222.toFixed(2)}}</view>
 或者 
 <view>{{handleToFixed(12.222,2)}}</view> -->

 <!-- 可以看到，这样去直接写或者想去调用js中的函数的做法都是错误的 -->

 <!-- 2.wxs的使用在这种情况下就恰到好处了 -->

<!-- 2.1 wxs的使用方式一，在wxml中直接嵌套wxs代码 -->

<!-- 注意事项1：wxs是一个单独的模块，按照模块化进行开发，此处要用module来指定该模块的名字 -->
<wxs module="tools">
  var foo = "hello world, this is wxs";
  var handle = function(num1,num2){
    return num1.toFixed(num2);
  }
  var message = function(msg){
    return msg;
  }

  /*注意事项2：wxs模块内的变量是私有的，要想模块外的wxml代码引用，要用module.exports暴露能被使用的变量 */
  /*注意事项3：Foo是指定给外部使用的变量名，foo是内部对应的变量，用逗号隔开*/

  module.exports={
    Foo:foo,                
    handle:handle,
    message:message
  };             
</wxs>

<!-- 注意事项4：应用mustache语法，使用wxs模块内的变量或函数时，要用module指定的名字，通过 模块名.成员 的方式来使用 -->
<view >{{tools.Foo}} </view>
<view>{{tools.handle(12.22222,3)}}</view>
<view>{{tools.message(tools.Foo)}}</view>
<view>-----------------分割线----------------------</view>

<!--3.wxs的使用方式二，引用.wxs文件  （实战中采用此种方式较好）-->

<!-- 注意事项5：要先用<wxs/>闭合标签引进.wxs文件，src中指定的是相对路径，不能是绝对路径 -->
 <wxs src="../../tools/tools.wxs" module="tt"/>
 <view >{{tt.Foo}} </view>
<view>{{tt.handle(12.22222,3)}}</view>

<!-- 注意事项6：此处tt,tools两个不同模块也能这样交叉使用,也能使用在js中的data数据 -->
<view>{{tt.message(tools.Foo)}}</view>
<view>{{tt.handle(price,2)}}</view>

<!-- 常见应用：在wxs中实现数据的格式化，比如时间，价格 -->

        tools.wxs

var foo = "hello world, this is tools.wxs";
var handle = function (num1, num2) {
  return num1.toFixed(num2);
}
var message = function (msg) {
  return msg;
}

module.exports = {
  Foo: foo,
  handle: handle,
  message: message
}; 

module.exports.info = "this is tools.wxs";

         index.js

Page({
  data: {
   price:27.666666
  },
  handleToFixed(num1,num2){
    return num1.toFixed(num2);
  }
 
})

代码文件目录结构如下