wordpress重新生成文章更新,成都网站排名优化公司,服务公司取名最好的名字,注册公司要求什么条件目录 小程序配置文件
1. 配置文件介绍
2. 全局配置
2.1 pages
2.2 window
2.3 tabBar
3. 页面配置
4. 项目配置文件
5. 支持使用 sass/less
6. sitemap.json 小程序配置文件
1. 配置文件介绍
JSON是一种轻量级的数据格式#xff0c;常用于前后端数据的交互#xf…目录 小程序配置文件
1. 配置文件介绍
2. 全局配置
2.1 pages
2.2 window
2.3 tabBar
3. 页面配置
4. 项目配置文件
5. 支持使用 sass/less
6. sitemap.json 小程序配置文件
1. 配置文件介绍
JSON是一种轻量级的数据格式常用于前后端数据的交互但是在小程序中JSON 扮演的静态配置的角色用于配置当前页面或组件的属性和行为每个页面或组件也都可以拥有一个对应的 json 文件。
小程序中常见的配置文件有以下几种
全局配置文件app.json ➡ 小程序全局配置文件用于配置小程序的一些全局属性和页面路由。局部配置文件页面.json ➡ 小程序页面配置文件用于配置当前页面的窗口样式、页面标题等项目配置文件project.config.json ➡ 小程序项目的配置文件用于保存项目的一些配置信息和开发者的个人设置搜索配置文件sitemap.json ➡ 配置小程序及其页面是否允许被微信索引提高小程序在搜索引擎搜索到的概率
下面我们依次来说明一下它们的用途。
2. 全局配置
小程序 app.json 文件是小程序的全局配置文件用于配置小程序的一些全局属性和页面路由。
当小程序启动时会自动读取 app.json 文件中的配置根据配置生成对应的页面和组件、界面表现、网络超时时间、底部 tab在小程序运行过程中起着关键的作用。
2.1 pages
pages 字段用于指定小程序由哪些页面组成用于为了让小程序知道由哪些页面组成以及页面定义在哪个目录每一项都对应一个页面的 路径含文件名 信息。
{pages: [pages/index/index,pages/list/list]
}注意事项 文件名不需要写文件后缀框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理小程序中新增/减少页面都需要对 pages 数组进行修改。未指定 entryPagePath 时数组的第一项代表小程序的初始页面首页 开发小技巧 可以通过配置小程序的页面路径快速生成小程序的页面 详细文档: pages 配置项
2.2 window
window字段 用于设置小程序的状态栏、导航条、标题、窗口背景色。 属性描述类型默认值navigationBarBackgroundColor导航栏背景颜色HexColor#000000navigationBarTextStyle导航栏标题颜色仅支持 black / whitestringwhitenavigationBarTitleText导航栏标题文字内容stringbackgroundColor下拉 loading 的样式仅支持 dark / lightstringdarkenablePullDownRefresh是否开启全局的下拉刷新booleanfalseonReachBottomDistance页面上拉触底事件触发时距页面底部距离单位为 pxnumber50
我们按照下图来配置 window {window: {backgroundTextStyle: light,backgroundColor: #eee,navigationBarBackgroundColor: #f3514f,navigationBarTitleText: 慕尚花坊,navigationBarTextStyle: white,enablePullDownRefresh: true}
}
详细文档: window 配置项
2.3 tabBar
tabBar 字段定义小程序顶部、底部 tab 栏如果小程序是一个多 tab 应用例如可以在客户端窗口的底部或顶部通过 tab 栏可以切换页面可以通过 tabBar 配置项指定 tab 栏的表现以及 tab 切换时显示的对应页面。 tabBar 配置项
属性描述类型默认值colortab 上的文字默认颜色仅支持十六进制颜色HexColorselectedColortab 上的文字选中时的颜色仅支持十六进制颜色HexColorbackgroundColortab 的背景色仅支持十六进制颜色HexColorborderStyletabbar 上边框的颜色 仅支持 black / whitestringblacklisttab 的列表详见 list 属性说明最少 2 个、最多 5 个 tabpositiontabBar 的位置仅支持 bottom / topstringbottom
List 配置项list 是一个数组只能配置最少 2 个、最多 5 个 tabtab 按数组的顺序排序每个项都是一个对象
属性描述类型是否必填pagePath页面路径必须在 pages 中先定义string是texttab 上按钮文字string是iconPath图片路径icon 大小限制为 40kb 建议尺寸为 81px * 81pxstring是selectedIconPath选中时的图片路径icon 大小限制为 40kb 建议尺寸为 81px * 81px不支持网络图片。string是 注意事项 list 是一个数组只能配置最少 2 个、最多 5 个 tab当 position 为 top 时不显示 icon 我们按照下图来配置 tabBar {tabBar: {color: #252933,selectedColor: #FF734C,backgroundColor: #ffffff,borderStyle: black,list: [{text: 首页,iconPath: /assets/tabbar/home.png,selectedIconPath: /assets/tabbar/home-active.png,pagePath: pages/home/home},{text: 列表,iconPath: /assets/tabbar/list.png,selectedIconPath: /assets/tabbar/list-active.png,pagePath: pages/list/list},{text: 购物车,iconPath: /assets/tabbar/cart.png,selectedIconPath: /assets/tabbar/cart-active.png,pagePath: pages/cart/cart},{text: 我的,iconPath: /assets/tabbar/my.png,selectedIconPath: /assets/tabbar/my-active.png,pagePath: pages/my/my}]}
}
详细文档: window 配置项
3. 页面配置
小程序的页面配置也称局部配置每一个小程序页面也可以使用自己的 .json 文件来对本页面的窗口表现进行配置
需要注意的是页面配置文件的属性和 全局配置文件中的 window 属性几乎一致
只不过这里不需要额外指定 window 字段因此如果出现相同的配置项页面中配置项 会覆盖全局配置文件中相同的配置项。
属性描述类型默认值navigationBarBackgroundColor导航栏背景颜色HexColor#000000navigationBarTextStyle导航栏标题颜色仅支持 black / whitestringwhitenavigationBarTitleText导航栏标题文字内容stringbackgroundColor下拉 loading 的样式仅支持 dark / lightstringdarkenablePullDownRefresh是否开启全局的下拉刷新booleanfalseonReachBottomDistance页面上拉触底事件触发时距页面底部距离单位为 pxnumber50 注意事项 页面配置项和 app.json 中的 window 属性几乎一致但这里不需要额外指定 window 字段 {usingComponents: {},navigationBarTitleText: 商品分类,navigationBarTextStyle: white,navigationBarBackgroundColor: #00AF92,enablePullDownRefresh: true,backgroundColor: #eee,backgroundTextStyle: light
}
4. 项目配置文件
通常大家在使用一个工具的时候都会针对各自喜好做一些个性化配置例如 编译配置等等当你换了另外一台电脑重新安装工具的时候你还要重新配置。
考虑到这点小程序开发者工具在每个项目的根目录都会生成一个 project.config.json你在工具上做的任何配置都会写入到这个文件当你重新安装工具或者换电脑工作时你只要载入同一个项目的代码包开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项 project.config.json 文件中配置公共的配置
project.private.config.json 配置个人配置
project.private.config.json 文件同样可以对项目进行配置
project.private.config.json中的相同设置优先级高于project.config.json 注意事项 project.private.config.json 写到 .gitignore 避免版本管理的冲突。 与最终编译结果有关的设置 必须 设置到 project.config.json 中 可以在微信开发者工具点击以下两个配置选项进行相关的设置然后观察两个文件的变化即可。 项目配置文件的配置选项比较多如有需要
大家可以参考详细的官方配置文档项目配置文件
5. 支持使用 sass/less
小程序代码包要求代码文件为 wxml / wxss / js / json / wxs。
如果我们希望使用 sass 或 less 去开发小程序就需要将 sass / less 文件编译成对应的 wxss 文件。
在 project.config.json 文件中修改 setting 下的 useCompilerPlugins 字段为 [sass]即可开启工具内置的 sass 编译插件。 如需同时开启 typescript 编译插件可将该字段修改为 [typescript , sass]。 目前支持三个编译插件typescript、less、sass
{setting: {useCompilerPlugins: [sass]}
}
配置好以后需要将 .wxss 改成 .scss 注意 我们在配置的时候编译插件的名称是 sass但是文件的后缀名是 .scss 这是因为 Sass 是 Css 预处理语言scss 是 Sass 的一个语法版本 官方文档开发辅助支持以编译插件的形式扩展编译功能
6. sitemap.json
微信现已开放小程序内搜索当开发者允许微信索引时微信会通过爬虫的形式为小程序的页面内容建立索引。当用户的搜索词条触发该索引时小程序的页面将可能展示在搜索结果中。
可以通过 sitemap.json 配置或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。语法如下
{rules: [{action: allow,page: *}]
}
常用配置项
属性属性说明属性值action是否允许被搜索可选项有allow 、disallowpage允许/不允许被搜索的页面页面路径或者通配符
// 所有页面都会被微信索引默认情况
{rules: [{action: allow,page: *}]
}
// 配置 path/to/page 页面不被索引其余页面允许被索引
{rules:[{action: disallow,page: path/to/page}]
} 注意事项 没有 sitemap.json 则默认所有页面都能被索引sitemap.json 文件中默认的设置是优先级最低的默认规则所有页面都会被微信索
