微信小程式開發 04 模板和模組化

2022-01-30 18:59:49 字數 2126 閱讀 7582

使用 對**進行模板定義,並使用name屬性為模板進行命名,如:

}: } 

time: }

6

<

template

name="msgitem"

>

<

view

>

<

text

> }: }

text

>

<

text

> time: }

text

>

view

>

template

>

而在需要使用模板的地方,首先需要引用模板檔案,通過import關鍵字,可以在檔案中使用引用檔案中定義的template,如:

1

<

import

src="item.wxml"

/>

而使用的話,同樣是 ,但使用其is 屬性進行宣告使用,並將模板需要的資料傳入。如:

<

import

src="item.wxml"

/>

<

template

is="msgitem"

data="}"

/>

來實際操作一下,我們接著之前的章節,現在把welcome頁面中的**片段 welcome,}!} 抽離為模板:

然後,我們到welcome.wxml中引用name為welcome的模板:

注:這裡的 ... 是wxml中提供的乙個擴充套件運算子,表示將乙個物件展開,這樣一來在模板中本需要使用pagedata.nickname的形式,現在只需要寫nickname即可。

可以看到,這裡傳入的資料引數名為pagedata,那麼我們在welcome.js中的data也需要修改為json物件的形式:

我們看到效果和之前直接寫是一樣的:

值得注意的是,因為**執行順序的緣故,盡量把module.exports放在檔案的最後。自己踩過的乙個坑就是,曾把它放在第一行,結果引出的變數為undefined。

之前我們的變數nickname是寫在welcome.js中的,現在我們把它抽離到其他js檔案中,來示範一下「模組化」。

首先建立乙個根目錄命名為「modules」,在其下新建乙個js檔案data.js:

在js中可以定義變數或者函式,我們簡單寫一下,然後使用 module.exports 來暴露介面以供外界呼叫:

原來在welcome.js的onload函式中,我們的nickname是直接賦值的字串,現在我們要引用模組檔案data.js中的nickname,或者getnickname:

編譯一下檢視效果,妥妥的:

微信小程式(模組化)

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...