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