微信小程序:新功能WXS解读(2017.08.30新增) - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序:新功能WXS解读(2017.08.30新增)

发表时间:2021-4-30

发布人:葵宇科技

浏览次数:76


注意(来自官方文档)

  1. wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
  2. wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
  3. wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
  4. wxs 函数不能作为组件的事件回调。
  5. 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
举个例子,在wxs出来之前,如果我们要连接一个数组的内容并显示在wxml中,我们需要通过循环连接数组的每一项:

.wxml

  1. <view>
  2. <block wx:for="{{names}}" wx:key="item">
  3. {{item}}
  4. </block>
  5. </view>

.js

  1. Page({
  2. data: {
  3. names:[
  4. 'Tom',
  5. 'Peter',
  6. 'Gray',
  7. 'Lisa'
  8. ]
  9. },
  10. })

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

  1. <view>
  2. {{content}}
  3. </view>

.js

  1. Page({
  2. data: {
  3. content:"",
  4. names:[
  5. 'Tom',
  6. 'Peter',
  7. 'Gray',
  8. 'Lisa'
  9. ]
  10. },
  11. onLoad(options){
  12. let content = this.data.names.join(" ")
  13. this.setData({
  14. content
  15. })
  16. }
  17. })

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

.wxml

  1. <wxs module="util">
  2. var joinArray = function (array) {
  3. return array.join(' ')
  4. }
  5. module.exports = {
  6. joinArray: joinArray
  7. }
  8. </wxs>
  9. <view>
  10. {{util.joinArray(names)}}
  11. </view>

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

  1. var joinArray = function (array) {
  2. return array.join(' ')
  3. }
  4. module.exports = {
  5. joinArray: joinArray
  6. }

/pages/index/index.wxml

  1. <wxs src="../../src/wxs/common.wxs" module="util" />
  2. <view>
  3. {{util.joinArray(names)}}
  4. </view>

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

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

  1. var MAX_COUNT = 19
  2. module.exports = {
  3. MAX_COUNT: MAX_COUNT
  4. }

总结:

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

需要注意的地方:

  • wxs目前似乎并不支持ES6(至少let不能使用)
  • wxs文件不能被js文件引用。wxs文件能引用wxs文件。

参考:
微信小程序WXS官方文档



相关案例查看更多