webstorm 格式化代码报错_小程序，如果你会这两种方式，代码就简洁了，重复代码也少了...

接着上篇 小程序，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两个文件。

其次，这里分两步：

1. 把index.wxml里对应页面代码剪切到 list-temp.wxml里，必须用template标签包裹，并且写好name属性，名称为listtemp,后面index.wxml里会用到。
2. 在index.wxml里使用 import 标签把 list-temp.wxml 引入，并且使用template标签替换刚才剪切的代码，templ 必须使用 "is" 指定是哪个模板页面，否则页面报错，数据通过template的 “data” 属性传递到模板里。

index.wxml页面替换的部分：

使用模板后的inex.wxml页面

最后，把index.wxss中对应的样式剪切到list-temp.wxss文件中，再使用 @import 引入 list-temp.wxss文件。

@import "../../template/list-temp.wxss"

看看效果,效果还是和原来一样的。

总结：

本文讲解了js、wxml、wxsss三种文件的模板化，这样减少了累赘代码，大大简洁了我们的页面。

记住 require()函数、import标签、@import引入样式。

谢谢大家浏览，喜欢的点个赞或者关注下，写这个文章中不易啊，以前看别人技术博客，觉得几分钟就看完，殊不知别人花了多少时间写。

我是只说代码的大饼，不要只是写代码时想起我，饿了也可以想起我。