2025年05月22日
接着上篇 小程序，wxml页面里如何写JS代码？WXS如何模块化？，这篇我们来说说如何让小程序代码更简洁。
因为我看到有的人写的小程序代码只是建page,page中的.wxml 和 .js 文件有很多是重复代码。
所以这里我们来说下如何剔除.wxml 、.js文件中重复的代码，让代码复用率更高。
一.JS文件。
例如时间格式方法，很多页面可能显示时间，但是小程序中都要格式化，因为new Date()得到的时间是这样的：Thu May 14 2020 20:05:24 GMT+0800。然而我们要的是 2020-05-14 20:07 或者 2020/05/14 20:07。这样我们才是我所能接受的。
首先，我们直接用小程序创建时自建的utils文件夹下的 utils.js文件，里面有格式化时间的公用方法。
其次，在海鲜文件夹下的seaclass.js里通过 require()函数引入 utils.js文件，并且在onload()周期函数里使用utils.formatTime()格式化时间。
onLoad: function (options) {
var dt = new Date();
this.setData({
nowtime:utils.formatTime(dt)
})
},
必须用相对路径。还有就是为什么是三个“..”，因为seaclass.js要网上三层才到根目录下，而utils文件夹是在根 目录下的。
最后，在海鲜页面里显示格式化好的时间：
二.wxml页面文件:
例如，项目里很多项目会使用到如下图中的显示，那么我们该如何做呢？有两种方法，
第一种就是wxml文件模块化。
第二种就是组件。组件我们以后再说。这里介绍第一种方式，wxml文件模块化。
首先，我们先在根目录下新建文件夹template，并且新建 list-temp.wxml、list-temp.wxss两个文件。
其次，这里分两步：
<import src="../../template/list-temp.wxml"/>
index.wxml页面替换的部分：
最后，把index.wxss中对应的样式剪切到list-temp.wxss文件中，再使用 @import 引入 list-temp.wxss文件。
@import "../../template/list-temp.wxss"
看看效果,效果还是和原来一样的。
总结：
本文讲解了js、wxml、wxsss三种文件的模板化，这样减少了累赘代码，大大简洁了我们的页面。
记住 require()函数、import标签、@import引入样式。
谢谢大家浏览，喜欢的点个赞或者关注下，写这个文章中不易啊，以前看别人技术博客，觉得几分钟就看完，殊不知别人花了多少时间写。
我是只说代码的大饼，不要只是写代码时想起我，饿了也可以想起我。