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

末蓝、 2022-03-10 03:44 582阅读 0赞

### 文章目录 ###

*   *   *  一.什么是wxs
         *  二. wxs 页面间的调用
         *  二. 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中, 进行引用如下

<view class='container'>
       
      <wxs src="../wxs/module.wxs" module="item"></wxs>
    
      <view> {
       {item.name}} </view>
      <view> {
       {item.age}} </view>
      <view> {
       {item.method("欢迎关注我的微信公众号: java持续实践")}} </view>
    </view>

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

### 二. 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
    }

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220310/bae35c97f1bd47c9b760c7a0b442ee22.png
[20190309163005497.png]: /images/20220310/fddab1fb81144ac9811fcce754964c39.png