前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序 | 9-wxs

小程序 | 9-wxs

作者头像
CnPeng
发布2021-05-17 15:15:01
5650
发布2021-05-17 15:15:01
举报
文章被收录于专栏:CnPengDev

WXS(WeiXin Script)是小程序的一套脚本语言,有自己的语法,结合 WXML,可以构建出页面的结构。WXS != JavaScript

由于在 WXML 中无法直接调用 Page 或 Component 中定义的事件绑定以外的函数,但在某些情况下,我们又希望使用函数来处理 WXML 中的数据(类似 Vue 中的过滤器),所以微信官方就推出了 WXS。

1. WXS 的限制和特点

  • WXS 的运行环境和其他 JavaScript 代码是隔离的,WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的 API。
  • WXS 函数不能作为组件的事件回调
  • 由于运行环境的差异,在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2~20 倍,在 Android 设备上二者运行效率无差异。

2. WXS 基本使用

<wxs></wxs> 标签设置 module 名称,并在节点中定义 js 代码内容,然后将内容通过 module.exports 导出(设置成 public),之后外部就可以通过 module 名称 调用导出的内容。

代码语言:javascript
复制
<!--pages/wxs/wxs.wxml-->

<!-- WXS 的定义方式 -->
<!-- 1 定义 wxs ,设置 module 名称,并在其中编写 js 代码 -->
<wxs module="cusModuleName">
  // 1-2 定义 js 代码
  var message = "Hello World";
  var name = "coderwhy";
  var sum = function (num1, num2) {
    return num1 + num2
  }

  function sum2(num1, num2) {
    return num1 + num2
  }

  //1-3 commonjs 模块化导出——上述变量默认私有,不导出外部无法引用
  module.exports = {
    // key 是外部引用时的名称,value 是 wxs 中定义的名称
    msg: message,
    name: name,
    count: sum,
    count2:sum2
  }
</wxs>


<!-- 2-1 这样是无法显示内容的,因为 message 默认私有,只有通过 module.exports 导出的内容才能显示 -->
<view>1-{{cusModuleName.message}}</view>
<!-- 2-2 使用 wxs 的 module 名称调用 module.exports 中的 key 名称,这样才可以显示。-->
<view>2-{{cusModuleName.msg}}</view>
<view>3-{{cusModuleName.count(1,2)}}</view>
<view>4-{{cusModuleName.count2(2,2)}}</view>

3. 导入 wxs

通常情况下,会单独定义一个 wxs 文件夹,其中定义 wxs 文件。使用方通过 <wxs src=""> 导入这些文件,导入时必须通过 module 设置名称,并且仅支持相对路径的导入。

代码语言:javascript
复制
// wxs/test.wxs

// 1-1 定义 js 代码
var message = "Hello World";
var name = "coderwhy";
var sum = function (num1, num2) {
  return num1 + num2
}
function sum2(num1, num2) {
  return num1 + num2
}

//1-2 commonjs 模块化导出——上述变量默认私有,不导出外部无法引用
module.exports = {
  //key 是外部引用时的名称,value 是 wxs 中定义的名称
  msg: message,
  name: name,
  count: sum,
  count2: sum2
}
代码语言:javascript
复制
<!--pages/wxs/wxs.wxml-->

<!-- 2 WXS 导入,仅支持相对路径导入,即带有 ../ 或 ./ 的导入方式-->
<wxs src="../../wxs/test.wxs" module="cusModuleName"/>

<!-- 3-1 这样是无法显示内容的,因为 message 默认私有,只有通过 module.exports 导出的内容才能显示 -->
<view>1-{{cusModuleName.message}}</view>
<!-- 3-2 使用 wxs 的 module 名称调用 module.exports 中的 key 名称,这样才可以显示。-->
<view>2-{{cusModuleName.msg}}</view>
<view>3-{{cusModuleName.count(1,2)}}</view>
<view>4-{{cusModuleName.count2(2,2)}}</view>

4. WXS 实际应用

代码语言:javascript
复制
// format.wxs

function priceFormat(price, num) {
  // 保留小数点后 x 位,默认为 2 
  var num = num || 2;
  // 如果传入的是字符串,需要做转换
  // var price = parseFloat(price)
  return price.toFixed(num)
}


module.exports={
  priceFormat:priceFormat
}
代码语言:javascript
复制
<!--pages/wxs/wxs.wxml-->

<!-- 2 WXS 导入,仅支持相对路径导入,即带有 ../ 或 ./ 的导入方式-->
<wxs src="../../wxs/test.wxs" module="cusModuleName"/>
<!-- 3-1 这样是无法显示内容的,因为 message 默认私有,只有通过 module.exports 导出的内容才能显示 -->
<view>1-{{cusModuleName.message}}</view>
<!-- 3-2 使用 wxs 的 module 名称调用 module.exports 中的 key 名称,这样才可以显示。-->
<view>2-{{cusModuleName.msg}}</view>
<view>3-{{cusModuleName.count(1,2)}}</view>
<view>4-{{cusModuleName.count2(2,2)}}</view>

<!-- 4-实际使用 -->
<wxs src="../../wxs/format.wxs" module="format"/>
<view>5-{{format.priceFormat(25.66666)}}</view>
<view>6-{{format.priceFormat(25.66666,3)}}</view>
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-05-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 CnPeng 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. WXS 的限制和特点
  • 2. WXS 基本使用
  • 3. 导入 wxs
  • 4. WXS 实际应用
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档