微信小程序:新功能WXS解读

注意(来自官方文档)

wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。

wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。

wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。

wxs 函数不能作为组件的事件回调。

由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

举个例子,在wxs出来之前,如果我们要连接一个数组的内容并显示在wxml中,我们需要通过循环连接数组的每一项:

.wxml


<view>

    <block wx:for="{{names}}" wx:key="item">

        {{item}}

    </block>

</view>

.js


Page({

    data: {

        names:[

            'Tom',

            'Peter',

            'Gray',

            'Lisa'

        ]

    },

})

或者先在js中连接好,放在data中,再显示在wxml中: 

.wxml


<view>

    {{content}}

</view>

.js


Page({

    data: {

        content:"",

        names:[

            'Tom',

            'Peter',

            'Gray',

            'Lisa'

        ]

    },

    onLoad(options){

        let content = this.data.names.join(" ")

        this.setData({

            content

        })

    }

})

有了wxs后,我们可以直接在wxml完成:


.wxml


<wxs module="util">

    var joinArray = function (array) {

        return array.join(' ')

    }

    module.exports = {

        joinArray: joinArray

    }

</wxs>

<view>

    {{util.joinArray(names)}}

</view>

或者将工具函数保存为单独的文件,通过引入来使用: 

/src/wxs/common.wxs


var joinArray = function (array) {

    return array.join(' ')

}

module.exports = {

    joinArray: joinArray

}

/pages/index/index.wxml


<wxs src="../../src/wxs/common.wxs" module="util" />

<view>

    {{util.joinArray(names)}}

</view>

引入的时候,wxs标签src填写相对路径(绝对路径无效),module指定名字。


我们也可以将页面中的一些常量放在wxs中:


var MAX_COUNT = 19

module.exports = {

    MAX_COUNT: MAX_COUNT

}


总结:


WXS增强了wxml的功能,相当于页面中的脚本语言,我们可以将比如检查手机格式的函数放在wxs中来使用(根据是否正确来改变相应的样式),而不用跑到在js中去检查。

需要注意的地方:


wxs目前似乎并不支持ES6(至少let不能使用)

wxs文件不能被js文件引用。wxs文件能引用wxs文件。

参考:

微信小程序WXS官方文档


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

本文作者2017-9-12 00:03
众观小程序
粉丝0 阅读16 回复0
上一篇:
微信小程序:新功能WXS这里做了一个比较常用的实例发布时间:2017-09-12
下一篇:
微信小程序豆瓣电影项目的改造发布时间:2017-09-11

精彩阅读

排行榜

小程序互动交流社区
181-2013-0473
周一至周五 9:00-18:00
意见反馈:79354359@qq.com

扫一扫联系我们