目录2、页面配置3、综合案例

1. 全局配置

app.json文件是项目的全局配置文件

（一）小程序窗口的组成

(2) 导航栏

1）常用节点配置项

2）设置导航栏

设置导航栏标题文本

app.json-->-->xt

设置导航栏背景颜色

应用程序.json-->-->

设置导航栏标题颜色

app.json-->-->le

app.json 文件中的节点代码

"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#13227a", "navigationBarTitleText": "Hello", "navigationBarTextStyle":"white" },

(3)下拉刷新页面

1）概念

下拉刷新是移动端的一个术语。 指的是通过手指在屏幕上向下滑动来重新加载页面数据的行为。

2）设置下拉刷新，使能下拉刷新

app.json-->-->h-->true

设置下拉刷新时窗口背景颜色

app.json-->-->-->指定十六进制颜色值#

设置下拉刷新时的样式

app.json-->-->-->深色

"window":{ "navigationBarBackgroundColor": "#13227a", "navigationBarTitleText": "Hello", "navigationBarTextStyle":"white", "enablePullDownRefresh": true, "backgroundColor": "#efefef", "backgroundTextStyle":"dark" },

(4) 引体向上与触底之间的距离

1）概念

上拉筑底是移动端的专有术语。 这是通过在屏幕上向上滑动手指来加载更多数据的行为。

2）设置

app.json-->-->e-->设置新值

注：小程序默认触底距离为50px。 如果没有特殊要求，使用默认值即可。

(5)底部导航栏

1）概念

它是移动应用中常见的页面效果，用于在多个页面之间快速切换。

小程序分为两类

当心

6个组成部分

2）节点配置项

3）每个选项卡项的配置选项

4) 示例

app.json 文件中的节点代码

"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": "联系我们", "iconPath": "images/contract.png", "selectedIconPath": "images/contract-active.png" } ] },

防范措施

(6)图标的获取

博主强烈推荐阿里巴巴图书馆矢量网络，免费且图标丰富。 是一个非常良心、实用的网站！

2. 页面配置 (1) 概念

小程序中，每个页面都有自己的.json页面配置文件微信开发之小程序的页面布局，用于具体配置当前页面的窗口外观、页面效果等。

（2）页面配置与全局配置的关系（3）常用配置项

配置方法与全局配置相同，不再赘述。

3、综合案例

本案例是本地生活小程序首页界面的初步实现

(一)步骤

(2) 真机调试效果图

(3)完整代码js文件

// index.js Page({ data: { image: [{path:"/images/food.png",name:"吃美食"},{path:"/images/wash.png",name:"约洗浴"},{path:"/images/marry.png",name:"结婚啦"},{path:"/images/KTV.png",name:"去唱歌"},{path:"/images/work.png",name:"找工作"},{path:"/images/teacher.png",name:"报辅导"},{path:"/images/car.png",name:"养汽车"},{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 文件

{{item.name}}

wxss 文件

swiper { height: 400rpx; } swiper image{ width: 100%; height: 100%; } .gridList{ /* flex布局格式 */ display: flex; /* 允许自动换行 */ flex-wrap: wrap; /* 给外层容器左边与上部加上边框线 */ border-left: 1rpx solid #efefef; border-top: 1rpx solid #efefef; } .gridItem{ width: 33.33%; /* 每个图片的固定高度 */ height: 200rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; /* 给内层容器中的每一项加上右侧和底部的边框线 */ 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; /* 设置文本与图片的上部距离 */ margin-top: 10rpx; } .img-box{ display: flex; padding: 20rpx 10rpx; justify-content: space-around; } .img-box image{ width: 45%; }

这篇关于微信小程序开发的全局配置和页面配置实现的文章到此结束。 更多相关小程序全局配置和页面配置内容，请搜索云海天教程往期文章或继续浏览以下相关文章。 希望大家以后多多支持云海天教程！