微信小程序开发|小程序脚本语言 wxs

微信小程序开发 专栏收录该内容
8 篇文章 0 订阅

微信小程序开发|小程序脚本语言 wxs

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

wxs 可以说就是为了满足能在页面中使用 js 存在的,在 wxml 页面中,只能在插值{{ }}中写简单的 js 表达式,而不能调用方法,例如想取出一个字符串的最后一位,就不能调用 slice() 方法。

通常的解决办法是在 page 的 data 对象中先把这个字符串截取好赋给某个变量,然后在页面中使用这个变量,但是问题又来了,如果变量多了呢,是不是要定义很多次。

WXS 代码可以编写在 wxml 文件中的 标签内,或以 .wxs 为后缀名的文件内。

在 wxml 文件中的 标签内

1、页面渲染

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

2、数据处理

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})

3、页面输出:

hello world

.wxs 文件

.wxs 文件

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

页面渲染

<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

页面输出:

some msg
'hello world' from tools.wxs

参考文档

WXS 简单介绍
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

WXS 语法参考
https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值