微信小程序開發(fā)之全局配置與頁面配置實(shí)現(xiàn)
一、全局配置
app.json文件就是項(xiàng)目的全局配置文件

(1)小程序窗口的組成部分

(2)導(dǎo)航欄 navigationBar
1)window節(jié)點(diǎn)常用配置項(xiàng)

2)設(shè)置導(dǎo)航欄
設(shè)置導(dǎo)航欄標(biāo)題文字
app.json-->window-->navigationBarTitleText
設(shè)置導(dǎo)航欄背景色
app.json-->window-->navigationBarBackgroundColor
設(shè)置導(dǎo)航欄的標(biāo)題顏色
app.json-->window-->navigationBarTextStyle
app.json文件中window節(jié)點(diǎn)代碼
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#13227a",
"navigationBarTitleText": "Hello",
"navigationBarTextStyle":"white"
},
(3)下拉刷新頁面
1)概念
下拉刷新是移動(dòng)端的轉(zhuǎn)有名詞,指的是通過手指在屏幕上的下拉滑動(dòng)操作,從而重新加載頁面數(shù)據(jù)的行為
2)設(shè)置下拉刷新 開啟下拉刷新
app.json-->window-->enablePullDownRefresh-->true
設(shè)置下拉刷新時(shí)窗口的背景色
app.json-->window-->backgroundColor-->指定十六進(jìn)制的顏色值#efefef
設(shè)置下拉刷新時(shí)loading樣式
app.json-->window-->backgroundTextStyle-->dark
"window":{
"navigationBarBackgroundColor": "#13227a",
"navigationBarTitleText": "Hello",
"navigationBarTextStyle":"white",
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle":"dark"
},
(4)上拉觸底的距離
1)概念
上拉觸底是移動(dòng)端的專有名詞,通過手指在屏幕上的上拉滑動(dòng)操作,從而加載更多數(shù)據(jù)的行為
2)設(shè)置
app.json-->window-->onReachBottomDistance-->設(shè)置新值
注意:小程序默認(rèn)觸底距離為50px,若沒有特殊的需求,那么直接使用默認(rèn)值即可
(5)底部導(dǎo)航欄 tabBar
1)概念
tabBar是移動(dòng)端應(yīng)用常見的頁面效果,用于實(shí)現(xiàn)多頁面的快速切換
小程序中tabBar分為兩類
- 底部tabBat(常用)
- 頂部tabBar
注意點(diǎn)
- tabBar中只能配置最少2個(gè)、最多5個(gè)tab頁簽
- 當(dāng)渲染頂部tabBar時(shí),不顯示icon圖標(biāo),只顯示文本
tabBar的6個(gè)組成部分

2)tabBar節(jié)點(diǎn)配置項(xiàng)

3)每個(gè)tab項(xiàng)的配置選項(xiàng)

4)示例

app.json文件中tabBar節(jié)點(diǎn)代碼
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "images/home.png",
"selectedIconPath": "images/home-active.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "images/message.png",
"selectedIconPath": "images/message-active.png"
},
{
"pagePath": "pages/contract/contract",
"text": "聯(lián)系我們",
"iconPath": "images/contract.png",
"selectedIconPath": "images/contract-active.png"
}
]
},
注意事項(xiàng)
- 可以先在項(xiàng)目的根目錄下新建image文件夾,來專門存儲(chǔ)項(xiàng)目需要使用到的icon圖標(biāo)
- 作為tabBar的頁面必須放在app.json文件中Pages節(jié)點(diǎn)的前面,否則無法正常跳轉(zhuǎn)(切記)
(6)圖標(biāo)的獲取
博主極力推薦阿里巴巴圖庫矢量網(wǎng),免費(fèi),且圖標(biāo)豐富,真的很良心的一個(gè)實(shí)用網(wǎng)站!

二、頁面配置
(1)概念
小程序中,每一個(gè)頁面都有一個(gè)屬于自己的.json頁面配置文件,用來對(duì)當(dāng)前頁面的窗口外觀、頁面效果等進(jìn)行特定的配置
(2)頁面配置與全局配置的關(guān)系
- app.json中的window節(jié)點(diǎn),可以全局配置小程序中每一個(gè)頁面的窗口表現(xiàn)
- 若某個(gè)頁面想要特殊的窗口外觀表現(xiàn),就可以使用頁面級(jí)別的.json配置文本進(jìn)行配置
- 當(dāng)全局配置與頁面配置沖突時(shí),根據(jù)“ 就近原則 ”,會(huì)以頁面配置為準(zhǔn)從而覆蓋掉全局配置
(3)常用配置項(xiàng)

