一、微信小程序基本介绍
1、什么是微信小程序
微信小程序简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用 小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验
2、发展历程
2016年1月11日，微信之父张小龙解读了微信的四大价值观，指出拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信小程序」 2016年9月21日，微信小程序正式开启内测 2017年1月9日0点，微信第一批小程序正式上线
二.第一个小程序
1、注册小程序
-
注册微信小程序账号：小程序
2、获取小程序的AppID
扫码登录后进入小程序管理后台，左侧栏中选择开发>开发管理>开发设置，就能看到AppID(小程序ID)
3、微信开发者工具
下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档
4、创建小程序项目
5、 查看运行效果
-
在模拟器上查看项目效果:单击编译按钮即可
-
在真机上预览项目效果:单击的预览按钮，然后生成二维码后，使用手机扫描，就可以看到真机的效果了。
6、目录结构解析
-
app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
-
project.config.json 工具配置，例如界面颜色、编译配置等等
-
app.js小程序的初始化脚本，监听小程序生命周期，全局变量，定义API全剧调用
-
app.wxss小程序的全局配置公共样式表
一个小程序页面由四个文件组成，分别是
| 文件类型 | 必需 | 作用 |
|---|---|---|
| js | 是 | 页面逻辑 |
| wxml | 是 | 页面结构 |
| json | 否 | 页面配置 |
| wxss | 否 | 页面样式 |
注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名
三、配置文件
1、配置文件概述
JSON是一种数据格式，在实际开发过程中，JSON总是以配置文件的形式出现，小程序项目中也不例外；通过不同的.json配置文件，可以对小程序项目进行不同级别的配置。
小程序项目中的4种JSON配置文件，分别是
-
项目根目录中的app.json配置文件
-
每个页面文件夹中的.json配置文件
-
项目根目录中的project.config.json配置文件
-
项目根目录中的sitemap.json配置文件
2、project.config.json
project.config.json是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置
-
settings中保存了编译相关的配置
-
projectname中保存的是项目名称
-
appid中保存的是小程序的账号ID
3、sitemap配置
微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。
4、页面配置page.json
页面配置page.json
这里的page.json其实用来表示页面下的page.json,这类和小程序页面的相关的配置
开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等
页面的配置只能设置app.json中部分window配置项的内容，页面中配置项会覆盖app.json额window中相同的配置项
{"usingComponents": {},"navigationBarBackgroundColor": "#f094ff"
}这里修改的是mime.json中导航栏背景色为#f094ff
5、全局配置文件
app.json是当前小程序的全局配置，包括了小程序的所有页面路径，界面表现，网络超时时间，底部tab等。
{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}字段含义
-
pages字段: 用来记录当前小程序所有页面的路径。
-
windows字段：全局定义小程序所有页面的顶部背景颜色，文字颜色定义等。
-
style:全局定义小程序组件所使用的样式版本。
-
sitemapLocation:用来指明sitemap.json的位置。
window字段常用的配置项
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如#000000 |
| navigationBarTextStyle | String | white | 导航栏标题颜色，仅支持black/white |
| backgroundColor | HexColor | #ffffff | 窗口背景色 |
| backgroundTextStyle | String | dark | 下拉loading的样式，仅支持dark/light |
| enablePullDownReferesh | Boolean | false | 是否全局开启下拉刷新 |
| enReachBottomDistance | Number | 50 | 页面上拉触底时间触发时距页面底部距离，单位为px |
6、tabBar配置
1）什么是tabBar
tabBar是移动端常见的效果，用于实现多页面的快速切换。小程序中通常将其分为
-
底部tabBar
-
顶部tabBar
注意：
-
tabBar中只能配置最少2个，最多5个tab页签
-
当渲染顶部tabBar时候，不显示icon，只显示文本
2）tabBar节点的配置项
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| position | String | 否 | tabBar的位置，仅支持bottom/top |
| borderStyle | String | 否 | tabBar上边框的颜色，仅支持black/white |
| color | HexColor | 否 | tab上文字的默认（未选中）颜色 |
| selectedColor | HexColor | 否 | tab上的文字选中时的颜色 |
| backgroundColor | HexColor | 否 | tabBar的背景色 |
| list | Array | 是 | tab页签的列表，最少2个、最多5个 |
-
selectedIconPath:选中时的图片路径
-
iconPath:未选中时的图片路径
在app.json中添加tabBar节点，具体内容如下代码
"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "./assets/icons/home.png","selectedIconPath": "./assets/icons/home_selected.png"},{"pagePath": "pages/category/category","text": "分类","iconPath": "./assets/icons/category.png","selectedIconPath": "./assets/icons/category_selected.png" },{"pagePath": "pages/mine/mine","text": "我的","iconPath": "./assets/icons/mine.png","selectedIconPath": "./assets/icons/mine_selected.png" }]
