微信小程序总结(上)

本文总结了微信小程序的页面结构,包括.wxml、.wxss、.js和.json文件的作用,页面标题设置,页面配置,页面布局,点击事件如bindtap的使用,底部导航栏的配置以及页面跳转的不同方法,如navigateTo、redirectTo和reLaunch等。

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

一、页面结构

  • .wxml – 写 html 代码的
  • .wxss – 写 css 代码的
  • .js – 写 js 代码的
  • .json – 写页面的配置信息

二、页面标题设置

1、整个 app 的标题:

  • 在 app.json 配置。若页面没有单独配置标题,则默认使用 app.json 中配的标题
    "window":{
        "navigationBarTitleText":"app名字"
    }
  • 解释一下 app.json 中 window 对象中其他 kv 对含义
    "window":{
        "backgroundColor": "#F6F6F6",  //app页面的背景颜色,默认#ffffff
        "backgroundTextStyle": "light",  //下拉loading的样式,仅支持 dark/light
        "navigationBarBackgroundColor": "#F6F6F6",  //导航栏的背景颜色,默认#000000
        "navigationBarTitleText": "app名字",  //导航栏标题文字内容
        "navigationBarTextStyle": "black",  //导航栏标题颜色,仅支持 black/white
        "enablePullDownRefresh":true,  //是否开启下拉刷新,默认为 false
        "onReachBottomDistance":50  //页面上拉触底时间触发时距页面底部距离,单位为px,默认50px
    }

2、页面单独设置名字

  • 每个页面都有一个对应的 json 文件,在 json 文件中写以下代码:
    {
        "navigationBarTitleText":"页面名字"
    }

三、创建好页面之后的配置工作

  • 新增/删除页面之后都需要在 app.json 中进行配置,上文介绍了 app.json 中的 window 对象,现在介绍同样在 app.json 中并且与 window 对象同级的 pages 对象。
  • pages 对象:设置页面路径。接受一个数组,每一项是字符串,指定小程序是由哪些页面组成的。数组的第一项代表小
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值