微信小程序中wxs文件的妙用

這是我參與8月更文挑戰的第6天，活動詳情查看：8月更文挑戰

wxs文件是小程序中的邏輯文件，它和wxml結合使用。
不一樣於js， wxs能夠直接做用到視圖層，而不須要進行視圖層和邏輯層的setData數據交互；
由於這個特性，wxs很是適合應用於優化小程序的頻繁交互操做中；

應用

過濾器

在IOS環境中wxs的運行速度要遠高於js，在android中二者表現至關。
使用wxs做爲過濾器也能夠必定幅度提高性能；讓咱們來看一個過濾器來了解其語法。

wxs文件:

var toDecimal2 = function (x) {
  var f = parseFloat(x);
  if (isNaN(f)) {
    return '0.00'
  }
  var f = Math.round(x * 100) / 100;
  var s = f.toString();
  var rs = s.indexOf('.');
  if (rs < 0) {
    rs = s.length;
    s += '.';
  }
  while (s.length <= rs + 2) {
    s += '0';
  }
  return s;
}
module.exports = toDecimal2
複製代碼

上面的代碼實現了數字保留兩位小數的功能。

wxml文件：

<wxs src="./filter.wxs" module="filter"></wxs>
<text>{{filter(1)}}</text>
複製代碼

基本語法：在視圖文件中經過wxs標籤引入，module值是自定義命名，以後在wxml中能夠經過filter調用方法

上面的代碼展現了 wxs的運行邏輯，讓咱們能夠像函數同樣調用wxs中的方法；
下面再看一下wxs針對wxml頁面事件中的表現。

拖拽

使用交互時（拖拽、上下滑動、左右側滑等）若是依靠js邏輯層，會須要大量、頻繁的數據通訊。卡頓是不可避免的；
使用wxs文件替代交互，不須要頻繁使用setData致使實時大量的數據通訊,從而節省性能。

下面展現一個拖拽例子

wxs文件：

function touchstart(event) {
  var touch = event.touches[0] || event.changedTouches[0]
  startX = touch.pageX
  startY = touch.pageY
}
複製代碼

事件參數event和js中的事件event內容中touches和changedTouches屬性一致

function touchmove(event, ins) {
  var touch = event.touches[0] || event.changedTouches[0]
  ins.selectComponent('.div').setStyle({
    left: startX - touch.pageX + 'px',
    top: startY - touch.pageY  + 'px'
  })
}
複製代碼

ins(第二個參數)爲觸發事件的視圖層wxml上下文。能夠查找頁面全部元素並設置style,class(足夠完成交互效果)

注意：在參數event中一樣有一個上下文實例instance；
event中的實例instance做用範圍是觸發事件的元素內，而事件的ins參數做用範圍是觸發事件的組件內。

module.exports = {
  touchstart: touchstart,
  touchmove: touchmove,
}
複製代碼

最後將方法拋出去，給wxml文件引用。

wxml文件

<wxs module="action" src="./movable.wxs"></wxs> 
<view class="div" bindtouchstart="{{action.touchstart}}" bindtouchmove="{{action.touchmove}}"></view>
複製代碼

上面的例子，解釋了事件的基本交互用法。

文件之中相互傳參

在事件交互中，少不了須要各個文件之中傳遞參數。 下面是比較經常使用的幾種

wxs傳參到js邏輯層

wxs文件中：

var dragStart = function (e, ins) {
	ins.callMethod('callback','sldkfj')
}
複製代碼

js文件中：

callback(e){
	console.log(e)
}
// sldkfj
複製代碼

使用callMethod方法，能夠執行js中的callback方法。也能夠實現傳參；

js邏輯層傳參到wxs文件

js文件中：

handler(e){
	this.setData({a:1})
}
複製代碼

wxml文件：

<wxs module="action" src="./movable.wxs"></wxs> 
<view change:prop="{{action.change}}" prop="{{a}}"></view>
複製代碼

wxs文件中：

change(newValue,oldValue){}
複製代碼

js文件中的參數傳遞到wxs須要經過wxml文件中轉。
js文件觸發handler事件，改變a的值以後，最新的a傳遞到wxml中。
wxml中prop改變會觸發wxs中的change事件。change中則會接收到最新prop值

wxs中獲取dataset(wxs中獲取wxml數據）

wxs中代碼

var dragStart = function (e) {
  var index = e.currentTarget.dataset.index;
  var index = e.instance.getDataset().index;
}
複製代碼

上面有提到e.instance是當前觸發事件的元素實例。
因此e.instance.getDataset()獲取的是當前觸發事件的dataset數據集

注意點

wxs和js爲不一樣的兩個腳本語言。可是語法和es5基本相同，確又不支持es6語法； getState 在多元素交互中很是實用，歡迎探索。

不知道是不是支持的語法能夠跳轉官網文檔； wxs運算符、語句、基礎類庫、數據類型

有疑問或者須要指正的錯誤，歡迎留言