微信小程序day01_17之wxs模块的页面引用

一.什么是wxs

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。 使用wxs的注意点:

1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
3. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
4. wxs 函数不能作为组件的事件回调。
5. 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

使用wxs的方法

• 定义*.wxs文件
• 使用wxs的内置对象, module.exports 暴露其属性和接口. 通过暴露后, 这些属性和接口都共有化了
• 在wxml的页面中, 使用 即可引入wxs了

二. wxs 页面间的调用

代码示例 新建一个文件名为 module.wxs 内容如下

var name = "周杰伦";
var age = 18;

var method =function(obj){
  return obj ;
}

module.exports = {
  name : name,
  age : age,
  method : method
}

在wxml中, 进行引用如下

   
  

   {{item.name}} 
   {{item.age}} 
   {{item.method("欢迎关注我的微信公众号: java持续实践")}} 

最终页面显示如下, 可以看到成功引用了wxs中的代码

二. wxs模块间的调用

require函数 在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。

引用的时候，要注意如下几点：

1. 只能引用 .wxs 文件模块，且必须使用相对路径。
2. wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
3. 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

代码示例: 在wxs文件夹中 , 新创建一个文件, other.wxs , 内容如下

var name = "欢迎关注我的微信公众号: java持续实践";
var age = 28;

var method = function (obj) {
  return obj;
}

module.exports = {
  name: name,
  age: age,
  method: method
}

在module.wxs 中,进行引用如下 使用var other =require("../wxs/other.wxs"),进行了模块的引用. 使用console.log(other.name),进行控制台的输出.

var other =require("../wxs/other.wxs")


var name = "周杰伦";
var age = 18;

var method =function(obj){
  console.log(other.name)
  console.log(other.age)
  console.log(other.method("java持续实践"))
  return obj ;
}

module.exports = {
  name : name,
  age : age,
  method : method
}

控制台打印如下, 可以看到成功进行了 模块间数据的调用.