The official explanation
-
WXS and JavaScript is a different language, have their own syntax, and JavaScript are not consistent.
-
WXS operating environment and other JavaScript code is isolated, WXS can not call a function defined in other JavaScript files, nor to call the API applet provides.
-
WXS can not function as an event callback component.
-
Due to differences in the operating environment, in WXS iOS device applet in the JavaScript code faster than 2 to 20 times . No difference between the two operating efficiency on android devices
Instructions
-
wxs wxml code can be written in the file <wxs> in the tag, or the file name suffix .wxs. (
ps: 一般建议写在 .wxs 文件中) -
Each file or .wxs <wxs> tag is a separate module, when we want to introduce them outside the private variable or function is required to achieve module.exports.
Sample code:
// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
-
Then referenced in wxml page
<wxs src="./tools.wxs" module="tools" />
<view>{{tools.FOO}}</view>
<view>{{tools.bar(5)}}</view>
<view>{{tools.msg}}</view>
-
Page will be displayed
Precautions
wxs compared with js there are still many restrictions.
such as:
-
It does not support es6 syntax , so deconstruction, we usually a function of the arrow used in the encoding process ... are not supported.
-
Defined variables can only be used to write on behalf of a global var or not. Because let, cons of a es6
-
Data type wxs syntax is no symbol null undefined are. Other data types are supported.
Specific have:
-
number: Value -
string: String -
boolean:Boolean value -
object: Object -
function:function -
array: Array -
date:date -
regexp: Regular
判断wxs中的数据类型We know the type of data may be determined typeof && Object.prototype.toString.call in the js ()
typeof undefined === 'undefined' // true
typeof true === 'bollean' // true
typeof 25 === 'number' // true
typeof 'shit' === 'string' // true
typeof { name: 'mars'} === 'object' // true
// 以及 es6中的Symbol
typeof Symbol() === 'symbol' // true
typeof function a() {} === 'function' // true
6 or more types of data corresponding thereto has the same name string. But mull which is no longer
typeof null === 'object' // trueWe know typeof will recognize when it comes to Array Date Object ...
objectAt this point need
Object.prototype.toString.call（）
But the properties wxs
constructorwill return the corresponding data type stringFigure:
More details stamp
-
-
<wxs>Module can only be accessed in WXML file defines module. Use<include>or<import>when<wxs>the module is not introduced into the corresponding WXML file. -
<template>Label, only the definition of<template>the WXML defined in the file<wxs>module.
scenes to be used
Because the double parentheses wxml data binding expressions of support is not perfect, so we can use wxs to enhance the expression of wxml. That is, you can write functions in wxml in.
The next scene say two examples of practical application
-
Display weather data show
// index.wxs
// 湿度判断
humidity: function(h) {
if (h) {
return '湿度 ' + h + '%'
}
return h
},
// 风的等级判断
windLevel: function(level) {
if (level === '1-2') {
return '微风'
} else {
return level + '级'
}
},
// 风的类型
wind: function(code, level) {
if (!code) {
return '无风'
}
if (level) {
level = level.toString().split('-')
level = level[level.length - 1]
return code + ' ' + level + '级'
}
return code
},
-
因为后台返回给我们的数据数组是时间戳, 但是要处理成我们想要的时间格式，比如：2019-07-17
一般处理是遍历数组然后对数组中的每个时间戳对象调用时间转化函数。
但是在wxs 中 我们的转换函数可以这么写
// utils.wxs
var formatTime = function (date) {
var date = getDate(date)
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return ([year, month, day].map(formatNumber).join("-") + " " + [hour, minute].map(formatNumber).join(':'));
}
var formatNumber = function (n) {
n = n.toString();
return n[1] ? n : "0" + n;
}
module.exports = {
formatTime: formatTime,
}
// pages/index/index.html
<wxs src='./utils.wxs' module="utils">
<block wx:for="{{list}}" wx:key="index"></block>
<view >{{utils.formateTime(item.time)}}</view>
最终实现效果如下：
【完】
【作者简介】 Mars 芦苇科技web前端开发工程师 喜欢 看电影 ，撸铁 还有学习。擅长 微信小程序开发， 系统管理后台。访问 www.talkmnoney.cn了解更多。
作者主页：