微信小程式第3課 目錄結構及小知識點

2022-05-19 14:54:47 字數 3045 閱讀 3418

pages資料夾

utils資料夾

小程式目錄結構的整體結構如下:

我們詳細介紹下小程式目錄中每個檔案和資料夾的功能,以及注意事項。

pages:主要存放小程式的頁面檔案,其中每個資料夾為乙個頁面,每個頁面包含四個檔案:

其次,我們看一下bindviewtap: function()的功能,是點選跳轉到日誌頁面。我們可以點選頭像看一下演示效果,如下圖所示:

最後,我們看一下onload函式,是設定頁面啟動時的動作。我們可以修改頁面啟動時顯示頁面,也可以新增函式,如下圖所示:

常用的用.js函式如下所示:

page(,

onload:function(options),

onready:function(),

onshow:function(),

onhide:function(),

onunload:function()

})

json字尾的檔案是配置檔案,主要是json資料格式存放,用於設定程式的配置效果。我們可以在index目錄下建立.json為配置檔案,如下所示:

我們可以看到背景顏色變成的紅色。。(這顏色真是慘不忍睹啊!)

在.wxml中如何對不需要的程式**進行注釋呢?如下:

注意:

.wxss是樣式表檔案,類似於前端中的css,是為.wxml檔案和page檔案進行美化的檔案,讓介面顯示的更加美觀。例如對文字的大小,顏色,的寬高,設定個.wxml中個元件的位置,間距等。

注意:

1.小程式每個頁面必須有.wxml和.js檔案,其他兩種型別的檔案可以不需要

2.檔名稱必須與頁面的資料夾名稱相同,如index資料夾,檔案只能是index.wxml、index.wxss、index.js和index.json.

該檔案件主要用於存放全域性的一些.js檔案,公共用到的一些事件處理**檔案可以放到該資料夾下,用於全域性呼叫。例如,公用的方法:對時間的處理等。

module.exports =
對於允許外部呼叫的方法,用module.exports進行宣告,才能在其他js檔案中用一下**引入

var util = require('../../utils/util.js')

然後就可以呼叫該方法。

舉例:我們直接定義乙個utils函式,如下圖所示:

function util()

module.exports.util = util

然後在index.js檔案中呼叫這個util函式,如下所示:

var common = require('../../utils/util.js')

我們可以儲存後,在後台可以看到,我們定義的util內容被呼叫了,如下所示:

],(框架中的json優先順序高於全域性的json優先順序。)

.usermotto
.usermotto
在執行重啟的過程中,我們可以看到全域性的引數被index.wxss裡面的覆蓋了。

pages資料夾上右鍵->新建目錄->輸入資料夾名字"test"

在test資料夾上右鍵->新建page->輸入檔案名字"test",就建立了四個檔案

index/index.js裡輸入url: '../test/test'

//事件處理函式

bindviewtap: function() )

},

ctrl+r儲存編譯一下,點選頭像跳轉到這個頁面上試試

index/index.js裡輸入url: '../test/test'儲存,就會自動生成對應的資料夾和檔案了.

//事件處理函式

bindviewtap: function() )

},

文章參考:暱稱:thebeauty

微信小程式之目錄結構

小程式,功能不會太多,頁面不會太多。正常情況下,會包含首頁,分類頁面,個人中心頁面,導航頁面,其他頁面等等。我們首先要把頁面結構布置好,把架子搭建好。剩下的就是配置一些內容,小程式的基本資訊,介面位址等等。看看上面的目錄結構,很清晰。包括common,通用的功能資料夾。包括config配置檔案,一些...

微信小程式目錄結構介紹

1 專案路徑下的檔案 project.config.json 在每個專案的根目錄都會生成乙個 project.config.json,你在工具上做的任何配置都會寫入到這個檔案,當你重新安裝工具或者換電腦工作時,你只要載入同乙個專案的 包,開發者工具就自動會幫你恢復到當時你開發專案時的個性化配置,其中...

微信小程式的目錄結構解剖

js字尾檔案就是我們寫的普通的js檔案 json字尾檔案就是小程式的配置檔案,比如 windows的樣式,頁面的渲染檔案順序,tabs導航的配置 當然,初始化的例項當中沒有給出tabs配置,其實就跟window的格式一樣 wxss字尾檔案就是我們寫的css檔案 wxml字尾檔案就相當於我們的html...