微信小程式 模組化

2021-08-10 16:06:33 字數 2156 閱讀 4816

wxml、js、wxss三類都可以模組化!!!

一、js類

可以將一些公共的**抽離成為乙個單獨的 js 檔案,作為乙個模組。模組只有通過module.exports或者exports才能對外暴露介面。

tip:首先先要了解一點,每個js裡定義的變數、函式,只在當前的檔案裡有效,也就是說每個js檔案的作用域只在檔案內部

模組檔案:

function sayhi(name)

function sayno()

module.exports=

模組引用:

var check =

require(

'../../utils/check.js');

page(,

clicktap:

function(e)

})tip:require目前僅支援相對路徑,不支援絕對路徑

二、wxml類

wxml**裡也可以根據介面上不同的部分去分塊。從主wxml檔案裡分出來的檔案,可以寫成乙個模板template。

1、template和引用template都在同一頁面內

<

template

name=

"tpl">

<

view

>it is tpl!

view

>

<

view

>id:}

view

>

<

view

>name:}

view

>

template

>

<

template

is= "tpl"

data=

"}">

template

>

js:data:

}2、引用檔案和模板檔案分別是兩個檔案

2.1 import引入

模板檔案:tpl.wxml

<

template

name=

"tpl1">

<

view

>這是第二個模板

view

>

<

view

>id:}

view

>

<

view

>name:}

view

>

template

>

引入檔案:

<

import

src=

"tpl.wxml"

/>

<

template

is= "tpl1"

data=

"}">

template

>

js檔案都用的同一資料

2.2 include引入

模板檔案:tpl2.wxml

<

template

name=

"tpl1">

<

view

>這是第二個模板

view

>

<

view

>id:}

view

>

<

view

>name:}

view

>

template

>

引入:

<

include

src=

"tpl2.wxml"

/>

js檔案都用的同一資料

2.3 include和import的區別

簡單理解就是:import是把相應的乙個檔案裡定義的模板引入進來,讓主wxml檔案可以用這個模板。而include是直接把相關檔案的原始碼、內容,原封不動的匯入進來

三、wxss類

wxss的模組化和sass、less差不多了

@import

"tpl

.wxss";

四、建議

各個模組分別放在不同的地方,盡量分詳細一點。例如常使用的head.wxml和foot.wxml以及其他通用的js 附:

源**分享

微信小程式(模組化)

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

微信小程式 模組化

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

整理 小程式模組化方法

可以將一些公共的 抽離成為乙個單獨的 js 檔案,作為乙個模組。模組只有通過module.exports或者exports才能對外暴露介面。注意 common.js function sayhello name function saygoodbye name module.exports.sayh...