微信小程序開(kāi)發(fā)之全局配置與頁(yè)面配置實(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）下拉刷新頁(yè)面
1)概念
下拉刷新是移動(dòng)端的轉(zhuǎn)有名詞，指的是通過(guò)手指在屏幕上的下拉滑動(dòng)操作，從而重新加載頁(yè)面數(shù)據(jù)的行為
2）設(shè)置下拉刷新 開(kāi)啟下拉刷新
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)端的專(zhuān)有名詞，通過(guò)手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為
2）設(shè)置
app.json-->window-->onReachBottomDistance-->設(shè)置新值
注意：小程序默認(rèn)觸底距離為50px,若沒(méi)有特殊的需求，那么直接使用默認(rèn)值即可
（5）底部導(dǎo)航欄 tabBar
1）概念
tabBar是移動(dòng)端應(yīng)用常見(jiàn)的頁(yè)面效果，用于實(shí)現(xiàn)多頁(yè)面的快速切換
小程序中tabBar分為兩類(lèi)
- 底部tabBat(常用)
- 頂部tabBar
注意點(diǎn)
- tabBar中只能配置最少2個(gè)、最多5個(gè)tab頁(yè)簽
- 當(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": "首頁(yè)",
"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文件夾，來(lái)專(zhuān)門(mén)存儲(chǔ)項(xiàng)目需要使用到的icon圖標(biāo)
- 作為tabBar的頁(yè)面必須放在app.json文件中Pages節(jié)點(diǎn)的前面，否則無(wú)法正常跳轉(zhuǎn)（切記）
（6）圖標(biāo)的獲取
博主極力推薦阿里巴巴圖庫(kù)矢量網(wǎng)，免費(fèi)，且圖標(biāo)豐富，真的很良心的一個(gè)實(shí)用網(wǎng)站！
二、頁(yè)面配置
（1）概念
小程序中，每一個(gè)頁(yè)面都有一個(gè)屬于自己的.json頁(yè)面配置文件，用來(lái)對(duì)當(dāng)前頁(yè)面的窗口外觀、頁(yè)面效果等進(jìn)行特定的配置
（2）頁(yè)面配置與全局配置的關(guān)系
- app.json中的window節(jié)點(diǎn)，可以全局配置小程序中每一個(gè)頁(yè)面的窗口表現(xiàn)
- 若某個(gè)頁(yè)面想要特殊的窗口外觀表現(xiàn)，就可以使用頁(yè)面級(jí)別的.json配置文本進(jìn)行配置
- 當(dāng)全局配置與頁(yè)面配置沖突時(shí)，根據(jù)“ 就近原則 ”，會(huì)以頁(yè)面配置為準(zhǔn)從而覆蓋掉全局配置
（3）常用配置項(xiàng)
配置方法與全局配置同理，不再展示。
三、綜合案例
本案例是本地生活小程序首頁(yè)界面的初步實(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)汽車(chē)"},{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文件
<!-- 首頁(yè)頂部的輪播圖效果 -->
<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)于微信小程序開(kāi)發(fā)之全局配置與頁(yè)面配置實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)小程序全局配置與頁(yè)面配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了原生javascript實(shí)現(xiàn)百葉窗效果的方法及原理介紹，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
uniapp中scroll-view基礎(chǔ)用法示例代碼
我們?cè)陧?xiàng)目中往往都能遇到實(shí)現(xiàn)左右滑動(dòng)跟上下滑動(dòng)的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp中scroll-view基礎(chǔ)用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
微信小程序 扭蛋抽獎(jiǎng)機(jī)css3動(dòng)畫(huà)實(shí)現(xiàn)詳解
這篇文章主要介紹了微信小程序 扭蛋抽獎(jiǎng)機(jī)css3動(dòng)畫(huà)實(shí)現(xiàn)詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
本文主要介紹了Axios去除重復(fù)請(qǐng)求方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
在 JavaScript 中使用反斜杠來(lái)向文本字符串添加特殊字符，下面通過(guò)本篇文章給大家介紹javascript如何傳遞特殊字符，對(duì)js傳遞特殊字符相關(guān)內(nèi)容感興趣的朋友一起學(xué)習(xí)吧2015-11-11
刪除屬性有很多方法,學(xué)到了就在這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于js刪除對(duì)象屬性的多種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
JavaScript在ES6版本后提供了一些更加便捷的方法供開(kāi)發(fā)者使用,實(shí)現(xiàn)原理其實(shí)是在對(duì)應(yīng)的構(gòu)造函數(shù)原型提供方法,下面這篇文章主要給大家介紹了關(guān)于es6中some和every方法使用的相關(guān)資料,需要的朋友可以參考下2023-04-04
input file的默認(rèn)value清空與賦值方法
出于安全性考慮，JS是不能直接設(shè)置File的value值的，下面是我總結(jié)出來(lái)的方法2010-09-09
javascript 系統(tǒng)文件夾文件操作及參數(shù)介紹
javascript文件操作包括寫(xiě)入文件、當(dāng)前目錄文件、讀文件、刪除文件、批量刪除，未刪除文件夾，刪除不了當(dāng)前目錄文件等等，感興趣的朋友可以參考下2013-01-01