微信小程序

小程序代码构成

JSON配置
WXML模板
WXSS样式
JS逻辑

1、JSON配置

小程序配置 app.json

app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

pages字段

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段

用于设置小程序的状态栏、导航条、标题、窗口背景色。定义小程序所有页面的顶部背景颜色,文字颜色定义等。

tabBar字段

客用于定义户端窗口的底部或顶部有 tab 栏可以切换页面,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象

代码:

{
  "pages":[
    "pages/aboutme/aboutme",
    "pages/index/index",
    "pages/logs/logs"
    //路径先后顺序决定页面先后顺序
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ccc",
    "navigationBarTitleText": "微信",
    "navigationBarTextStyle":"white"
  },
 "tabBar": {
   "color":"#fff",
   "selectedColor":"#fff",
   "backgroundColor":"#ccc",
   "borderStyle":"black",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }
  ]
}
}

工具配置 project.config.json

通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。

考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

JSON 语法

这里说一下小程序里JSON配置的一些注意事项。

JSON文件都是被包裹在一个大括号中 {},通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中,在实践中,编写 JSON 的时候,忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。

  1. 数字,包含浮点数和整数
  2. 字符串,需要包裹在双引号中
  3. Bool值,true 或者 false
  4. 数组,需要包裹在方括号中 []
  5. 对象,需要包裹在大括号中 {}
  6. Null

还需要注意的是 JSON 文件中无法使用注释,试图添加注释将会引发报错。

微信小程序day01-JSON配置的更多相关文章

  1. 微信小程序 app.json 配置

    我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了所有配置选项的简单配置app.json : { " ...

  2. 微信小程序 | app.json配置属性

    app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. widows: 用于设置小程序的状态栏.导航条.标题.窗口背景色. navig ...

  3. 微信小程序app.json配置

    找到app.json文件,找到window配置项 1.windows选项下导航栏样式 "navigationBarBackgroundColor":#F6F6F6 // 导航栏的背 ...

  4. 微信小程序 - app.json配置解析

    { "pages": [ "pages/index/index", "pages/logs/logs", "pages/login ...

  5. 微信小程序:页面配置 page.json

    微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...

  6. 微信小程序:工具配置 project.config.json

    微信小程序:工具配置 project.config.json 一.项目配置文件project.config.json 小程序开发者工具在每个项目的根目录都会生成一个 project.config.js ...

  7. 微信小程序:全局配置app.json

    微信小程序:全局配置app.json 一.全局配置app.json app.json文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包 ...

  8. 微信小程序app.json文件常用全局配置

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. JOSN文件不允许注释,下面为了学习加上注释,粘贴需要的片段 ...

  9. 微信小程序 (全局配置和页面配置)

    全局配置 app.json 文件用来对微信小程序进行全局配置. 一.配置页面路径 二.window 配置全局默认的窗口 navigationBarTextStyle:导航栏的标题颜色 navigati ...

  10. 微信小程序——2、配置json文件

    配置文件详解 主配置文件app.json 主配置文件位于主目录中,用于进行全局配置.包括页面文件的路径.窗口表现.设置网络超时时间.设置多tab等 下面通过微信最初自带小程序来学习 { "p ...

随机推荐

  1. PHP递归获取二维数组中指定key的值

    $data = [ "resulterrorCode" => 0, "resultraw" => [ "result" => ...

  2. MYSQL根据节点向上和向下查询所有节点

    WITH cte AS ( SELECT * ,UnitID AS level FROM UnitTable WHERE UnitID=2 UNION ALL SELECT g.*,level+1 F ...

  3. 关于jQuery的append方法不能多次添加同一个DOM元素的解决方法

    资料来自:https://segmentfault.com/q/1010000007677851?_ea=1419689 append()方法在jQuery中是使用appendChild()实现的,实 ...

  4. RabbitMQ原理图

    一.RabbitMQ 原理图 二.Rabbit 交换器讲解 1 Direct 交换器(发布与订阅 完全匹配)                       1.2搭建环境               1 ...

  5. docker-compose模板文件参数说明

    working_dir:一般这个参数用在应用程序Services下,我们指定应用程序所在的目录为当前目录,类似linux中的cd working_dir.其余的参数,例如command等就是基于此参数 ...

  6. 2018-2019-2 网络对抗技术 20162329 Exp2 后门原理与实践

    目录 1.实践基础 1.1.什么是后门 1.2.基础问题 2.实践内容 2.1.使用netcat获取主机操作Shell,cron启动 2.2.使用socat获取主机操作Shell, 任务计划启动 2. ...

  7. Java 平时作业四

    编写一个Java程序实现返回指定目录及其子目录下扩展名为*.pdf的所有文件名. 扩展: isFile public boolean isFile() 测试此抽象路径名表示的文件是否为普通文件. 如果 ...

  8. ubuntu系统下matplotlib中文乱码问题

    参考 [ubuntu系统下matplotlib中文乱码问题 - CSDN博客](https://blog.csdn.net/jeff_liu_sky_/article/details/54023745 ...

  9. CentOS 7.3/Linux .net core sdk 安装

    执行下列命令,安装.NET Core SDK(微软官方教程地址 https://www.microsoft.com/net/learn/get-started/linuxcentos) 点开链接,选择 ...

  10. 2.9 linux学习(1)

    2019-2-9 16:07:44 学一下Linux,多学一点东西 新认识个老师,超哥 很牛逼感觉! https://www.cnblogs.com/pyyu/p/9276851.html 这是入门参 ...