前言

wxs文件是小程序中的邏輯文件，它和wxml結(jié)合使用。

不同于js， wxs可以直接作用到視圖層，而不需要進(jìn)行視圖層和邏輯層的setData數(shù)據(jù)交互；

因?yàn)檫@個(gè)特性，wxs非常適合應(yīng)用于優(yōu)化小程序的頻繁交互操作中；

應(yīng)用

過濾器

在IOS環(huán)境中wxs的運(yùn)行速度要遠(yuǎn)高于js，在android中兩者表現(xiàn)相當(dāng)。

使用wxs作為過濾器也可以一定幅度提升性能；讓我們來看一個(gè)過濾器來了解其語法。

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

上面的代碼實(shí)現(xiàn)了數(shù)字保留兩位小數(shù)的功能。

wxml文件：

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

基本語法：在視圖文件中通過wxs標(biāo)簽引入，module值是自定義命名，之后在wxml中可以通過filter調(diào)用方法

上面的代碼展示了 wxs的運(yùn)行邏輯，讓我們可以像函數(shù)一樣調(diào)用wxs中的方法；

下面再看一下wxs針對wxml頁面事件中的表現(xiàn)。

拖拽

使用交互時(shí)（拖拽、上下滑動、左右側(cè)滑等）如果依靠js邏輯層，會需要大量、頻繁的數(shù)據(jù)通信。卡頓是不可避免的；

使用wxs文件替代交互，不需要頻繁使用setData導(dǎo)致實(shí)時(shí)大量的數(shù)據(jù)通信,從而節(jié)省性能。

下面展示一個(gè)拖拽例子

wxs文件：

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

事件參數(shù)event和js中的事件event內(nèi)容中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(第二個(gè)參數(shù))為觸發(fā)事件的視圖層wxml上下文。可以查找頁面所有元素并設(shè)置style,class(足夠完成交互效果)

注意：在參數(shù)event中同樣有一個(gè)上下文實(shí)例instance；event中的實(shí)例instance作用范圍是觸發(fā)事件的元素內(nèi)，而事件的ins參數(shù)作用范圍是觸發(fā)事件的組件內(nèi)。

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>

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

文件之中相互傳參

在事件交互中，少不了需要各個(gè)文件之中傳遞參數(shù)。 下面是比較常用的幾種

wxs傳參到j(luò)s邏輯層

wxs文件中：

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

js文件中：

callback(e){
	console.log(e)
}
// sldkfj

使用callMethod方法，可以執(zhí)行js中的callback方法。也可以實(shí)現(xiàn)傳參；

• ?。?！callMethod不支持傳回調(diào)函數(shù)*

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文件中的參數(shù)傳遞到wxs需要通過wxml文件中轉(zhuǎn)。

js文件觸發(fā)handler事件，改變a的值之后，最新的a傳遞到wxml中。

wxml中prop改變會觸發(fā)wxs中的change事件。change中則會接收到最新prop值

wxs中獲取dataset(wxs中獲取wxml數(shù)據(jù)）

wxs中代碼

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

上面有提到e.instance是當(dāng)前觸發(fā)事件的元素實(shí)例。

所以e.instance.getDataset()獲取的是當(dāng)前觸發(fā)事件的dataset數(shù)據(jù)集

注意點(diǎn)

wxs和js為不同的兩個(gè)腳本語言。但是語法和es5基本相同，確又不支持es6語法； getState 在多元素交互中非常實(shí)用，歡迎探索。

不知道是否是支持的語法可以跳轉(zhuǎn)官網(wǎng)文檔； wxs運(yùn)算符、語句、基礎(chǔ)類庫、數(shù)據(jù)類型

總結(jié)

到此這篇關(guān)于微信小程序中wxs文件的一些妙用的文章就介紹到這了,更多相關(guān)微信小程序wxs文件妙用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論