1. 创建页面的方式
- 在app.json页面的pages选项中添加带路径的页面,保存后会自动在相应路径下创建4个文件
- 选中pages文件夹 -> 点击新建文件夹,创建文件夹后,右击文件夹 -> 选择新建page,自动创建4个文件,同时将页面注册到app.json的pages选项中
2. 全局配置(app.json)
小程序根目录下的 app.json 文件用来对小程序进行全局配置,定义小程序的所有页面路径、全局界面表现、网络超时时间、底部Tab栏等,常用属性配置示例如下:
{
// 指定小程序由哪些页面组成,小程序所有页面都必须在pages中注册
// 未指定entryPagePath时,第一个页面代码小程序的初始页面(首页)
"pages": [
"pages/index/index",
"pages/about/about",
"pages/logs/logs",
"pages/home/home"
],
// 用于设置小程序的状态栏、导航条、标题、窗口背景颜色,标题文本及样式等
"window": {
"navigationBarBackgroundColor": "#007bff", // 导航栏背景颜色
"navigationBarTextStyle": "white", // 导航栏文本样式
"navigationBarTitleText": "Hello World!", // 导航栏文本内容
"navigationStyle": "default", // 导航栏样式
"backgroundColor": "#ccc", // 窗口背景颜色
"backgroundTextStyle": "dark", // 下拉loading样式,仅支持dark/light
"enablePullDownRefresh": true, // 是否开启全局下拉刷新
"onReachBottomDistance": 50, // 上拉触底事件发生时距页面底部距离
"pageOrientation": "portrait" // 屏幕旋转设置
},
// 底部 tab 栏设置
"tabBar": {
"backgroundColor": "#ffffff", // tab 的背景颜色
"color": "#000000", // tab 上的文字默认颜色
"selectedColor": "#000000", // tab 上的文字选中时的颜色
// tab 的列表,最少2个,最多5个
"list": [
{
"pagePath": "pages/index/index", // 页面路径
"text": "首页", // tab 上按钮的文字
"iconPath": "images/home2.png", // tab 图片路径,不支持网络图片
"selectedIconPath": "images/home1.png" // tab 选中时的图片,不支持网络图片
},
{
"pagePath": "pages/about/about",
"text": "关于",
"iconPath": "images/about2.png",
"selectedIconPath": "images/about1.png"
}
]
},
// 网络超时时间设置
"networkTimeout": {
"request": 20000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 20000
},
"style": "v2", // 启用新版组件样式
"sitemapLocation": "sitemap.json", // 指明sitemap.json的位置
"debug": true, // 是否打开debug模式,打开后控制台输出更详细的信息便于调试
"entryPagePath": "pages/about/about" //指定小程序默认启动页面
}
3. 页面配置(page.json)
page.json是指小程序具体页面的 .json 文件,对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项(样式相关的配置项属于 app.json 中的 window 属性,但这里不需要额外指定 window 字段)。
{
"usingComponents": {},
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "关于我们",
"enablePullDownRefresh": false
}
4. sitemap配置(sitemap.json)
开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引,提供小程序搜索功能,若没有sitemap.json,则所有页面都允许被索引。
{
"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}