小程序開發(fā)五:項目的正式啟動(項目的模板介紹)

上一節(jié)我們介紹了“調試器”各個欄目的用法,這一節(jié)我們將正式啟動項目记靡,想想是不是有點小激動呢??
話不多說,搞起~~~~~~

首頁我們新建好一個名為“SMDemo”的項目樱溉,選擇測試appID紫谷,之后保存到桌面上的目錄齐饮,成功打開捐寥,如下圖


image.png

你會發(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中


image.png

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文檔

image.png


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é)我們學習:

傳送門:
六:登錄Login頁面的實現與講解

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末年碘,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子朱庆,更是在濱河造成了極大的恐慌盛泡,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件娱颊,死亡現場離奇詭異傲诵,居然都是意外死亡,警方通過查閱死者的電腦和手機箱硕,發(fā)現死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門拴竹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人剧罩,你說我怎么就攤上這事栓拜。” “怎么了惠昔?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵幕与,是天一觀的道長。 經常有香客問我镇防,道長啦鸣,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任来氧,我火速辦了婚禮诫给,結果婚禮上,老公的妹妹穿的比我還像新娘啦扬。我一直安慰自己中狂,他們只是感情好,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布扑毡。 她就那樣靜靜地躺著胃榕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪瞄摊。 梳的紋絲不亂的頭發(fā)上勤晚,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天枉层,我揣著相機與錄音,去河邊找鬼赐写。 笑死鸟蜡,一個胖子當著我的面吹牛,可吹牛的內容都是我干的挺邀。 我是一名探鬼主播揉忘,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼端铛!你這毒婦竟也來了泣矛?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤禾蚕,失蹤者是張志新(化名)和其女友劉穎您朽,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體换淆,經...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡哗总,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了倍试。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片讯屈。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖县习,靈堂內的尸體忽然破棺而出涮母,到底是詐尸還是另有隱情,我是刑警寧澤躁愿,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布叛本,位于F島的核電站,受9級特大地震影響彤钟,放射性物質發(fā)生泄漏来候。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一样勃、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧性芬,春花似錦峡眶、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至俊庇,卻和暖如春狮暑,著一層夾襖步出監(jiān)牢的瞬間鸡挠,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工搬男, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留拣展,地道東北人。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓缔逛,卻偏偏與公主長得像备埃,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子褐奴,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內容