全局文件的设置

1.新增一个页面

当你想新建一个页面时，直接在app.json中加入page字段值，如图，保存后，系统自动创建一个页面

2.主界面设置

将主界面文件在app.json中page值放在最前面即可。

3.Window字段常用属性

navigationBarBackgroundColor：顶部导航栏颜色设置

navigationBarTitleText：标题名称

navigationBarTextStyle:“white” 标题字的颜色，只有黑色白色两种颜色

enablePullDownRefresh:true 下拉刷新，将backgroundTextStyle改为dark可以看到刷新时：

backgroundTextStyle：下拉字体颜色

“backgroundColor”: “#0094ff” 下拉时下拉小块背景变色

4.tabbar字段：底部导航栏

  "tabBar": {"list": [{"pagePath": "pagePath","text": "text","iconPath": "iconPath","selectedIconPath": "selectedIconPath"}]  },

pagePath:跳转到的页面路径。和pages的路径一样
text：名称
iconPath：未激活的按钮图标路径：图片路径就是文件夹名/图片名
selectedIconPath：被选中的按钮图标路径

注意：

至少需要两项才能形成导航栏

依次建立导航栏如图所示
更改底部文字默认颜色和被选中时的颜色

注意：

tabBar其他属性是和list属性同级，不要放错

常用属性：

“color”: “#0094ff” , 默认字体颜色

“selectedColor”: “#ff9400”, 被选中后字体颜色

“backgroundColor”: “#ff5533”, 背景颜色

“position”: “bottom” 按钮在底部，在顶部隐藏图标

{"pages":["pages/index/index","pages/img/img","pages/mine/mine","pages/search/search","pages/demo01/demo01","pages/demo02/demo02","pages/logs/logs"],"window":{"backgroundTextStyle":"dark","navigationBarBackgroundColor": "#0094ff","navigationBarTitleText": "我的应用","navigationBarTextStyle":"white","enablePullDownRefresh": true,"backgroundColor": "#0094ff"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "icon/_home.png","selectedIconPath": "icon/home.png"},{"pagePath": "pages/img/img","text": "图片","iconPath": "icon/_img.png","selectedIconPath": "icon/img.png"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "icon/_my.png","selectedIconPath": "icon/my.png"},{"pagePath": "pages/search/search","text": "搜索","iconPath": "icon/_search.png","selectedIconPath": "icon/search.png"}] ,"color": "#0094ff" ,"selectedColor": "#ff9400","backgroundColor": "#ff5533","position": "bottom"},"style": "v2","sitemapLocation": "sitemap.json"
}

微信小程序学习日记day1相关推荐

微信小程序学习日记7
1.微信小程序双线程模型解析: [1]逻辑层和渲染层分开加载,提供了管控型和安全性 [2]沙盒环境运行JS代码,不允许执行任何和浏览器相关的接口,比如跳转页面.操作DOM等 2.Vue的MVVM和小 ...
微信小程序学习日记6
1.WXML冒泡事件列表解析: [1]touchstart:手指触摸动作开始 [2]touchmove:手指触摸后移动 [3]touchcancel:手指触摸动作被打断,如来电提醒,弹窗 [4]to ...
微信小程序学习日记5
1.小程序运行环境运行环境逻辑层渲染层 iOS JavaScriptCore WKWebView 安卓 V8 chromium定制内核小程序开发者工具 NWJS Chrome WebView ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
微信小程序js数组初始化_微信小程序学习Course 3-2 JS数组对象学习
微信小程序学习Course 3-2 JS数组对象学习本节主要介绍JS中的数组. 3-2.1 数组的声明数组声明的方式多种,如下例.一般我们可以先创建一个空数组,然后再填充. var names = ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习（三）：在微信开发者工具中，使用WeUI前端美化框架，微信小程序
微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用网上有很多的方法,我绝大多数都没看懂,这里就是最简单 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...

微信小程序学习日记day1

全局文件的设置

1.新增一个页面

2.主界面设置

3.Window字段常用属性

4.tabbar字段：底部导航栏

注意：

注意：

微信小程序学习日记day1相关推荐

最新文章

热门文章