微信小程序的全局配置

2020-02-23 10:05:48 阅读：283 来源： 互联网

微信小程序的全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。

1.新增页面

新增页面的方式有两种：
第一种方法是，微信小程序的页面配置的路径是在小程序的app.json文件下进行配置的，app.json文件下有个pages的数据，里面可以添加页面的路径，微信开发者工具可以根据pages数组里面的页面路径，自动生成对应的文件目录。
在这里插入图片描述
第二种方法是，可以在微信开发者工具中，在项目的文件结构中的pages文件夹下，可以新建目录，就会有一个新的目录，可以在目录里，新建需要的page。

如果是想让哪个页面在小程序启动时显示哪个页面，可以把页面的路径放置在最前面。

2.window：全局窗口配置

"window": {
    "backgroundTextStyle": "dark", 
    "navigationBarBackgroundColor": "#f66",
    "navigationBarTitleText": "优购",
    "backgroundColor": "#efefef",
    "navigationBarTextStyle": "white",
    "backgroundColorTop": "#0f0",
    "onReachBottomDistance": 50
  },

backgroundTextStyle:下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh：是否开启当前页面下拉刷新。默认值为false。
onReachBottomDistance：页面上拉触底事件触发时距页面底部距离，单位为px。
navigationBarBackgroundColor：导航栏背景颜色。默认值为十六进制。
navigationBarTextStyle：导航栏标题颜色，仅支持 black / white 。
navigationBarTitleText：导航栏标题文字内容。
其余的可以参考微信小程序开发文档。

3.tabBar页面配置

如果小程序是一个多页面的程序，我们可以利用tabBar组件进行页面跳转，点击相应的选项，可以跳转到相应的页面。tabBar,里面有一个list的列表,它是一个数组，里面的每个对象就是一个tab标签，最少要有2个tab。
在这里插入图片描述

{
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "icon/home.png",
        "selectedIconPath": "icon/home_select.png"
      },
      {
        "pagePath": "pages/kind/kind",
        "text": "分类",
        "iconPath": "icon/kind.png",
        "selectedIconPath": "icon/kind_select.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "icon/cart.png",
        "selectedIconPath": "icon/cart_select.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "icon/user.png",
        "selectedIconPath": "icon/user_select.png"
      }

pagePath:需要跳转的路径。
text：tabBar选项，显示的文字。
iconPath:tabBar选项，未选中时的图片。
selectedIconPath：tabBar选项，选中时的图片。

疫情来临，逆战前行！

遇弗发布了1 篇原创文章 · 获赞 0 · 访问量 19 私信关注

标签：微信,程序,tabBar,全局,页面,pages,png,icon
来源： https://blog.csdn.net/qq_42260704/article/details/104455140

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序的全局配置