微信小程式 模組兒化

2022-08-11 22:15:13 字數 1381 閱讀 2827

在我們做開發的過程中,會有一些公共方法、工具函式是在多個地方都會使用到的。那麼每次寫會很麻煩,而且不利於後面的維護。

因此就需要抽取出來作為乙個單獨的模組(可以簡單的理解為作為乙個單獨的js檔案)。

模組兒化開發涉及兩個部分,乙個是頁面,乙個是方法。

頁面就是一些公用的部分,或者非常相似的部分也可以抽離出來。比如產品的列表頁,可能在不同的地方會用到。wxml提供模板(template),可以在模板中定義**片段,然後在不同的地方呼叫。

定義模板

使用 name 屬性,作為模板的名字。然後在 template 內定義**片段。

}: } 

time: }

使用模板

is 屬性可以使用 mustache 語法,來動態決定具體需要渲染哪個模板。

模板擁有自己的作用域,只能使用 data 傳入的資料以及模板定義檔案中定義的 wxs 模組。

page(

}})

這部分一般稱為模組兒化管理。模組兒化管理的好處是:維護方便、大大減少**量,而且工具函式、功能函式寫一起便於後來者檢視,從而避免了多寫重複**。

模組兒小程式模組兒只有通過 exports 或者 module.exports 向外暴露介面才能使用。如下模組兒:

function sayhi() 

function saygoodbye()

// 第一種暴露方法

// exports.sayhi = sayhi;

// exports.saygoodbye = saygoodbye;

// 第二種暴露方法

module.exports =

使用模組兒
// 首先引入

// 第一種引入方法

// const common = require("../../utils/common.js")

// import common from '../../utils/common.js'

// 第二種引入方法

import from '../../utils/common.js'

// 使用

// 第一種

// 第一種

// common.sayhi();

// common.saygoodbye();

// 第二種

saygoodbye();

sayhi()

兩種方法各有優劣:

第一種方法,寫法複雜一下,但是能夠一眼看到所在檔案位置,修改和檢查的時候方便。

第二種方法,寫法簡單,無法一眼看到原始檔。

現在的編輯器一般都有跳轉到引用的原始檔的位置的功能。所以兩種寫法,按自己習慣來吧。

微信小程式(模組化)

1.模組化 我們可以將一些公共的 抽離成為乙個單獨的 js 檔案,作為乙個模組。模組只有通過 module.exports 或者 exports 才能對外暴露介面。需要注意的是 exports 是 module.exports 的乙個引用,因此在模組裡邊隨意更改 exports 的指向會造成未知的錯...

微信小程式 模組化

wxml js wxss三類都可以模組化!一 js類 可以將一些公共的 抽離成為乙個單獨的 js 檔案,作為乙個模組。模組只有通過module.exports或者exports才能對外暴露介面。tip 首先先要了解一點,每個js裡定義的變數 函式,只在當前的檔案裡有效,也就是說每個js檔案的作用域只...

微信小程式 模組化

顧名思義,就是將一段 模組化,等我要用的時候直接呼叫就好了,就好像咱們oc裡的自定義控制項一樣,用的時候直接上就好了。因為有網路請求,所以就想著自己寫個像oc那樣子的 哦上 吧,首先得建乙個js檔案,位置隨意放,我是放在了乙個資料夾裡 然後就是裡面定義的 了像醬 網路請求 function http...