utils下app.json
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/account/my",
"pages/arreas/aa",
"pages/recodes/recode",
"pages/help/use",
"pages/query/transit",
"pages/rechanrge/bill",
"pages/sweep/bus"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#AE8F00",
"navigationBarTitleText": "羊城通",
"navigationBarTextStyle": "white"
},
"sitemapLocation": "sitemap.json"
}
其中page是用来存放路径的:
比如:“pages/index/index”,一般你新建个page,就会自动在app.json注册。
window是用来存放全局的配置 :
backgroundTextStyle:(背景文本样式light or dark);//只有这两个选择
navigationBarBackgroundColor:(顶部背景颜色);//全局格式
navigationBarTitleText:(顶部标题);//全局格式
navigationBarTextStyle:(顶部标题颜色);//
还有一些其他的设置见: 微信小程序(1)——项目基础架构及页面组成结构
微信自带的轮播图:
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="imgu">
<swiper-item>
<image src="{{item}}" class="slide-image" style='width:100%'/>
</swiper-item>
当轮播图有空隙时:将图片 style=‘width:100%’ 就没有空隙了;
通过js取数据:
Page({
data: {
imgUrls: [
'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
]
}
})
其他的{{**}}是swiper的一些其他的属性;官方文档地址
js中 方法定义:
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
跳转(同一程序的不同页面)
wx.navigateTo({
url: '/pages/help/use',
})
××.json可以修改定义当前页面的设置;
{
"navigationBarBackgroundColor": "#3a74da"
}
生成二维码(https://pan.baidu.com/s/1gW5O7U655K5P-cvLJCYFRw 提取码:g8l6)
本文详细解析微信小程序app.json文件的配置方法,包括页面路径注册、全局样式设定,以及如何使用swiper组件创建轮播图效果,提供代码示例。

被折叠的 条评论
为什么被折叠?



