微信小程序wxs

微信小程序文章推荐: 微信小程序必备开发技能总结(不断更新)

一、 微信小程序中的wxs 是什么?

wxs 是微信小程序提供的一套独有的脚本语言。它和javascript 非常像,但是又有所不同,它结合wxml 可以构建构建出页面结构。下面先来看一下具体用法。

二、wxs 的内联用法

index.wxml

html 复制代码
<view>
    <wxs module="m1">
        module.exports.filterNumber = function (arr) {
            return arr.filter(function (item) {
                return item % 2 === 0
            })
        }
    </wxs>
    <view wx:for="{{m1.filterNumber(list)}}" wx:key="index">{{item}}</view>
</view>

index.js

js 复制代码
// index.js
Page({
    data: {
        list: [
            1, 2, 3, 4, 5, 6
        ]
    }
})

运行效果:

wxs 有几个特点:

  • wxs 代码都必须写在wxs 标签之间(内联的,外联可以写在.wxs文件中)
  • 每个标签都必须有一个module属性,这是wxs的唯一id, 在wxml模板中要使用wxs标签中定义的方法必须通过module定义的属性值进行调用。
  • wxs中定义的方法必须通过module.exports 进行导出,只能使用commonjs规范,不能使用es6 的导出规范
  • 在wxs 中不支持es6语法,比如let const 等是不能使用的
  • wxs 中定义的函数不能作为模板中的事件回调。

我们来证明下最后一个点, 其他几点在这里就演示了,大家自己尝试下。

html 复制代码
<view>
    <wxs module="m1"src="../../wxs/filter-list.wxs"> 
    </wxs>
    <view wx:for="{{m1.filterNumber(list)}}" wx:key="index">{{item}}</view>
    <button bindtap="m1.filterNumber(list)" type="primary">按钮</button>
</view>

点击按钮, 你会发现事件没有触发,并且控制台会有警告 Component "pages/index/index" does not have a method "m1.filterNumber(list)" to handle event "tap". 大概意思就是没有定义m1.filterNumber(list) 方法,也就验证了 wxs 中定义的函数不能作为模板中的事件回调。

三、外联的使用方式:

index.wxml

html 复制代码
<view>
    <wxs module="m1"src="../../wxs/filter-list.wxs"> 
    </wxs>
    <view wx:for="{{m1.filterNumber(list)}}" wx:key="index">{{item}}</view>
</view>

filter-list.wxs

js 复制代码
module.exports.filterNumber = function (arr) {
    return arr.filter(function (item) {
        return item % 2 === 0
    })
}

从上面的例子可以看到, 引用外部的wxs,首先定义一个wxs的文件,并且导出模板需要的方法属性,然后在模板中通过wxs标签的src 引用,并且只能引用 .wxs 文件模块,且必须使用相对路径

三、wxs 文件中引用wxs 文件

在.wxs 文件中可以继续引用wxs 文件,只能引用wxs 文件,不能引用其他的文件,在.wxs文件中使用require 引用外部的wxs文件。具体使用方式如下:

index.wxml

html 复制代码
<view>
    <wxs module="m1"src="../../wxs/filter-list.wxs"> 
    </wxs>
    <view wx:for="{{m1.filterNumber(list)}}" wx:key="index">{{item}}</view>
    <view>姓名: {{m1.info.name}}</view>
    <view>年龄: {{m1.info.age}}</view>
</view>

filter-list.wxs

js 复制代码
var info = require('./info.wxs')

module.exports.filterNumber = function (arr) {
    return arr.filter(function (item) {
        return item % 2 === 0
    })
}
module.exports.info = info

info.wxs

js 复制代码
var info = {
    name: 'xiaoming',
    age: 20
}

module.exports = info

运行效果如下:

四、总结

本篇介绍了微信小程序中wxs 的内联用法和外联用法,以及wxs 的优点,缺点,注意点,在开发中可以适当的使用wxs 实现逻辑的复用。减少代码体积

若你对微信小程序感兴趣可以关注 uni-app,小程序知识储备 专栏

相关推荐
小样还想跑几秒前
axios无感刷新token
前端·javascript·vue.js
字节跳跃者2 分钟前
为什么Java已经不推荐使用Stack了?
javascript·后端
字节跳跃者2 分钟前
深入剖析HashMap:理解Hash、底层实现与扩容机制
javascript·后端
Java水解10 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户38022585982431 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo5210033 分钟前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员39 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
Web小助手40 分钟前
js高级程序设计(日期)
javascript
Web小助手40 分钟前
js高级程序设计(4/5章节)
javascript
山有木兮木有枝_41 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js