微信小程序入門:模塊化

前言:

之前幾篇文章都已經把小程序的基本結構,每個文件里面的結構以及每個文件中的基本配置和操作,其實后面就是優化和學習了,我們一起學習吧,我也是新手

今天我們來學習下小程序的模塊化,首先看看官方給出的模板:

模塊化

我們可以將一些公共的代碼抽離成為一個單獨的 js 文件,作為一個模塊。模塊只有通過module.exports或者exports才能對外暴露接口。

需要注意的是:

exports是module.exports的一個引用,因此在模塊里邊隨意更改exports的指向會造成未知的錯誤。所以我們更推薦開發者采用module.exports來暴露模塊接口,除非你已經清晰知道這兩者的關系。

小程序目前不支持直接引入node_modules, 開發者需要使用到node_modules時候建議拷貝出相關的代碼到小程序的目錄中。

我們來看看小程序創建時候自帶的utils.js文件中使用:

這是一個格式化日期的工具模塊:

根據js文件中的方法 new Date()獲取系統的當前時間 傳遞給formatTime,根據year month day格式化時間的格式輸出,代碼如下:

utils.js代碼:注意紅標處,這里必須吧這個方法暴露出去,其他的js文件才能使用require獲取方法


log.js代碼:第一個標簽 表示引入了Utils.js里面的方法: 第二個是直接使用在utils中暴露出來的formatTime方法格式化時間。

使用時候:


上面我們已經介紹了一個格式化時間的模板,最近但是最近需要用電話號碼注冊,需要一個倒計時的button,所以就寫了一個:


首先我們做倒計時時候必須是使用遞歸的思想去做,還要判斷時間是否為0 為0之后需要改變button的數據

注意這里的參數是this,之前的文章也提到了this的作用域,到了utils.js中自然是無法使用的了,而且在使用

this的時候必須與之前Page()函數中data的數據的key是一樣的。

最需要注意的就是一定要記得把方法暴露出來:module.exports

在使用的時候一定要使用?require引入。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Node.js是目前非常火熱的技術,但是它的誕生經歷卻很奇特。 眾所周知,在Netscape設計出JavaScri...
    w_zhuan閱讀 3,639評論 2 41
  • Node.js是目前非常火熱的技術,但是它的誕生經歷卻很奇特。 眾所周知,在Netscape設計出JavaScri...
    Myselfyan閱讀 4,089評論 2 58
  • 前不久的一天,朗朗飽餐一頓后一臉的知足,但當我把他放回床上時,表情瞬間變成皺眉嘟嘴,仿佛在說,怎么這么快就把我放下...
    宣如茗閱讀 183評論 0 0
  • 無くした日々にさよなら - スネオヘアー 動漫《在下坂本,有何貴干》片尾曲 昨天和今天的現實 漸行漸遠的瞬間 用雙...
    咖啡與落葉閱讀 214評論 0 0
  • 在每一個時間節點一點點推進的過程中,總會面對很多迎接與舍棄,在這一時刻你認為是無與倫比重要的,很可能在轉念之間就決...
    溫小小閱讀 240評論 0 0