上一節(jié)我們介紹了“調試器”各個欄目的用法,這一節(jié)我們將正式啟動項目记靡,想想是不是有點小激動呢??
話不多說,搞起~~~~~~
首頁我們新建好一個名為“SMDemo”的項目樱溉,選擇測試appID紫谷,之后保存到桌面上的目錄齐饮,成功打開捐寥,如下圖
你會發(fā)現項目有了默認的模板,那么就給大家介紹一下項目模板的框架(空項目的話祖驱,大家逐個刪掉對應的頁面文件夾握恳,并修改app.json里的pages的文件索引即可,這里不做過多介紹)
【index】
項目啟動默認的初始頁面
【logs】
logs頁面
主要介紹app.json捺僻,app的框架文件(為什么app的文件缺少一個.wxml的文件乡洼,是因為項目的框架沒有默認的頁面,必須要在app.json中配置首個出現并顯示的頁面匕坯,如下圖)
app.json
用于配置項目的全局參數和框架等等束昵,如下圖中的代碼
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
}
不難看出pages中有兩個頁面的路徑,即代表在此項目中存在兩個頁面“index”葛峻、“l(fā)ogs”锹雏。而index頁面放在首個位置,即代表app啟動顯示的第一個頁面為index頁面术奖。
如果我們項目中需要新建新的頁面(test)的話礁遵,那么需要創(chuàng)建此頁面的文件夾(test),并在文件夾(test)下面采记,新建四個文件“test.xml”佣耐、“test.json”、“test.js”唧龄、“test.wxss”晰赞。并將“test.xml”所在的路徑,添加進app.json中的pages中
PS:大家是不是會覺得創(chuàng)建一個新的頁面是不是很麻煩选侨,需要創(chuàng)建這個文件夾,還需要在此目錄下創(chuàng)建4個文件然走,最后再把文件的索引添加進pages中援制,那么我們是不是有簡單的方法,能一步到位地解決呢
解決辦法
我們跳過創(chuàng)建的過程芍瑞,直接在app.json的pages中晨仑,添加新的頁面路徑,然后我們再編譯項目拆檬,你會發(fā)現是如此的簡單洪己。
編譯之后 ----
是不是很快捷地就出來了呢。沒錯竟贯,以后我們都可以采取此種類型的方法答捕,注意“pages/test1/test1”,不是一定非要這么寫,你也可以寫成“demo/demo/demo”那么會在新的路徑下創(chuàng)建此頁面文件屑那,我們編譯下看看
編譯----
路徑自己來決定拱镐。
下面介紹下:
app.json中的window參數
{
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
}
具體的參數 我們可以去查看微信的api文檔艘款,這里就不做介紹了
傳送門:api文檔
app.wxss
app的整體框架的樣式配置
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
添加如下參數的話,如果在之后的頁面中沃琅,沒有對指定的text標簽設置字體大小的話哗咆, 那么則會顯示默認的22rpx的大小
text{
font-size: 22rpx;
}
app.js
onLaunch: function () {
項目的啟動函數,項目在啟動的時候益眉,會觸發(fā)此方法晌柬,有且只有一次。
項目的模板大致介紹清楚了 郭脂,下一節(jié)我們學習: