专栏首页喵君手记微信小程序WXS特征及适用场景

微信小程序WXS特征及适用场景

记一下小程序的wxs相关

WXS(WeiXin Script)是微信创造的一套脚本语言,它的官方说法是:“WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致”。

WXS具备如下特征:

  • 是可以在视图层(webview)中运行的 JS
  • 无法修改业务数据,仅能设置当前组件的class和style
  • 是被限制过的 JavaScript,可以进行一些简单的逻辑运算
  • 可以监听 touch 事件,处理滚动、拖动交互

适用场景:

  • 用户交互频繁、仅需改动组件样式(比如布局位置),无需改动数据内容的场景,比如侧滑菜单、索引列表、滚动渐变等
  • 纯粹的逻辑计算,比如文本、日期格式化,通过 WXS 可以模拟实现 Vue 框架的过滤器, 如下是一个通过 wxs 便捷实现首字母大写的示例
html
<wxs module="m1">
  // 首字母大写
  var capitalize = function(value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
  module.exports = {
    capitalize: capitalize
  }
</wxs>
<view class="content">
  <view class="text-area">
    <!-- title 为当前页面 data 中定义的初始数据 -->
    <text class="title">{{m1.capitalize(title)}}</text>
  </view>
</view>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序IntersectionObserver用法

    做小程序课程详情页时需要在页面向下滚动的时候显示吸顶锚点菜单,记一下IntersectionObserver的用法

    薛定喵君
  • 付费广告的计费模式

    薛定喵君
  • 小程序云函数访问第三方服务器错误解决

    1.报以下错误大概率是因为got版本问题 我是直接npm install的,got版本是10.x

    薛定喵君
  • bootstrap 选择日期和时间

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • 微信小程序在腾讯地图上选择定位

    微信小程序地图上选择位置 参考这位大神的,确实有效果。 做了一个考勤的小程序,当然,也是整体拿的https://github.com/tommenx/wxs...

    hotqin888
  • 第33天:封装自己的class类

    半指温柔乐
  • bootstrap模态框之加载页面至modal-boby

    思路:使用$("#reserveForm").html(result); result为Ajax请求controller所返回的页面

    week
  • [个人网站搭建]·Django增加评论功能(Python3)

    个人主页--> https://xiaosongshine.github.io/

    小宋是呢
  • Angular ng-class的小细节

     在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),...

    javascript.shop
  • ztree实现左边动态生成树,右边为具体信息功能

    祈澈菇凉

扫码关注云+社区

领取腾讯云代金券