微信小程序-WXS的作用和使用

合集 - 微信小程序(60)

1.小程序开发概述2023-04-022.创建第一个小程序2023-04-023.微信小程序app.json文件2023-04-024.微信小程序-sitemap.json文件2023-04-025.微信小程序app.js文件2023-04-026.微信小程序app.wxss文件2023-04-027.微信小程序-project.config.json文件2023-04-068.微信小程序-页面.json文件2023-04-059.微信小程序-页面.js文件2023-04-0510.微信小程序-组件创建和使用2023-04-0611.微信小程序-组件-.json文件2023-04-0612.微信小程序-组件-.js文件2023-04-0613.微信小程序-WXSS学什么2023-04-0714.微信小程序-WXSS的书写格式2023-04-0715.微信小程序-新增RPX响应式单位2023-04-0716.微信小程序-什么是WXML2023-04-0917.微信小程序-WXML数据绑定2023-04-0918.微信小程序-WXML条件渲染2023-04-0919.微信小程序-WXML的hidden属性2023-04-0820.微信小程序-WXML列表渲染2023-04-0921.微信小程序-WXML列表渲染Key2023-04-0922.微信小程序-WXML包装元素2023-04-09

23.微信小程序-WXS的作用和使用2023-04-14

24.微信小程序-WXS独立文件2023-04-1425.微信小程序-WXS支持的语法2023-04-1426.微信小程序-小程序事件绑定2023-04-1627.微信小程序-小程序事件冒泡和事件捕获2023-04-1628.微信小程序-事件传递数据2023-04-1629.微信小程序-data和mark2023-04-2030.微信小程序-touches和changedTouches2023-04-2131.微信小程序-案例练习2023-04-2132.微信小程序-view组件2023-04-2233.微信小程序-text组件2023-04-2234.微信小程序-icon组件2023-04-2235.微信小程序-button组件2023-04-2236.微信小程序-image组件2023-04-2437.微信小程序-scrollview2023-05-1338.微信小程序-image组件-选择相册资源案例2023-04-2439.微信小程序-自定义组件2023-05-1340.微信小程序-自定义组件样式隔离2023-05-1441.微信小程序-自定义组件外部样式2023-05-1442.微信小程序-传递数据父传子2023-05-1443.微信小程序-传递数据子传父2023-05-1444.微信小程序-页面访问组件数据和方法2023-05-1445.微信小程序-组件通讯练习2023-05-1446.微信小程序-单个插槽2023-05-1547.微信小程序-多个插槽-具名插槽2023-05-1648.微信小程序-behaviors2023-05-1749.微信小程序-双线程渲染模型2023-05-1850.微信小程序-页面生命周期2023-05-2051.微信小程序-页面生命周期方法2023-05-2152.微信小程序-组件生命周期方法2023-05-2153.微信小程序-应用程序生命周期方法2023-05-2154.微信小程序-页面跳转Tabbar2023-05-2155.微信小程序-页面跳转navigator组件2023-05-2156.微信小程序-页面跳转wxAPI2023-05-2157.微信小程序-页面跳转数据传递2023-05-2158.微信小程序-常用弹窗2023-05-2159.微信小程序-Storage2023-05-2160.微信小程序-获取用户位置2023-05-21

收起

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

什么是 WXS

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

!> 注意事项：

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

为什么需要 WXS(WXS 用来干什么)

• 小程序的 Mustache 语法只能直接绑定数据，或者写一些简单的表达式
• 而不能直接调用函数获取数据，这就导致了我们无法对一些数据进行复杂处理之后再绑定

例如：我们做一个短视频小程序，我们拿到了服务器返回的视频时长，这个时长是xxxx秒，我们希望展示的时候显示 xx分钟:xx秒，那么我们就需要对这个时长进行复杂的处理之后再绑定，但 Mustache 语法默认又获取不到函数的返回值，此时就需要用到 WXS

首先来看通过 Mustache 语法的方式来试试看，假设我们有一个 count，我们想让这个 count 大于等于1000后面以k的形式来进行展示，我们就有了如下的代码：

index.wxml:

<view>
  {{ count >= 1000 ? count / 1000 + "k" : count }}
</view>

index.js:

data: {
  count: 1000
},

那么我们能否将这个复杂的代码通过一个方法进行封装起来然后直接调用方法得到是否会更好呢，所以我抱着这样的好奇思想去尝试了一下：

index.js:

formartData: function(){
  return count >= 1000 ? count / 1000 + 'k' : count;
}

index.wxml:

<view>
  {{ formartData() }}
</view>

页面根本就没显示数据了很显然是不能这么做的：

然后这个时候就需要利用到本章讲解的WXS来解决该问题了，至于什么是WXS，上方已经详细概述过了，废话不多说直接上代码：

<view>
  {{ tool.formartData() }}
</view>

<wxs module="tool">
function formartData () {
  var count =  1000;
  console.log(count)
  return count >= 1000 ? count / 1000 + 'k' : count;
}

module.exports.formartData = formartData;
</wxs>

!> 不支持 ES6 语法

当然我们的 count 变量，可以通过方法传参的方式进行通行，我们官方文档当中说我们的WXS是不能调用其他JS的函数等变量，我们就可以利用这种方式去访问JS文件中的内容到达可以处理JS文件当中的内容变了等信息：

<view>
  {{ tool.formartData(count) }}
</view>

<wxs module="tool">
function formartData (count) {
  return count >= 1000 ? count / 1000 + 'k' : count;
}

module.exports.formartData = formartData;
</wxs>