微信小程序-（js和wxml中）utils公共方法使用

通过开发者工具快速创建了一个 QuickStart 项目时，会生成一个utils/util.js文件。

util.js

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}const formatNumber = n => {n = n.toString()return n[1] ? n : '0' + n
}const formatDate = (time)=>{ // 每日5:30更新日期查询let now = new Date()let year = now.getFullYear(); //得到年份let month = now.getMonth();//得到月份let date = now.getDate();//得到日期month = month + 1if (month < 10) month = "0" + monthif (date < 10) date = "0" + datesearchDate = year + '-'+ month + '-'+ datereturn searchDate
}const formatEnMonth = (month) => {month = month.toString()let en_month="Jan"let month_arr = ['01','02','03','04','05','06','07','08','09','10','11','12']  let en_mon_arr = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Spt","Oct","Nov","Dec"];  //英文月份for(var i = 0;i < month_arr.length;i ++){      //循环匹配if(month == month_arr[i]){en_month= en_mon_arr[i]}}return en_month
}
module.exports = {formatTime: formatTime,formatEnMonth: formatEnMonth,formatDate: formatDate,
}

我们可以将一些公共的代码抽离成为一个单独的 js (util.js)文件，作为一个模块，通过 module.exports 或者 exports 对外暴露。
在使用过程中，会发现它里面的方法只能在js里调用，没法直接在wxml中使用，这时候可以用 WXS来模拟过滤器。

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面结构。

wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
wxs 函数不能作为组件的事件回调。
由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

wxs的使用方法：

1.在utils文件夹中新建一个文件，比如：utils.wxs。

// 作用于wxml中的函数，不支持ES6的语法
var formatAir = function(data){switch (data) {case '优':return 'level1'case '良':return 'level2'case '轻度污染':return 'level3'case '中度污染':return 'level4'case '重度污染':return 'level5'case '严重污染':return 'level6'default:return '-'}
}module.exports = {formatAir: formatAir,
}

wxml页面中：

<wxs src="../../utils/utils.wxs" module ="utils"/>
<view class="aqiDetails"><view class="aqiText">空气质量指数</view><view class="aqi">{{nowAir.aqi}}</view><view class="category"><!-- 根据空气质量指数类型添加样式 --><text class="nowAirTxt {{utils.formatAir(nowAir.category)}}">{{nowAir.category}}</text></view>
</view>

.wxss

/* 工具类 */
.level1{background-color: #309434;
}
.level2{background-color: #fbc011;
}
.level3{background-color: #ff9800;
}
.level4{background-color: #ff4032d1;
}
.level5{background-color: #9c27b0;
}
.level6{background-color: #a73208;
}

微信小程序-（js和wxml中）utils公共方法使用相关推荐

微信小程序怎么在wxml中插入多个图片_兰州小程序开发流程费用推荐品牌_便企网...
兰州小程序开发流程费用推荐品牌,有人说既然开发文档这么详细那直接跟着开发文档来学习就可以轻松入门,你有这份自信是非常好的,也希望你有很强的学习能力,但对于很多的普通人新手来说(当然也包括我),做作品的 ...
微信小程序怎么在wxml中插入多个图片_白云工商带你10分钟入门微信小程序开发...
10分钟入门微信小程序开发程序开发难吗? No!来白云工商带你10分钟入门微信小程序开发! 英语不好能学好程序开发吗? 当然能,程序开发常见的也就那几个单词,只要热爱,非常简单! 欣赏首先,来欣赏 ...
微信小程序怎么在wxml中插入多个图片_闲聊微信小程序开发框架(二)
在前面一篇文章中我们介绍了小程序开发框架的几个组成部分,今天就让我们了解一下小程序开发框架的底层架构是如何实现的. 小程序的开发框架成为MINA框架,通过上面的框架图我们可以看到三个部分.首先是Vie ...
微信小程序怎么在wxml中插入多个图片_22. 教你零基础搭建小程序：小程序的常见组件（2）- image
大家好~今天讲小程序的常见组件-- image 图片标签小程序中的图片标签相当于 web 中的图片标签 ,但也存在着不同之处. 例如:小程序在后期要打包上线时,对图片的大小是有要求的,图片要< ...
微信小程序js过度动画
微信小程序js过度动画如有错误还请大神指教.如果觉得不错可以关注我了解更多. 一,我们先来看看效果吧. 二,我们用的是js的逐帧动画,css也可有相同的效果,我们这里用js // pages/arr ...
微信小程序资料集（中）
**12月1日小程序Demo集合** [微信小程序Demo:金融理财计算器](简书) [微信小程序Demo:支付宝+微信二维码收款小程序](简书) [上滑导航吸顶效果](简书) [微信小程序Demo: ...
微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
微信小程序JS字符串操作方法汇总
微信小程序JS字符串操作方法汇总 JS对字符串进行切割截取 1.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子: str="jpg|bmp|gif|ico| ...
微信小程序JS字符串操作方法汇总，包含切割截取split，合并字符串join，连接字符串concat，返回指定字符串charAt，提取字符串substring等
微信小程序JS字符串操作方法汇总 JS对字符串进行切割截取 1.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子: str="jpg|bmp|gif|ico| ...
微信小程序：计算wxml里盒子的宽、高.....
微信小程序:计算wxml里盒子的宽.高等信息由于某些标签需要动态设置页面的高度,此时需要计算每个盒子的高度(由于盒子是一些东西撑开的,无法直接得到高度),根据盒子数量及边距距离设置页面高度得到的数 ...

微信小程序-（js和wxml中）utils公共方法使用

wxs的使用方法：

微信小程序-（js和wxml中）utils公共方法使用相关推荐

最新文章

热门文章