美文网首页
微信小程序wxs

微信小程序wxs

作者: Lucien_d70a | 来源:发表于2019-02-21 13:58 被阅读0次
  1. 其实一般业务,用WXML + JS,就已经足够了,但到现在更新了这么多个版本,文档上依然存在这东西就证明肯定有存在价值的。

  2. 打开文档一看,「由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。」,就这句话有点吸引,好像看不出用它的任何优势了,那既然也能快上2~20倍,那就继续往下看看吧。

简单分享下我今天总结的用法

1. 使用方式有两种

  • 第一种
// 在 wxml 里直接使用
<wxs module="name">
  var message = "hello" 
  module.export.message = message
</wxs>
<view>{{name.message}}</view>
  • 第二种
// 新建一个wxs文件,例如:test.wxs, 里面的代码和上面一样
// 在想使用的wxml里使用 (引入必须使用相对路径)
<wxs src="./test.wxs" module="name"></wxs> 
<view>{{name.message}}</view>

2. 好吧,可能你们会问,到底有什么用,写个hello,我还不如写在data里。是的,但后面有趣的事情就来了。 大家都知道,在小程序里,是不支持 {{ fn("hello") }}, 在调用函数时候不支持传入arguments,但用wxs就做到了,下面举个例子。

<wxs module="name">
   function reverseTo(str){
     return str.split('').reverse().join('')
   }
   module.exports = { reverseTo: reverseTo } 
<wxs>

<view> {{reverseTo('hello')}} </view>
>> 'olleh‘
  • 上面那个经典的Vue例子,实现了。
  • 其实说到这,很多正在做项目的同学们就会知道有地方要重构了,例如,以前我们要处理一个返回的时间,一般会在接口数据返回过来,然后处理一遍,现在感觉只要写一个formatTime的wxs就好了,然后直接在wxml里 {{ name.formatTime(item.time) }} 就好了。

3. wxs 怎么调用事件。

// 简单例子
<wxs module="moduleName">
  function wxsClick(){
    console.log("hello")
  }
  module.exports = { wxsClick:wxsClick }
</wxs>
<view bindtap="{{moduleName.wxsClick}}">点击我</view>

相关文章

  • 微信小程序:使用wxs检测邮箱格式实例

    之前介绍过微信小程序wxs功能的相关知识:微信小程序:新功能WXS(2017.08.30新增 这里做了一个比较常用...

  • 微信小程序开发|小程序脚本语言 WXS

    微信小程序开发|小程序脚本语言 wxs WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML...

  • 微信小程序wxs

    其实一般业务,用WXML + JS,就已经足够了,但到现在更新了这么多个版本,文档上依然存在这东西就证明肯定有存在...

  • 微信小程序____WXS

    引言 WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 注意 w...

  • 微信小程序 - wxs

    一、wxs文件是干哈用的? 在wxs文件中写一些方法,通过module.exports暴露出去,这样就可以被别的w...

  • 微信小程序 Wxs篇

    WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 【注意】 WX...

  • 在WXS中遍历对象

    微信小程序提供了WXS语言,允许我们在WXML中执行简单的脚本,这在渲染时加工数据很有用,但是WXS没有JS功能强...

  • 微信小程序开发框架

    微信小程序开发框架 wxl(页面内容) wxss(页面样式) wxs(filter处理,展示页面内容) JavaS...

  • 微信小程序视图层处理增强之WXS

    随着微信开发者工具v1.0.0的释出,beta已久的微信小程序视图层的新功能特性WXS(WeiXin Script...

  • 2019-02-18

    小程序wxs的应用 一,什么是wxs, WXS(WeiXin ...

网友评论

      本文标题:微信小程序wxs

      本文链接:https://www.haomeiwen.com/subject/xuhzfqtx.html