2-3 原生小程序 - 项目app.json配置
App.json它其实有四五个配置,但是最重要的是pages、windows和tabbar。tabbar是做导航的处理的。
官方推荐的入门配置之一:
app.json
它其实有一些字段是限制了这个格式和限制了字段的。pages目录其实就是页面,小程序到底有几个页面。
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
第一个就是我们的首页index。如果把logs放到第一个。
{
"pages":[
"pages/logs/logs",
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
刷新之后就会知道跳到启动日志。
pages不用管太多了,后面Vue.js那个库里面会自动帮我们生成。这是page目录,后面讲到我们使用的框架的时候会继续介绍。
window要配置的地方就比较多了。window主要就是用来设置我们小程序全局的状态栏,导航条,它的标题啊以及窗口的背景色。
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
扫码预览可以在手机里看到小程序简单的一个样式了。
backgroundColor和navigationBarBackgroundColor到底是什么关系?以及底下这个
backgroundColorBottomString#ffffff底部窗口的背景色,仅 iOS 支持微信版本 6.5
又是什么意思呢?
修改一下navigationBarBackgroundColor试试
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#d22222",
修改一下字体
"navigationBarTitleText": "imooc",
"navigationBarTextStyle":"light"
}
设置一下下拉刷新为true。露出来的可以认为是窗口的背景色。
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#d22222",
"navigationBarTitleText": "imooc",
"navigationBarTextStyle":"light",
"enablePullDownRefresh":true
}
把backgroundColor也设置成这个颜色。注意到下拉刷新整个出来的样式也是红色的。
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#d22222",
"navigationBarTitleText": "imooc",
"navigationBarTextStyle":"light",
"enablePullDownRefresh":true,
"backgroundColor":"#d22222"
}
tabbar就是设置底下的导航。
就像微信一样,你要有一个导航栏。tabbar是什么颜色?选中是什么颜色?或者背景色,边框等等。还有一个list,就是具体的每个导航的内容。
tabbar,list是具体内容。
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text":"日志"
} ]
}
设置一下tabBar的color。
"tabBar": {
"color": "#d22222",
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text":"日志"
} ]
2-3 原生小程序 - 项目app.json配置的更多相关文章
- 如何把原生小程序项目合并的mpvue项目中
当时的情景是这样的: 使用mpvue写微信小程序,写着写着项目写到一半了,突然间不想这样继续写了,想切换回原生小程序语法去写剩余部分. 如下图,红色框里的功能是已经用mpvue完成的功能,绿色框部分的 ...
- 微信小程序:app.json中通过使用扩展库userExtendedLib的方式,引入并使用weui
微信小程序 PK APP: 1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾:而推⼴app的成本太⾼. 2.微信小程序也可以跨平台(Android和IOS). 一.project. ...
- 微信小程序--代码构成---JSON 配置
在上一章中,我们通过开发者工具快速创建了一个 QuickStart 项目.你可以留意到这个项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 ...
- 开发指南~小程序代码构成~JSON配置
2.1 JSON 配置 JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色. 2.1.1 一个例子 先看一个例子,打开开发工具的编辑器,在根目录下可以找到 app.j ...
- 小程序之app.json not found
起因 最近在部署几款小程序时,发现ext.json文件会被忽略不上传,查了一下资料发现原来是需要升级开发者工具了. 没想到升级以后,再开发项目时,就报错 app.json not found 解决方法 ...
- 微信小程序报“app.json”错误解决办法
1.亲测 “app.json未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译.” 是由于新创建的界面xxx.json所在的文件夹为0KB造成的,你可以试着在xxx.json文件内 ...
- 微信小程序 project.config.json 配置
可以在项目根目录使用 project.config.json 文件对项目进行配置. miniprogramRoot Path String 指定小程序源码的目录(需为相对路径) qcloudRoot ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉
前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05-日历组件的实现 4. 微信小程序开发04-打造自 ...
- Java Web项目,Android和微信小程序的初始页面配置
Java Web项目 我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...
随机推荐
- <input type="button" /> 和<input type="submit" /> 的区别
<input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会发生.<input type="s ...
- this关键字的由来及使用
Student.java /* * 学生类 * * 起名字我们要求做到见名知意. * * 如果有局部变量名和成员变量名相同,在局部使用的时候,采用的是就近原则. * *我们有没有办法吧局部变量的nam ...
- xtu summer individual 5 F - Post Office
Post Office Time Limit: 1000ms Memory Limit: 10000KB This problem will be judged on PKU. Original ID ...
- golang函数指针的效果
package main import ( "fmt" ) func fun1(key string) { fmt.Printf("fun11 key=%s\n" ...
- POJ 2411_Mondriaan's Dream
题意: 用1*2和2*1的方块将给定长宽的矩形填满.问有多少种放法,对称的算两种. 分析: 状态压缩dp 首先用0表示前一行没有竖块占用这个位置,而1表示该位置和他上方的位置放了一个竖块,从而压缩状态 ...
- [bzoj4519][Cqoi2016]不同的最小割_网络流_最小割_最小割树
不同的最小割 bzoj-4519 Cqoi-2016 题目大意:题目链接. 注释:略. 想法: 我们发现这和最小割那题比较像. 我们依然通过那个题说的办法一样,构建最小割树即可. 接下来就是随便怎么处 ...
- Divide Two Integers(模拟计算机除法)
Divide two integers without using multiplication, division and mod operator. 由于不能用乘号,除号,和取余.那么一个数除另外 ...
- springboot+idea+maven学习第一天(springboot入门,idea整合maven)
1.springboot简介 简化Spring 用用开发的一个框架: 真个S僻壤技术栈的一个大整合 j2ee开发的一站式解决方案 2.微服务 微服务:是一种架构风格 一个应用应该是一组小型服务:可以通 ...
- NA交换①
常用的交换设备: 交换机(ASIC)和网桥(Brigde): 交换机的三种转发方式: 直通式(Cut-Through):一旦检测到MAC即转发,速度快但是无法保证准确性: ...
- C#中Stack<T>类的使用及部分成员函数的源代码分析
Stack<T>类 Stack<T> 作为数组来实现. Stack<T> 的容量是 Stack<T> 能够包括的元素数. 当向 Stack<T&g ...