微信小程序概述 小程序介绍 微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用。小程序和微信原生功能应用在本质上都是——Web App 小程序优势 微信有海量用户，依赖性很强，微信开发的产品更容易触达用户 推广app或公众号成本太高 开发适配成本低 容易小规模试错，快速迭代 跨平台 对于创业者的优势 App流量成本太高 移动互联网格局基本已定，用户主要需求场景已被巨头把持 面向所有产品对用户时间的竞争 开发环境的准备 注册过程简单，略过 下载微信开发者工具 前往官网进行下载，或者[代码][点我](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)[代码]！！！ 下载后新建项目，进去之后的界面是这样子的： [图片] 小程序的结构目录 小程序框架的目标是尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。 小程序框架提供了自己的视图层描述语言[代码]WXML[代码]和[代码]WXSS[代码]，以及[代码]JavaScript[代码]，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑 小程序文件结构和传统Web对比 结构 传统Web 微信小程序 结构 HTML WXML 样式 CSS WXSS 逻辑 JavaScript JavaScript 配置 无 JSON 通过以上对比得出，传统Web是三层结构。而微信小程序是四层结构，多了一层[代码]配置.json[代码] 基本的项目目录 话不多说，先看下图： [图片] 这个图已经解释的非常明了了，下面对各个文件进行详细的介绍。 配置文件的介绍 一个小程序应用程序会包括最基本的两种配置文件。一种是全局的[代码]app.json[代码]和页面自己的[代码]page.json[代码] 特别注意：配置文件中不能出现注释 全局配置[代码]app.json[代码] [代码]app.json[代码]是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。在我们最开始创建的项目里，[代码]app.json[代码]大概是这样的： [代码]{ "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json" } [代码] 下面是[代码]app.json[代码]的一些属性： [代码]pages[代码]属性 [代码]pages[代码]属性包含了小程序的所有目录，例如在最开始的代码中： [代码] "pages": [ "pages/index/index", "pages/logs/logs" ], [代码] 这里面包含了两个页面，一个是index页面，一个是logs（日志）页面，如果我们想增加新的页面，只需要在这个属性里面添加一个路径就好了，文件目录也会帮助我们自动生成一个页面；例如，新增一个index2页面，在代码中添加： [代码]"pages/index2/index2", [代码] 整个[代码]pages[代码]属性是这样的： [代码] "pages": [ "pages/index/index", "pages/index2/index2", "pages/logs/logs" ], [代码] 我们点击保存[代码]ctrl + s[代码]，就会发现目录栏中多了一个文件夹，如下图所示： [图片] 哪个页面放在[代码]pages[代码]最上面，哪个就会先显示出来 比如，我们把logs页面放在最上面，即 [代码] "pages": [ "pages/logs/logs", "pages/index/index", "pages/index2/index2" ], [代码] 点击保存后，会发现，日志页面出现了最上面，这里不再贴图，读者自己动手实践！！！ [代码]window[代码]属性 用于设置小程序的状态栏、导航条、标题、窗口背景色。在最开始的代码中： [代码] "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, [代码] 最开始的[代码]window属性[代码]包含了[代码]backgroundTextStyle[代码]、[代码]navigationBarBackgroundColor[代码]、[代码]navigationBarTitleText[代码]、[代码]navigationBarTextStyle[代码]，下表展示了[代码]window[代码]的所有属性: 属性 类型 默认值 描述 navigationBarBackgroundColor HexColor #000000 导航栏背景颜色 navigationBarTextStyle string white 导航栏标题颜色，仅支持 [代码]black[代码] / [代码]white[代码] navigationBarTitleText string 导航栏标题文字内容 navigationStyle string default 导航栏样式，仅支持以下值：[代码]default[代码] 默认样式、[代码]custom[代码] 自定义导航栏，只保留右上角胶囊按钮 backgroundColor HexColor #ffffff 窗口的背景色 backgroundTextStyle string dark 下拉 loading 的样式，仅支持 [代码]dark[代码] / [代码]light[代码] backgroundColorTop string #ffffff 顶部窗口的背景色，仅 iOS 支持 backgroundColorBottom string #ffffff 底部窗口的背景色，仅 iOS 支持 enablePullDownRefresh boolean false 是否开启全局的下拉刷新 onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离，单位为 px pageOrientation string portrait 屏幕旋转设置，支持 [代码]auto[代码] / [代码]portrait[代码] / [代码]landscape[代码] 下面是对[代码]window[代码]属性的几个属性的调用演示： 例如，把导航栏标题颜色改为蓝色，把标题改为[代码]你妈喊你回家吃饭啦[代码]，顺便把导航栏标题颜色改为白色，然后加一个下拉刷新功能，只需要在[代码]window[代码]里面加几个属性就可以了~~ [代码] "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#4e91f6", "navigationBarTitleText": "你妈喊你回家吃饭啦", "enablePullDownRefresh": true, "navigationBarTextStyle": "white" }, [代码] 代码已经写好，来看一下效果好了，下面是一张gif图： [图片] [代码]tabBar[代码]属性 如果小程序是一个多tab应用（底部或顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。下表是tab的属性： 属性 类型 必填 默认值 描述 color HexColor 是 tab 上的文字默认颜色，仅支持十六进制颜色 selectedColor HexColor 是 tab 上的文字选中时的颜色，仅支持十六进制颜色 backgroundColor HexColor 是 tab 的背景色，仅支持十六进制颜色 borderStyle string 否 black tabbar 上边框的颜色， 仅支持 [代码]black[代码] / [代码]white[代码] list Array 是 tab 的列表，详见 [代码]list[代码] 属性说明，最少 2 个、最多 5 个 tab position string 否 bottom tabBar 的位置，仅支持 [代码]bottom[代码] / [代码]top[代码] custom boolean 否 false 自定义 tabBar 其中[代码]list[代码]接受一个数组，只能配置最少2个、最多5个tab。tab按数组的顺序排序，每个项都是一个对象，下表是[代码]list[代码]的属性值： 属性 类型 必填 说明 pagePath string 是 页面路径，必须在 pages 中先定义 text string 是 tab 上按钮文字 iconPath string 否 图片路径，icon 大小限制为 [代码]40kb[代码]，建议尺寸为 81px * 81px，不支持网络图片。当 [代码]position[代码] 为 [代码]top[代码] 时，不显示 icon selectedIconPath string 否 同上 下面通过一个样例演示一下[代码]tab[代码]的作用： 这次我想加一个底部栏，栏目里面有[代码]首页[代码]和[代码]日志[代码]两个选项，并且底部栏和导航栏的颜色一致，并且要有四个图标，其中两个作为未被选中时的的图标，另外两个作为被选中时的图标。这里给大家推荐一个网站：https://www.easyicon.net/ 这个网站上有大量icon图标哟~ [代码]"tabBar": { "color": "#000", "selectedColor": "#000000", "backgroundColor": "#4e91f6", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "icon/index.png", "selectedIconPath": "icon/Selindex.png" }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "icon/log.png", "selectedIconPath": "icon/Sellog.png" } ] } [代码] 效果请见下方gif图： [图片] 选的icon略丑，请忽略我的审美………… 页面配置’page.json’ 每个小程序页面也可以使用[代码].json[代码]文件来对本页面的窗口表现进行配置。页面中的配置项在当前页会覆盖[代码]app.json[代码]的[代码]window[代码]中相同的配置项。 我们先看下表[代码]app.json[代码]的各种属性： 属性 类型 默认值 描述 navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 [代码]#000000[代码] navigationBarTextStyle string white 导航栏标题颜色，仅支持 [代码]black[代码] / [代码]white[代码] navigationBarTitleText string 导航栏标题文字内容 navigationStyle string defalut 导航栏样式，仅支持以下值：[代码]default[代码] 默认样式，[代码]custom[代码] 自定义导航栏，只保留右上角胶囊按钮 backgroundColor HexColor [代码]#ffffff[代码] 窗口背景色 backgroundTextStyle string dark 下拉 loading 的样式，仅支持 [代码]dark[代码] / [代码]light[代码] backgroundColorTop string [代码]#ffffff[代码] 顶部窗口的背景色，仅 iOS 支持 backgroundColorBottom string [代码]#ffffff[代码] 底部窗口的背景色，仅 iOS 支持 enablePullDownRefresh boolean false 是否开启当前页面下拉刷新 onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离，单位为px pageOrientation string portrait 屏幕旋转设置，支持 [代码]auto[代码] / [代码]portrait[代码] / [代码]landscape[代码] disableScroll boolean false 设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 [代码]app.json[代码] 中设置 usingComponents Object 否 页面自定义组件配置 上表就是[代码]page.json[代码]的所有属性，现在我们来举几个例子： 我们把index2界面设为首页，并且把该页面的导航栏颜色改为浅灰色参考值：[代码]#928d8d[代码]，然后在把该界面的导航提示文字改为[代码]index2-页面2[代码] 实现代码： [代码]{ "usingComponents": {}, "navigationBarTitleText" : "index2-页面2", "navigationBarBackgroundColor": "#928d8d" } [代码] 然后来看一下界面效果： [图片] ok，本次结束……下次再见喽