這篇我們來說說如何讓小程序代碼更簡潔。
因為我看到有的人寫的小程序代碼只是建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兩個文件。
其次，這里分兩步：
- 把index.wxml里對應頁面代碼剪切到 list-temp.wxml里，必須用template標簽包裹，并且寫好name屬性，名稱為listtemp,后面index.wxml里會用到。
- 在index.wxml里使用 import 標簽把 list-temp.wxml 引入，并且使用template標簽替換剛才剪切的代碼，templ 必須使用 "is" 指定是哪個模板頁面，否則頁面報錯，數據通過template的 “data” 屬性傳遞到模板里。
<import src="../../template/list-temp.wxml"/>
index.wxml頁面替換的部分：
使用模板后的inex.wxml頁面
最后，把index.wxss中對應的樣式剪切到list-temp.wxss文件中，再使用 @import 引入 list-temp.wxss文件。
@import "../../template/list-temp.wxss"
看看效果,效果還是和原來一樣的。
總結：
本文講解了js、wxml、wxsss三種文件的模板化，這樣減少了累贅代碼，大大簡潔了我們的頁面。
記住 require()函數、import標簽、@import引入樣式。
謝謝大家瀏覽，喜歡的點個贊或者關注下，寫這個文章中不易啊，以前看別人技術博客，覺得幾分鐘就看完，殊不知別人花了多少時間寫。
我是只說代碼的大餅，不要只是寫代碼時想起我，餓了也可以想起我。
