公式の説明
-
WXSとJavaScriptは、異なる言語である、独自の構文を持っており、JavaScriptが一貫していません。
-
WXSの動作環境や他のJavaScriptコードが孤立している、WXSは、他のJavaScriptファイルで定義された関数を呼び出すことはできません、またアプレットが提供するAPIを呼び出します。
-
WXSは、イベントコールバックコンポーネントとして機能することはできません。
-
原因よりも速くJavaScriptコードでWXS iOSデバイスアプレットで動作環境の違い、の2〜20倍。Androidデバイス上の2つの動作効率の間には差がありません
使用
-
WXS wxmlコードは、ファイルに書き込むことができ、<WXS> タグ、またはファイル名の接尾辞.wxsに。（
ps: 一般建议写在 .wxs 文件中） -
各ファイルまたは.wxs <WXS> 私たちはプライベート変数や関数がmodule.exportsはを達成するために必要とされる外にそれらを導入したい場合、タグは、独立したモジュールです。
サンプルコード：
//は/pages/tools.wxs するvar FOO = "tools.wxsから'こんにちは世界'"。VaRのバー= 関数（D）{ 戻りD。} モジュール。輸出= { FOO：FOO、バー：バー、}。モジュール。輸出。MSG = "いくつかのMSG"。
-
その後wxmlページで参照
< WXS SRC = "./tools.wxs" モジュール= "ツール" />
< ビュー> {{tools.FOO}} </ 表示>
< ビュー> {{tools.bar（5）}} </ ビュー>
< ビュー> {{tools.msg}} </ ビュー>
-
ページが表示されます。
注意事項
JSと比較WXSは、まだ多くの制限があります。
例えば：
-
それはES6構文をサポートしていませんので、解体は、我々は通常、符号化プロセスで使用される矢印の機能は...サポートされていません。
-
定義された変数は、グローバルVARかに代わって書くのに使用することができます。ES6のLET、短所ので、
-
データ型WXSの構文noです未定義のシンボルのヌルされています。他のデータ型がサポートされています。
特定の持っています：
-
number：値 -
string：文字列 -
boolean：ブール値 -
object：オブジェクト -
function：機能 -
array：配列 -
date：日 -
regexp：定期的
判断wxs中的数据类型我々は）データのタイプは、（JSでtypeof演算&& Object.prototype.toString.callを決定することができる知っています
typeofを未定義=== '未定義' //真
のtypeof 真 === 'bollean' //真
のtypeof 25 === '数' //真
のtypeof 'たわごと' === '文字列' //真
typeof演算{ 名：'火星'} === 'オブジェクト' //真//以及ES6中的シンボルtypeof演算記号（） === 'シンボル' //真typeof演算の関数（）{} === '関数' //真
それに対応するデータの6種類以上の同じ名前の文字列を有しています。しかし、もはやこれは熟考しません
typeofをヌル=== 「オブジェクト」 //真私たちは、それが配列のDateオブジェクトに来るときtypeof演算が認識されます知っています...
objectこの時点で、必要に
Object.prototype.toString.call（）
しかし、プロパティのWXSは、
constructor対応するデータ型の文字列を返します。図：
詳細は、スタンプ
-
-
<wxs>のみWXMLファイルにアクセスすることができるモジュールは、モジュールを定義します。使用し<include>たり<import>する場合<wxs>、モジュールが対応するWXMLファイルに導入されていません。 -
<template>ラベル、唯一の定義<template>ファイルで定義されてWXML<wxs>モジュール。
利用シナリオ
ダブル括弧wxmlデータは、支持体の表現を結合するので完璧ではありませんので、我々はwxmlの発現を増強するためにWXSを使用することができます。つまり、あなたがでwxmlで関数を記述することができます。
次のシーンは、実用的なアプリケーションの2つの例を言います
-
表示気象データショー
// 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了解更多。
作者主页：