一、开发文件结构

1.根目录下有三个文件：app.js,app.json和app.wxss。一个小程序项目必须有的三个描述App的文件。这三个文件是应用程序级别的文件。这3个文件的意义：

表1.1  app.js,app.json和app.wxss文件的含义
文件 必填 作用
app.js 是 小程序逻辑文件
app.json 是 小程序配置文件
app.wxss 否 全局公共样式文件

2.和这三个应用程序级别文件平行的pages文件夹。一个小程序由若干个页面文件构成。每个页面由4个文件构成，分别是：.js,.json,.wxml和.wxss文件。这4个文件意义：

表1.2  .js,.wxml,.wxss和.json文件的含义
文件 必填 作用
.js 是 页面逻辑
.json 否 页面配置
.wxml 是 页面结构
.wxss 否 页面样式表

二、配置程序：

1.app.json文件是小程序最基本的全局配置文件，它决定页面文件的路径（路由）、窗口表现、设置网络超时时间、设置多Tab等。对于app.json的具体配置如下表：

表2.1 app.json配置项
属性 类型 必填 描述
pages String Array 是 设置页面路径
window Object 否 设置默认页面的窗口表现
tabBar Object 否 设置底部tab表现
networkTimeout Object 否 设置网络超时时间
debug Boolean 否 设置是否开启debug模式

1).pages:

pages接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的（路径+文件名）信息，数组的第一项代表小程序的初始页面。例如：在app.json配置：

{
"pages":["pages/index/index""pages/logs/logs"]
}

2).window

window属性用于设置小程序的状态栏、导航条、标题、窗口背景色、具体含义及配置如表2.2

表2.2  window属性及配置
属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色
navigationBarTextStyle String white 导航栏标题颜色，仅支持dark/white
navigationBarTitleText String 无 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字体、loading图的样式、仅支持dark/white
enablePullDownRefresh Boolean false 是否开启下拉刷新

3).tabBar

tabBar

用于配置小程序的菜单选项。tabBar是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序，其具体配置属性如表2.3

表2.3  tabBar属性配置
属性 类型 必填 默认值 描述
color HexColor 是   tab上的文字默认颜色
selectedColor HexColor 是   tab上的文字选中时颜色
backgroundColor HexColor 是   tab的背景颜色
borderStyle String 否 black tabBar上边框的颜色，仅支持black/white
list Array 是   tab的列表，详见表2.4
position String 否 bottom 可选值bottom、top

tabBar的属性list是一个数组，数组中的每一项都是一个对象，属性表如表2.4

表2.4  list属性
属性 类型 必填 说明
pagePath String 是 页面路径，必须在pages中先定义
text String 是 tab上按钮的文字
iconPath String 是 图片路径，icon大小限制为40KB，建议尺寸为81px * 81px
selectediconPath String 是 选中时的图片路径，icon大小限制为40KB，建议尺寸为81px * 81px

例如：将两个页面链接指向首页和日志页：

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

4).networkTimeout

networkTimeout属性可以设置各种网络请求的超时时间，具体属性如表2.5

表2.5  networkTimeout属性
属性 类型 必填 说明
request Number 否 wx.request的超时时间，单位毫秒，默认为：60000
connectSocket Number 否 wx.connectSocket的超时时间，单位毫秒，默认为：60000
uploadFile Number 否 wx.uploadFile的超时时间，单位毫秒，默认为：60000
downloadFile Number 否 wx.downloadFile的超时时间，单位毫秒，默认为：60000

2.page.json

每一个小程序页面可以使用.json文件来对本页面的窗口表现进行配置，页面中配置项会覆盖app.json的window中相同的配置项。page.json配置属性如表2.6

表2.6  page.json的配置属性
属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色
navigationBarTextStyle String white 导航栏标题颜色，仅支持dark/white
enablePullDownRefresh Boolean false 是否开启下拉刷新
backgroundTextStyle String dark 下拉背景字体、loading图的样式、仅支持dark/white
backgroundColor HexColor #ffffff 窗口的背景色
navigationBarTitleText String 无 导航栏标题文字内容
diaableScroll Boolean false 设置为true，则页面整体不能上下滚动

