如何在wxml中直接寫js代碼(wxs)
這篇文章主要介紹了如何在wxml中直接寫js代碼(wxs),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
我們在h5開發(fā)中,很多時候要在html中寫到j(luò)s代碼,這個很容易實(shí)現(xiàn)。但是在微信小程序開發(fā)中,是不能直接在wxml中寫js代碼的,因此就有了wxs。在wxml中用wxs代碼,有以下幾種方式(在小程序文檔中寫的很清楚,我只不過是總結(jié)下)
第一種:直接在wxml文件中使用<wxs>標(biāo)簽
<wxs module="dateModule"> var now = getDate(); module.exports = { date: now } </wxs> <view>當(dāng)前時間:{{dateModule.date}}</view>
第二種:類似于js,寫一外部wxs文件,然后wxml中引用。對于這個,我直接引用官方文檔中的例子
// pages/dateTool.wxs var now = getDate(); var format = function(lastDate) { var date = getDate(lastDate); return date.toLocaleString(); } module.exports = { date: now, format: format }
<!-- page/index/index.wxml --> <wxs src="../dateTool.wxs" module="dateTool"></wxs> <view>{{dateTool.date}}</view>
第三種,在一個wxs文件中引用另一個wxs文件
// /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";
// /pages/logic.wxs var tools = require("./tools.wxs"); console.log(tools.FOO); console.log(tools.bar("logic.wxs")); console.log(tools.msg);
<!-- /page/index/index.wxml --> <wxs src="./../logic.wxs" module="logic" />
wxs語法和js很像,但是一定要注意,在外部寫完wxs文件后要給它的module對象中的exports屬性設(shè)置值
module.exports = { Key1:value1, key2: value2, };
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)可點(diǎn)擊展開與關(guān)閉的左側(cè)廣告代碼
這篇文章主要介紹了JS實(shí)現(xiàn)可點(diǎn)擊展開與關(guān)閉的左側(cè)廣告代碼,通過鼠標(biāo)onClick事件調(diào)用自定義javascript函數(shù)實(shí)現(xiàn)頁面元素及樣式的顯示與隱藏效果,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09JS動態(tài)添加Table的TR,TD實(shí)現(xiàn)方法
這篇文章主要介紹了JS動態(tài)添加Table的TR,TD實(shí)現(xiàn)方法,涉及js針對Table中TR、TD節(jié)點(diǎn)的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01JavaScript實(shí)現(xiàn)多態(tài)和繼承的封裝操作示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)多態(tài)和繼承的封裝操作,結(jié)合實(shí)例形式分析了javascript中多態(tài)與繼承的實(shí)現(xiàn)及封裝相關(guān)操作技巧,需要的朋友可以參考下2018-08-08JavaScript引用類型Date常見用法實(shí)例分析
這篇文章主要介紹了JavaScript引用類型Date常見用法,結(jié)合實(shí)例形式分析了引用類型Date基本創(chuàng)建、參數(shù)使用及相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-08-08JavaScript實(shí)現(xiàn)動態(tài)表單生成
這篇文章主要來和大家一起深入探討如何使用JavaScript實(shí)現(xiàn)一個動態(tài)表單生成器,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2024-01-01