• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请


注意(来自官方文档)

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



鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
微信小程序 movable-view组件应用:可拖动悬浮框_返回首页发布时间:2022-07-18
下一篇:
从开源项目学做微信小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap