概念

1. 什么是 wxs

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

2. wxs 的应用场景

wxml 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数。因此，小程序中

wxs 的典型应用场景就是“过滤器”。

3. wxs 和 JavaScript 的关系*

虽然 wxs 的语法类似于 JavaScript，但是 wxs 和 JavaScript 是完全不同的两种语言：

① wxs 有自己的数据类型

number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、
function 函数类型、array 数组类型、 date 日期类型、

regexp 正则

② wxs 不支持类似于 ES6 及以上的语法形式

不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...
支持：var 定义变量、普通 function 函数等类似于 ES5 的语法

③ wxs 遵循 CommonJS 规范

module 对象
require() 函数
module.exports 对象

基本语法

1. 内嵌 wxs 脚本

wxs 代码可以编写在 wxml 文件中的标签内，就像 Javascript 代码可以编写在 html 文件中的 <script>标签内一样。wxml 文件中的每个标签，必须提供 module 属性，用来指定当前 wxs 的模块名称，方便在wxml 中访问模块中的成员：

2. 定义外联的 wxs 脚本

wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像 javascript 代码可以编写在以 .js 为后缀名的文件中

一样。示例代码如下：

3. 使用外联的 wxs 脚本

在 wxml 中引入外联的 wxs 脚本时，必须为标签添加 module 和 src 属性，其中：

module 用来指定模块的名称
src 用来指定要引入的脚本的路径，且必须是相对路径

示例代码如下：

WXS 的特点

1. 与 JavaScript 不同

为了降低 wxs（WeiXin Script）的学习成本， wxs 语言在设计时借大量鉴了 JavaScript 的语法。但是本质上， wxs 和 JavaScript 是完全不同的两种语言！

2. 不能作为组件的事件回调

wxs 典型的应用场景就是“过滤器”，经常配合Mustache 语法进行使用，例如：

3. 隔离性

隔离性指的是wxs 的运行环境和其他JavaScript 代码是隔离的。体现在如下两方面：

①wxs 不能调用js 中定义的函数

②wxs 不能调用小程序提供的API

4. 性能好

在iOS 设备上，小程序内的WXS会比JavaScript 代码快2 ~ 20 倍
在android 设备上，二者的运行效率无差异

本地生活案例

2.创建商家列表页面

1.在app.josn创建'pages/shoplist/shoplist'页面

2.实现点击对应按钮跳转到商家列表页面

利用导航传参实现按照数组不同参数值传递

2.动态设置页面数据

1.利用小程序的wx.setNavigationBarTitle实现改变页面标题

这里根据官方文档，要在onReady中进行渲染。但是由于要动态获取不同标题，要从onLoad的options获取传递过来的参数,同时也要在data中创建一个空对象传递参数到onReady中的wx.setNavigationBarTitle中的title

添加编译模式，不用老是切页面

3. 接收后端数据+渲染页面

1.设置接受的初始化参数

一个参数列表，每页数据，当前页码，总数据量

2.获取请求得到数据

这里ID需要用``+${}写这个动态参数，而且有请求参数所以data中要放参数

3.数据请求成功之后给数组赋值

注意：数组接收用到了解构将新旧数组拼接，同时由于下面的total要的是数字所以-0转换这里有个判断数据加载完毕的公式 页码值*每页显示多少条数据 >= total

4. 将接收的数据渲染到页面上

分割手机号使用wxs

5.上拉触底加载下一页数据

shoplist.json配置 "onReachBottomDistance": 200,
onReachBottom设置页码数加一，同时调用请求函数getShopList
在getShopList开始加wx.showLoading提示加载中，请求完成用wx.hideLoading关闭提示
当网速较慢，上拉会不断请求下一页数据，因此要加节流阀控制 - 在data中新增isLoading:false - 请求开始时值为true，完成请求时置为false - 在onReachBottom判断该值为true就不加载下一页数据

6. 上拉刷新

1.配置json 2. 重置初始数据，调用getShowList

关闭下拉刷新，由于只有部分需要，这里就要按需关闭在请求函数中传cb，看是否有回调进来，有就执行回调函数，这里就是onPullDownRefresh中的getShopList有回调，所以在这里写关闭下拉的回调函数即可

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情

小程序入门（六）—— wxs脚本

概念