微信小程序的配置详解

原创 2018年04月16日 20:01:31

配置·小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

app的页面配置

新建一个小程序项目,打开app.json
这里写图片描述
注意页面不需添加后缀名,第一个页面就是程序启动的页面,下面来新建一个页面测试一下。

app.json内的pages进行更改:

"pages":[
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
  ],

保存并编译,程序启动的初始页面现在是这个样子:

app的窗口配置

官方文档给出的窗口配置有以下内容:
这里写图片描述
窗口的初始样式如下:

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }

下面对app.json中的window进行简单修改。

    "backgroundTextStyle":"dark",      // 仅支持light和dark
    "navigationBarBackgroundColor": "#abc",
    "navigationBarTitleText": "窗口配置",
    "navigationBarTextStyle":"white"   // 仅支持black和white
  }

app的tabBar配置

将官方文档tabBar的示例代码放进我们的小程序中。

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },

注意tabBar中的两个页面其中必须有一个是启动页面。

这里写图片描述
下面尝试给tabBar添加一些图片,可以找自己喜欢的图片,放在项目的文件夹中。



    "color" : "#7F7",
    "borderStyle" : "white",    // 仅支持white和black

网络超时配置及debug开启配置

网络超时的示例代码:

  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
   "debug": true   // 只有开启与关闭

这里写图片描述
开启了debug后,程序启动后控制台会有如下输出日志:
这里写图片描述

页面配置

我们可以在任何一个页面的文件夹下新建一个json问价,在此json中写入的配置会覆盖app.jsonwindow·内的同名配置。
这里写图片描述

每个页面单独的wxss也是可以覆盖app.wxss中的内容。

微信小程序学_配置详解

  • 2016年10月31日 00:03
  • 15KB
  • 下载

微信小程序地图map的markers属性polyline属性controls属性全解析教程

第一:JS页面 // pages/about/about.js Page({ /** * 页面的初始数据 */ data: { markers: [{ ...
  • cplvfx
  • cplvfx
  • 2017-11-02 18:58:39
  • 487

3步搭建微信小程序服务端环境笔记

本实践笔记基于nginx+uwsgi+django微信小程序提供的业务服务 1,配置nginx服务支持https协议2,在django项目根目录下创建wechatapp_wsgi_debug.ini...
  • wxm6614
  • wxm6614
  • 2017-02-19 17:02:56
  • 3775

微信小程序开发说明相关文档

  • 2018年02月07日 17:10
  • 463KB
  • 下载

微信小程序指南

  • 2017年12月13日 18:16
  • 6.6MB
  • 下载

微信小程序进阶篇

微信小程序
  • deepquiet
  • deepquiet
  • 2017-05-30 21:23:52
  • 2073

微信小程序

  • 2017年11月06日 22:01
  • 529KB
  • 下载

微信小程序商城

  • 2018年04月13日 11:40
  • 592KB
  • 下载

微信小程序 Node.js (基础七) Stream(流)

Stream 是一个抽象接口,Node 中有很多对象实现了这个接口。 Node.js,Stream 有四种流类型: Readable - 可读操作。 Writable - 可写操作。 Duplex ...
  • xiaochun365
  • xiaochun365
  • 2017-07-04 18:11:29
  • 412

微信小程序开发详解(九)---微信小程序布局基础

1:Flex布局 Flex布局如图1所示 图1 1.1 Flex容器属性 1.2 Flex容器内元素属性
  • aoaoxiexie
  • aoaoxiexie
  • 2017-01-03 09:30:41
  • 27731
收藏助手
不良信息举报
您举报文章:微信小程序的配置详解
举报原因:
原因补充:

(最多只允许输入30个字)