微信小程序总结（上）

最新推荐文章于 2022-04-16 20:59:25 发布

原创

最新推荐文章于 2022-04-16 20:59:25 发布 · 2.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

本文总结了微信小程序的页面结构，包括.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 对象：设置页面路径。接受一个数组，每一项是字符串，指定小程序是由哪些页面组成的。数组的第一项代表小