如何在小程序中使用wxs模块 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

如何在小程序中使用wxs模块

发表时间:2021-1-5

发布人:葵宇科技

浏览次数:29

一. 背景

  1. 在小程序 wxml 中的数据渲染,可以通过双花括号的形式,花括号里面只可以进行简单的算术运算或者使用三元表达式:

     {{ count }} 
    
    <view> {{ count ? 1 : 0 }} view>
    复制代码
  2. 假如需要对绑定的数据进行处理,在 wxml 进行数据渲染的时候,类比于vue可以使用 methods 的方法或者使用 computed 来处理数据,但是 wxml 并不支持这种写法。所以引入了 wxs 语法。

二. WXS语法

1.模块

  • wxs 代码可以写在 .wxs 文件内或者 标签内;

  • 每一个 .wxs 文件内或者 标签都是一个独立的模块;

  • 一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。

    重要:在 wxs 模块中编写js代码,但它不同于js,变量只能使用 var 来定义。

2.使用标签形式:

在 wxml 文件里面直接使用wxs标签:

module="m1">  // -- module是wxs模块的名称,导出时候在m1对象里面
var msg = "hello world";

module.exports.message = msg;


<view> {{ m1.message }} view>
复制代码

3. 使用 .wxs 文件形式:

在 example.wxs 文件中:

var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;
复制代码

在 wxml 文件中引入 .wxs 文件并使用:

module="m1" src=http://www.wxapp-union.com/"../example.wxs">  // -- src是引入路劲,只能是相对路径

<view> {{ m1.getMax([1, 2, 3, 4, 5, 1, 2, 3, 4]) }} view>  // --  使用 wxs 模块中的方法

作者:jackycai
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关案例查看更多