仅是自己在学微信小程序的笔记。

转载于:https://www.cnblogs.com/Lia-633/p/7808849.html

微信小程序开发-笔记相关推荐

  1. 微信小程序开发笔记，你收藏了吗？

    ** 微信小程序开发笔记,你收藏了吗? ** 最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看. 开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果 ...

  2. 微信小程序开发笔记 进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）

    文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.云函数 五.程序流程 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...

  3. 微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）

    文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程 六.参考 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...

  4. 微信小程序开发笔记二（WXSS和CSS样式美化）

    微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...

  5. 微信小程序开发笔记——wsdchong

    微信小程序开发笔记 一.小程序简介 小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...

  6. 微信小程序开发笔记 进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用

    文章目录 一.前言 二.onfire.js介绍 三.API介绍 四.实例应用 五.onfire源码 六.实例源码 一.前言 微信小程序开发笔记--导读 二.onfire.js介绍 一个简单实用的事件订 ...

  7. 微信小程序开发笔记 进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）

    文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程 六.参考 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...

  8. 微信小程序开发笔记 支付篇②——微信小程序通过小程序云实现微信支付功能

    文章目录 一.前言 二.开通微信支付 2.1 关联商户号 2.2 添加商户号 2.3 管理员授权 三.云函数开发 3.1 新建云函数 3.2 云函数代码 3.3 云函数上传并部署 四.小程序调用 4. ...

  9. 微信小程序开发笔记（1.1）滚动选择器picker的使用

    微信小程序开发笔记(1.1)滚动选择器picker的使用 前言 滚动选择器picker 普通选择器 多列选择器 时间选择器 日期选择器 省市区选择器 前言 最近被拉来做小程序,因为时间比较赶,其他方面 ...

  10. 微信小程序开发笔记—设置页面密码

    文章目录 一.功能概述 二.实现效果 三.实现方法 1.新建个人登陆页面 2.设计密码获取判别函数和响应函数 1)定义变量 2)设计密码获取判别函数 3)设计响应函数 3.设计页面内容 1)input ...

最新文章

  1. JSON数据的HTTP Header应该怎么标记？
  2. 研究揭示动物社交欲望的神经机制
  3. 4 weekend110的hdfs下载数据源码跟踪铺垫 + hdfs下载数据源码分析-getFileSystem（值得反复推敲和打断点源码）...
  4. js事件流、事件代理等
  5. JAVA多线程和并发
  6. mysql添加有效值_物理数据库设计 - 限定列的有效值
  7. 使用seaborn制图（箱型图）
  8. paip.互联网产品要成功的要素
  9. flash builder4.6 集成svn1.8报错
  10. 乐1s 乐视X501_官方线刷包_救砖包_解账户锁
  11. AD18导出BOM清单报错
  12. Potplayer如何显示书签，书签编辑器
  13. BGP Confederation(BGP联邦)
  14. MySQL再叙（体系结构、存储引擎、索引、SQL执行过程）
  15. 【无标题】 R语言下载keras最新方法
  16. 会议平板怎么选？智能会议平板功能大全，购前必阅
  17. Linux 重启网络服务
  18. Oracle Essbase入门系列（一）
  19. uview + uni-app 开发app，密码显示隐藏功能不生效
  20. 夯实第一超市地位 京东超市成超10大品类超50家品牌线上最大渠道

热门文章

  1. Python模块学习：threading 多线程控制和处理
  2. 【转】感知哈希算法——找出相似的图片
  3. HDU1074 Doing Homework
  4. 快速理解VirtualBox的四种网络连接方式
  5. 在线广告清除之不分页增强版
  6. lovely desktop
  7. 提取LSA密码lsadump
  8. ​Xamarin iOS教程之自定义视图
  9. 在VMware Workstation上安装Kali Linux
  10. Unity网络多玩家游戏开发教程第1章Unity自带网络功能