从零开始学微信小程序之WXS模块（三）

WXS模块

引入

WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
和javascript很相似，更多的可能是和ES6语法的累计，WXS与JS是不同的语言，但相似。

引例

每个.WXS文件和都是单独的模块，是固定划分的区域

这一步旨在用wxs模块引入路径；例如，在新建目录wxs中新建文件夹tools.wxs中写入：

<wxs src="./../wxs/tools.wxs" module="mytools"></wxs>
<view>{{mytools.duiwai_bar1()}}</view>

再在对应的页面中写要求的内容：

/** 变量定义*/
var number = "12.3";
var number2 = "￥";
/**模块函数，此时为私有 */
var bar1 = function (shuzi)
{
  /**字符串连接 */
  return number + number2;
}

/**模块的对外接口，对外操作 */
module.exports = 
{
  /*函数bar1对外的名称为duiwai_bar1*/
  duiwai_bar1:bar1,
};

这是将私有模块对外化的一个过程。
运行结果：

其中，wxs的xxx.wxs文件称为外部统一使用的js文件

2.在wxml中的数据绑定中{{}}是无法直接调用值得函数的，而在模块化的操作中，可以调用模块的函数对值进行操作。

var app = getApp(); //全局调用
Page({

  /**
   * 页面的初始数据
   */
  data: 
  {
    //准备了两个变量
    num1:0,
    num2:0,
    gnum1:0
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) 
  {
    //当页面加载时给Data定义了两个属性
    //并初始赋值为100和200
    this.setData //页面存储
    ({
      num1:100,
      num2:200,
      gnum1: app.globalData.gValue1
      //访问的是app.js里最后的全局变量
    });
  },

3.模块化的设计对于程序更友好（安全性、易扩展、易修改）
4.在页面的data属性中进行数据的定义。【页面级】
5.所有页面都可以访问【全局级】

var app = getApp(); //全局调用

这篇主要讲了wsx的基本使用和页面使用全局变量的方法。