文章目錄

• 1.授權登錄
• 2.pages
• 3.實現tab欄
• • 3.1 position
  • 3.2 backgroundColor
  • 3.3 borderStyle
  • 3.4 color
  • 3.5 selectedColor
  • 3.6 list
  • • 3.6.1 text
    • 3.6.2 pagePath
    • 3.6.3 iconPath
    • 3.6.4 selectedIconPath
• 4.window窗口
• • 4.1 backgroundTextStyle
  • 4.2 navigationBarBackgroundColor
  • 4.3 backgroundColorBottom
  • 4.4 navigationBarTitleText
  • 4.5 navigationBarTextStyle
  • 4.6 backgroundColor
  • 4.7 enablePullDownRefresh
  • 4.8 entryPagePath

1.授權登錄

在使用微信小程序時，我們需要經過用戶允許之后才能獲取微信用戶信息，一般我們都是在APP.json中的pages數組的第一個元素中的地址寫入獲取用戶信息的代碼。新建的小程序會自動新建Index和logs兩個文件夾，一般都自動默認在index中導入用戶登錄信息，點擊頭像位置就可以授權登錄。新建的小程序都會自動生成授權代碼在index.js和index.wxml中，只需要自己修改一小部分即可。在index.json中設置小程序首頁名稱和字體顏色，在index.wxss中設置頁面的樣式。
index.js授權登錄代碼：

//index.js //獲取應用實例 const app = getApp()Page({data: {motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo')},handleClick(){//點擊跳轉到weixin界面（保留當前頁面跳轉到新的界面）wx.navigateTo({url: '/pages/weixin/weixin',})},//事件處理函數bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onLoad: function () {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse){// 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回// 所以此處加入 callback 以防止這種情況app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在沒有 open-type=getUserInfo 版本的兼容處理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})} })

index.json登錄界面字體設置代碼

{"navigationBarTitleText": "微信小程序首頁","navigationBarTextStyle":"black" }

index.wxml結構設置代碼，我多添加了一個登錄按鈕

<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button><block wx:else><image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><navigator class="goStudy" style='display :inline;' url='/pages/logs/logs' open-type="navigate" hover-class="nav-hover"><ol><text>開啟小程序之旅</text></ol></navigator> </view>

inde.wxss界面樣式設置代碼，設置一些界面顏色和排版布局

