微信小程序中wxs文件的一些妙用分享
前言
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í)(拖拽、上下滑動(dòng)、左右側(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上下文??梢圆檎翼撁嫠性夭⒃O(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)傳參;
- !?。allMethod不支持傳回調(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁面效果(類似360默認(rèn)頁面滾動(dòng)切換效果)
這篇文章主要介紹了js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁面效果,類似360默認(rèn)頁面滾動(dòng)切換效果.涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-01-01JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽庫實(shí)例
這篇文章主要介紹了JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽庫,以實(shí)例形式分析了JavaScript設(shè)置水平、垂直拖拽及限制拖拽范圍的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09深入探討JavaScript、JQuery屏蔽網(wǎng)頁鼠標(biāo)右鍵菜單及禁止選擇復(fù)制
這篇文章主要介紹了深入探討JavaScript、JQuery屏蔽網(wǎng)頁鼠標(biāo)右鍵菜單及禁止選擇復(fù)制,需要的朋友可以參考下2014-06-06JavaScript在IE中“意外地調(diào)用了方法或?qū)傩栽L問”
FF是正常的,IE報(bào)“意外地調(diào)用了方法或?qū)傩栽L問”。2008-11-11如何利用JavaScript讀取excel文件并繪制echarts圖形
這篇文章主要介紹了如何利用JavaScript讀取excel文件并繪制echarts圖形,文章通過excel財(cái)務(wù)報(bào)表,并且需要根據(jù)這張excel表繪制成各種echarts圖形,需要了解更多詳情的小伙伴可以參考一下文章內(nèi)內(nèi)容2022-05-05深入理解 TypeScript Reflect Metadata
這篇文章主要介紹了深入理解 TypeScript Reflect Metadata,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12chrome瀏覽器當(dāng)表單自動(dòng)填充時(shí)如何去除瀏覽器自動(dòng)添加的默認(rèn)樣式
很多朋友都遇到這個(gè)問題:當(dāng)使用chrome瀏覽器表單自動(dòng)填充時(shí)都會自動(dòng)添加默認(rèn)的樣式,該如何去除默認(rèn)樣式呢?看看小編是怎么去除的,需要的朋友一起學(xué)習(xí)吧2015-10-10