10-微信小程序 WXS

WXS

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

注意:

  1. wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
  2. wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
  3. wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
  4. wxs 函数不能作为组件的事件回调。
  5. 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

以下是一些使用 WXS 的简单示例:

页面渲染

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

页面输出:

hello world

数据处理

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})
<!--wxml-->
<!-- 下面的 getMax 函数,接受一个数组,且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;
</wxs>

<!-- 调用 wxs 里面的 getMax 函数,参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>
页面输出:

5

原文地址:https://www.cnblogs.com/gavinhuang/p/11957506.html

时间: 2024-10-13 05:24:20

10-微信小程序 WXS的相关文章

微信小程序 WXS实现json数据需要做过滤转义(filter)

前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 vue 中的 | 方法进行快速的过滤,大都是用数据遍历洗数据来实现的,说实话,很麻烦,即使提取了公共方法那也麻烦,总之要洗数据就麻烦 WXS 为何物 在上代码之前先简单的介绍一下 WXS 是什么,以及和 javascript 有什么区别,虽然官方文档中都有,但我认为博客的存在意义就是尽量减少看官们的页

微信小程序wxs如何使用

新建一个.wxs文件 <!-- 引入.wxs文件 src为相对路径,module指定当前模块的名称 --> <wxs module="filter" src="./func.wxs"></wxs> <view>{{filter.xxx(item)}}</view> 原文地址:https://www.cnblogs.com/wang-xx/p/11753711.html

微信小程序视图层WXS_小程序WXS模块

微信小程序视图层WXS_小程序WXS模块 微信小程序的WXS 代码可以编写在 小程序wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内. 模块 每一个微信小程序的 .wxs 文件和 <wxs> 标签都是一个单独的模块. 每个模块都有自己独立的作用域.即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见. 一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现. .wxs 文件 在微信开发者工具里面,右键可以直接创建

C# 获取微信小程序access_token

1 /// <summary> 2 /// 获取access_token 3 /// </summary> 4 /// <returns></returns> 5 public static string GetAccessToken() 6 { 7 string token = string.Empty; 8 try 9 { 10 # 微信小程序接口 11 string wechatapi = ConfigurationManager.AppSetting

微信小程序详细图文教程-10分钟完成微信小程序开发部署发布(3元获取腾讯云服务器带小程序支持系统)

很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现的是基础功能.但是,可以给学习者很便捷的体验和很好的启发. 不过,随着微信平台和云服务的发展,真担心,程序猿会失业! 目录 一.微信小程序申请 二.服务器设置(申请.部署.域名) 1.申请服务器 2.部署服务器 3.域名申请和配置 三.小程序发布 1.下载DEMO 2.下载开发工具并安装 3.配置参

阿拉丁|微信小程序10月榜单出炉,生活服务类小程序回归主体

10月31日,阿拉丁小程序数据统计平台发布了2018年10月微信小程度报告,同时公布了10月份的TOP100榜单."同程艺龙酒店机票火车"小程序继续有着稳定的表现,稳坐10月榜单的"头把交椅". 而美团外卖和拼多多表现也很抢眼,分别排在第二第三名.榜单前三名现在已由小游戏转变为餐饮和电商类.由此可见,消费者已经养成了使用小程序来解决日常生活需求的习惯.也更贴合张小龙当时提出的"无需下载,即用即走". 其实小游戏此类大多昙花一现,且多是为了消磨时间

微信小程序开发对传统企业的10大好处

微信小程序的上线,大家更多讨论的话题是围绕微信小程序在互联网领域的影响,但是随着传统企业加入互联网的步伐当中,互联网的每一次大大小小的变革都会涉及到传统领域,那么作为传统企业的红利到底在哪儿呢?微信小程序开发对传统企业有什么影响?传统行业应该如何搭乘微信小程序的顺风车呢? 下面总结微信小程序开发对传统企业的10大好处 提供一个新的开发平台 微信小程序可以打通微信应用号,升级公众号的功能,并且微信小程序同时集成了APP store的功能,特别是对于传统企业来说APP的开成本较高,而且使用频率也比较

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

小程序简介 小程序是一种不需要下载安装即可使用的快速应用,它实现了应用“触手可及”的操作:用户扫一扫或搜一下即可打开应用,完全不需要安装,因此小程序不仅可提高的用户的应用体验,也方便应用的传扩散. 本文带大家快速入门小程开发,了解从环境搭建到开发出一个简单hello world程序,从而上手小程序开发,让你快速成功小程序开发人员.之后,想开发什么样的小程序,就可以自己研究和努力了. 下面,是循序渐经的步骤: ?1.注册小程序 在开发之前,当然需要先注册一个小程序账号. 进入“微信公众平台”进行注

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

9小时搞定微信小程序开发

第01讲-小程序的背景 第02.第2讲-什么是小程序 第03讲-小程序生态及应用前景 第04讲-小程序开发前的准备 第05讲-安装微信开发者工具 第06讲-小程序代码结构简介 第07讲-小程序配置文件介绍 第08讲-开发者工具详解(一) 第09讲-开发者工具详解(二) 第10讲-创建第一个小程序 第11讲-开发框架组成介绍 第12讲-WXML之语法 第13讲-WXML特性之数据绑定 第14讲-WXML特性之列表渲染 第15讲-WXML特性之条件渲染 第16讲-WXML特性之模板及引用 第17讲-