配置方法與全局配置同理,不再展示。
三、綜合案例
本案例是本地生活小程序首頁界面的初步實(shí)現(xiàn)
(1)步驟
- 先配置導(dǎo)航欄效果
- 配置底部tabBar效果
- 實(shí)現(xiàn)頂部的輪播圖
- 實(shí)現(xiàn)九宮格功能框
- 實(shí)現(xiàn)底部圖片布局
(2)真機(jī)調(diào)試效果圖

(3) 完整代碼 js文件
// index.js
Page({
data: {
image: [{path:"/images/food.png",name:"吃美食"},{path:"/images/wash.png",name:"約洗浴"},{path:"/images/marry.png",name:"結(jié)婚啦"},{path:"/images/KTV.png",name:"去唱歌"},{path:"/images/work.png",name:"找工作"},{path:"/images/teacher.png",name:"報(bào)輔導(dǎo)"},{path:"/images/car.png",name:"養(yǎng)汽車"},{path:"/images/hotel.png",name:"定酒店"},{path:"/images/fush.png",name:"找裝修"}],
},
onLoad:function(options) {
console.log(options)
}
})(圖片路徑需自定義)
json文件
{
"usingComponents": {
"mt-test1":"/components/test/test1"
},
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"
}wxml文件
<!-- 首頁頂部的輪播圖效果 -->
<swiper indicator-dots indicator-color="white" circular autoplay >
<swiper-item>
<image src="/images/locallife.png" ></image>
</swiper-item>
<swiper-item>
<image src="/images/locallife2.png"></image>
</swiper-item>
<swiper-item>
<image src="/images/locallife3.png"></image>
</swiper-item>
</swiper>
<!-- 九宮格功能區(qū) -->
<!-- 外層容器 -->
<view class="gridList">
<!-- 內(nèi)層容器 -->
<navigator class="gridItem" wx:for="{{image}}" url="/pages/shoplist/shoplist?title={{item.name}}">
<image src="{{item.path}}"></image>
<text>{{item.name}}</text>
</navigator>
</view>
<!-- 底部圖片功能塊 -->
<view class="img-box">
<image src="/images/tuijian.png" mode="widthFix"></image>
<image src="/images/pingjia.png" mode="widthFix"></image>
</view>wxss文件
swiper {
height: 400rpx;
}
swiper image{
width: 100%;
height: 100%;
}
.gridList{
/* flex布局格式 */
display: flex;
/* 允許自動(dòng)換行 */
flex-wrap: wrap;
/* 給外層容器左邊與上部加上邊框線 */
border-left: 1rpx solid #efefef;
border-top: 1rpx solid #efefef;
}
.gridItem{
width: 33.33%;
/* 每個(gè)圖片的固定高度 */
height: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 給內(nèi)層容器中的每一項(xiàng)加上右側(cè)和底部的邊框線 */
border-right: 1rpx solid #efefef;
border-bottom: 1rpx solid #efefef;
/* 改變盒子的方式為border-box */
box-sizing: border-box;
}
.gridItem image{
width: 60rpx;
height: 60rpx;
}
.gridItem text{
font-size: 24rpx;
/* 設(shè)置文本與圖片的上部距離 */
margin-top: 10rpx;
}
.img-box{
display: flex;
padding: 20rpx 10rpx;
justify-content: space-around;
}
.img-box image{
width: 45%;
}到此這篇關(guān)于微信小程序開發(fā)之全局配置與頁面配置實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)小程序全局配置與頁面配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中var let const的用法有哪些區(qū)別
在ES6(ES2015)出現(xiàn)之前,JavaScript中聲明變量就只有通過var關(guān)鍵字,函數(shù)聲明是通過function關(guān)鍵字,而在ES6之后,聲明的方式有var、let、const、function、class,本文主要討論var、let和const之間的區(qū)別2021-10-10
JS實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能
本文主要介紹了JS實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能的方法代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
如何使用bootstrap框架 bootstrap入門必看!
如何使用bootstrap?這篇文章就是告訴大家如何使用bootstrap框架,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04
JavaScript實(shí)現(xiàn)動(dòng)態(tài)生成表格案例詳解
本文主要介紹了通過JavaScript實(shí)現(xiàn)一個(gè)動(dòng)態(tài)添加表格的案例,當(dāng)點(diǎn)擊添加按鈕時(shí),可以彈出一個(gè)表單,然后將輸入的內(nèi)容添加到表格中,也可以將表格中的整行內(nèi)容清除。感興趣的可以學(xué)習(xí)一下2021-12-12
HTA版JSMin(省略修飾語若干)基于javascript語言編寫
JSMin是一種很有用的ECMAScript代碼減肥工具,雖然它只是一種較為初級(jí)的工具,但用它來對(duì)付我自己編寫的大部分ECMAScript代碼效果都很不錯(cuò),而且在我這里也從未發(fā)生過減肥后代碼出錯(cuò)之類的問題。2009-12-12

