小程序的相关配置

目录

1、project 和 sitemap 配置

2、全局配置 app

3、局部配置 page


小程序的很多开发需求被规定在了配置文件中,这样做可以更有利于提高的开发效率,并且可以保证开发出来的小程序的某些风格是比较一致的,比如导航栏、顶部TabBar,以及页面路由等等。

小程序中有很多配置,其大致可以分为三类:(1)project 和 sitemap 配置(2)全局配置 app(3)局部配置 page。下面具体对这几种配置进行说明,这是小程序官方文档关于相关配置的链接:配置小程序

1、project 和 sitemap 配置

(1)project.config.json:项目配置文件,比如项目名称、appid 等;

这个配置文件记录了小程序的一些关于项目的相关配置(在小程序开发工具的详情按钮中可以对一些配置进行修改),其实早期的小程序项目是没有这个配置文件的,但是如果没有这个配置文件就会出现 多端配置不一致的问题。比如当你和同事协同开发一款小程序的时候,他用的是 2.7.0 版本开发的,而你默认的是 2.7.1 版本,这种情况就需要其中一个人进行手动配置,这样会造成不必要的麻烦,因此微信考虑到了这种情况,保证一个项目中只有一种配置,这就是 project.config.json 的作用。

(2)sitemap.json:小程序搜索相关的配置;

这个配置文件是用来配置小程序及其页面是否允许被微信索引的,当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。用户也可以自行配置具体哪些页面允许被索引,详细请参考官方文档:sitemap 配置

一般企业开发的小程序都是默认允许被微信索引的,因为这样可以提高小程序的曝光了,这也就意味着利润。这个设置可以在微信公众平台的设置找到:微信公众平台 — 设置 — 页面收录设置。

2、全局配置 app

app.json 是整个小程序的入口,该文件中的 pages 属性主要是配置小程序中都有哪些页面,除了 pages 之外这里面将配置一些全局的配置,具体的各个配置项可以查看一下官方文档:传送门。下面具体说一下几个比较重要的配置项:

属性 类型 必填 描述
pages String 页面路径列表
window Object 全局的默认窗口表现
tabBar Object 底部tab栏的表现

(1)pages:页面路径列表,用于指定小程序由哪些页面组成,每一项都对应一个页面的路径信息,小程序中所有的页面都是必须在 pages 中进行注册的(其实这一步编译器会自动配置)。

小技巧:小程序新加页面的时候一般现在根目录下新建一个文件夹,然后右键文件夹新建 Page,编译器即会在 app.json 文件中的 pages 属性上增加该页面的路径配置,不需要手动进行配置。也可以在 app.json 文件中的 pages 属性手动写上一个需要新建的页面的路径,Ctrl + s 保存一下,即可生成新的页面文件。

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

(2)window:全局的默认窗口展示口用户指定窗口如何展示,下面说一下几个主要的属性及属性值,具体的:官方文档

"window":{
    "navigationBarBackgroundColor":"#ff5777",  //导航栏背景颜色,值只能是16进制
    "navigationBarTextstyle":"white",          //导航栏的bar的文字颜色,黑或白色
    "navigationBarTitleText":"我的小程序",      //导航栏的title标题文字
    "backgroundColor":"#ffedee",              //下拉刷新的背景颜色,值可是单词或16进制
    "backgroundTextStyle":"light",             //下拉刷新的进度动画颜色,light/dark
    "enablePullDownRefresh":false              //是否支持下拉刷新,默认是不支持的
    //enablePullDownRefresh属性在全局中一般设置成false,如果哪个页面需要刷新,可以在单个页面的配置文件中进行设置
}

(3)tabBar:底部 tab 栏的展示,tabBar 对象中有一个 list 数组,数组中存放一个个对象,每个对象代表一个底部导航栏的 item ,默认情况下 list 数组中至少要保证有 item 两个对象,一般情况下是 4 个 item,具体属性可以查看官方文档

选中状态 or 默认状态图标的图片,一般会在项目根目录下新建一个 assets 文件夹,里面存放相关的图片等资源。

"tabBar":{
    "selectedColor":"#ff5777",    //tabbar的每一项的文字选中状态的颜色
    "list":[
        {
            "pagePath":"pages/home/home",    //指向的页面路径
            "text":"首页",                   //tabbar的每一项的text文字
            "iconPath":"assets/tabbar/home.png",     //选中状态显示的图标
            "selectedIconPath":"assets/tabbar/home_active.png"  //默认状态显示的图标
        },        
        {
            "pagePath":"pages/profile/profile",  //指向的页面路径
            "text":"我的",                       //tabbar的每一项的text文字
            "iconPath":"assets/tabbar/profile.png",     //选中状态显示的图标
            "selectedIconPath":"assets/tabbar/profile_active.png"  //默认状态显示的图标
        },
    ]
}

3、局部配置 page

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置,页面中配置项在当前页面会覆盖 app.json 的 window属性 中相同的配置项,详情查看官方文档

{
    "usingComponents":{},                    //自定义组件
    "navigationBarTitleText":"我的界面",
    "navigationBarBackgroundColor":"#ffeeee",
    "enablePu1lDownRefresh":true             //是否支持下拉刷新
}
发布了188 篇原创文章 · 获赞 13 · 访问量 7244

猜你喜欢

转载自blog.csdn.net/Marker__/article/details/103807933
今日推荐