微信小程序 -进阶之路(1)

本文详细解析微信小程序app.json文件的配置方法,包括页面路径注册、全局样式设定,以及如何使用swiper组件创建轮播图效果,提供代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值