1、打開小程序目錄

打開微信開發(fā)者工具，我們上一節(jié)新建的項目，我圈出來的這個地方就是小程序的目錄結(jié)構(gòu)（如果你那里沒有顯示，可以點擊左上方的編輯器來顯示）

2、原生小程序框架介紹

給大家畫了一張圖，重要的都在這了~

3、app.json頁面配置文件介紹

參考文檔，建議大家收藏一下這個小程序文檔，后面我們會經(jīng)常用到~ https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

咱們在微信開發(fā)者工具中點擊app.json文件，先看一下文件中的代碼

{"pages": ["pages/index/index","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"} }

（1）pages頁面路徑列表

pages數(shù)組中第一個元素是進入小程序的默認(rèn)顯示頁面，在這里，默認(rèn)顯示頁面是pages/index/index。

如果我們將pages/logs/logs放在第一個，在微信開發(fā)者工具中直接編輯，像下面代碼這樣，保存代碼后（按ctrl+s或者command+s），小程序的默認(rèn)顯示頁面就變成了pages/logs/logs

"pages": ["pages/logs/logs","pages/index/index" ]

（2）window全局的默認(rèn)窗口表現(xiàn)

window里面包含的幾項分別代表的是：

• backgroundTextStyle，下拉 loading 的樣式
• navigationBarBackgroundColor，導(dǎo)航欄背景顏色
• navigationBarTitleText，導(dǎo)航欄標(biāo)題文字內(nèi)容
• navigationBarTextStyle，導(dǎo)航欄標(biāo)題顏色

我們來修改一下導(dǎo)航欄背景顏色和導(dǎo)航欄標(biāo)題顏色，修改后的代碼如下：

"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#000000","navigationBarTitleText": "WeChat","navigationBarTextStyle": "white" }

保存代碼后，模擬器里面的導(dǎo)航欄就變成了黑底白字。

（3）tabBar底部 tab 欄的表現(xiàn)

在我們創(chuàng)建的項目示例中，沒有tabBar，需要自己添加，在代碼中添加tabBar

{"pages": ["pages/index/index","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#000000","navigationBarTitleText": "Wechat","navigationBarTextStyle": "white"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首頁"},{"pagePath": "pages/logs/logs","text": "日志"}]} }

保存代碼后，頁面中出現(xiàn)了底部tab欄

其他文件我們先不介紹了，因為后面我們會用mpvue框架，不會直接操作這些文件，我們先了解一下每個文件的功能就可以了~

作者：貓寧一 95后全棧程序媛?? ??? ??一枚~ 熱愛學(xué)習(xí)！熱愛編程！ 可關(guān)注【貓寧一】公眾號領(lǐng)取我所有全棧項目代碼哦~點擊查看課程目錄：微信小程序全棧開發(fā)課程目錄

總結(jié)

以上是生活随笔為你收集整理的angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。