小程序模板网

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

2017-12-30 旋毛虫

注意(来自官方文档) wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。 wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。 wxs 的运行环境和其他 javascript 代码是隔离 ...

 
 
 
 

注意(来自官方文档)

  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.  
  6. module.exports = {
  7. joinArray: joinArray
  8. }
  9. </wxs>
  10. <view>
  11. {{util.joinArray(names)}}
  12. </view>

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

 

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

/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官方文档



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18326.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询