/**index.wxss**/ page{height: 100%;background: #1ff; } .userinfo {display: flex;flex-direction: column;align-items: center; }.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%; }.userinfo-nickname {color: #aaa; }.usermotto {margin-top: 200px; } .container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box; } /* 設置跳轉界面長寬和顏色 *//* 設置字體大小和粗細、間距 */.goStudy{/* 設置邊框長寬 */width: 280rpx;height: 80rpx;text-align: center;/* 設置邊框離上、左、下的距離 */margin:50rpx 20rpx 100rpx;/* 設置字體大小 */font-size: 35rpx;font-weight: 700;/* 邊框長寬 */border: 1rpx solid rgb(245, 229, 9);/* 設置邊框的角圓不圓 */border-radius: 1000rpx;/* 邊框與上面距離 */line-height: 80rpx; } /* 注釋：設置跳轉點擊時的跳轉顏色 */ .nav-hover{color:rgb(255, 0, 13); }

2.pages

Pages主要是配置各文件夾選項，把路徑保存在pages里，一般小程序會在新建文件夾自動保存在pages里面，pages內容為數組。我們在編寫小程序文件夾內容時，可以把該文件夾放在第一個，這樣就可以節省很多時間，在編譯時可以直接在模擬器首頁上直接就看到編譯效果
樣式代碼：

"pages": ["pages/index/index","pages/logs/logs","pages/star/star","pages/weixin/weixin","pages/data1/data1"]

3.實現tab欄

3.1 position

tab欄有兩種top和bottom，在position中寫入，"position": "bottom"或"position": "top",，使用top欄的話沒有圖標標識
采用"position": "top"效果，此時圖標不顯示

采用"position": "bottom"效果，顯示圖標

后面舉例都以bottom為例。

3.2 backgroundColor

backgroundColor是tab欄顏色設置，可以為6位的16進制數，上面的顏色是以代碼"backgroundColor": "#1ff",運行的結果，我們可以試著去
修改為"backgroundColor": "#000000",效果如下

修改為"backgroundColor": "#ffffff",效果如下

顏色可以自己由輸入6位的16進制數設置，不可以輸入英語顏色單詞，比如"backgroundColor": "red",，效果就是現實默認的白色，不會報錯。和上面效果一樣，但是這個是默認顏色，性質上還是有區別的

3.3 borderStyle

borderStyle是字體顏色設置，只有white和black兩個選項，不支持其他選項；

3.4 color

color是設置任務欄字體顏色，輸入為6位16進制數
輸入代碼："color": "#1ff",，查看效果

顏色可以自己設置，但是設置可能和背景色差不多的話可能會看不出效果

3.5 selectedColor

selectedColor是設置點擊跳轉時顏色設置
輸入代碼："selectedColor": "#ffffff",查看效果

當加載該頁面時，頁面顯示為selectedColor所設置顏色

3.6 list

list為小程序的tab欄列表，里面為數組，最多五個，最少兩個

3.6.1 text

任務欄1的標題， 填入任務欄標題就好，如："text": "首頁",

3.6.2 pagePath

任務欄1的頁面路徑，如："pagePath": "pages/index/index",

3.6.3 iconPath

任務欄1未點擊時顯示的圖標，注意圖片大小不能太大，不然不能使用該圖標，有圖片大小要求，詳情在微信開放文檔有具體要求，把圖片路徑找到填入即可如："iconPath": "/lsq/img/luo4.png",

3.6.4 selectedIconPath

任務欄1點擊時顯示的圖標，要求和iconPath一樣，如："selectedIconPath": "/lsq/img/luo4-active.png"
iconPath和selectedIconPath配對使用，一般iconPath采用暗色，selectedIconPath采用亮色，當未使用圖標暗色，使用時圖標變亮，這樣使用能更美觀
后面就直接重復上面內容就能完成任務欄2和3的寫入
樣式代碼：

"list": [{"text": "首頁","pagePath": "pages/index/index","iconPath": "/lsq/img/luo4.png","selectedIconPath": "/lsq/img/luo4-active.png"},{"text": "詳情","pagePath": "pages/logs/logs","iconPath": "/lsq/img/luo5.png","selectedIconPath": "/lsq/img/luo5-active.png"},{"text": "我的","pagePath": "pages/star/star","iconPath": "/lsq/img/播放.png","selectedIconPath": "/lsq/img/播放 copy.png"}]

效果圖

4.window窗口

4.1 backgroundTextStyle

下拉 loading 的樣式，僅支持 dark 和light，樣式代碼："backgroundTextStyle": "dark",效果如下

4.2 navigationBarBackgroundColor

導航欄背景顏色，默認6位的16進制數，如："navigationBarBackgroundColor": "#ffffff",效果如下

4.3 backgroundColorBottom

backgroundColorBottom是底部窗口的背景色，僅 iOS 支持；

4.4 navigationBarTitleText

navigationBarTitleText是導航欄標題文字內容，如："navigationBarTitleText": "微信小程序",

4.5 navigationBarTextStyle

navigationBarTextStyle是導航欄標題顏色，僅支持 black 和 white；
如："navigationBarTextStyle":"white"

4.6 backgroundColor

backgroundColor是窗口的背景色，下拉刷新時空白處的顏色，可以為6位的16進制數
如："backgroundColor":"#565656",

如："backgroundColor":"#ffffff",

4.7 enablePullDownRefresh

enablePullDownRefresh是是否開啟全局的下拉刷新，僅有true和false兩個選項；

4.8 entryPagePath

設置刷新首頁地址，編譯時顯示地址，如修改首頁地址："entryPagePath": "pages/logs/logs",首頁就變成了Logs文件夾的內容了

以上就差不多把app.json常見的屬性介紹完了。

總結

以上是生活随笔為你收集整理的小程序开发学习（1）---app.json详解篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。