版权声明：本文是博客的原始文章。请注明转载来源[作者：成为世界上孤独的国王]
前言：由于项目要求，我需要开发微信小程序（我以前从未接触过它，小白是其中之一），并使用SSH来构建背景。因此，请记录每个知识点，以便以后在有用时可以找到它。将其附加给其他人以供参考。
框架
小程序框架分为视图层（View）和逻辑层（App Service）。它提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架。在之间提供数据传输和事件系统。
1、注册
官方网站注册
2、登录
登录后，从菜单“设置”-“开发设置”中的开发设置获取AppID，并在其中配置服务器域名，消息推送等。
查看AppID
3、下载小程序专用IDE
小程序开发只能在其专用开发工具上进行
4、创建项目
创建项目
5、结构简介小程序包含一个描述整个程序的应用程序，以及描述每个页面的多个页面
项目结构
从图中可以看出，小程序主要由三个部分组成：主要部分（app.js，app.json，app.wxss），页面（页面），自定义工具（实用程序）
1.主要部分（1）app.js-程序的逻辑
app.js是小程序的脚本语言。通过App（）函数注册小程序，接受对象参数，指定小程序的生命周期函数，等等。
在开始以下内容之前，让我们了解小程序正面和背面的概念：
前景和背景定义：当用户单击左上角以关闭或按下设备的主页按钮离开微信时，小程序不会直接销毁，而是进入背景；当您再次输入微信或再次打开小程序时，将从背景再次输入前景。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过多时，才会真正被破坏。
对象参数说明：
属性类型描述
onLaunch功能生命周期功能监视器小程序初始化。初始化小程序时会触发（全局仅一次）
onShow功能生命周期功能监视器小程序显示。当小程序启动或从背景进入前景显示时，它将触发onShow
onHide函数生命周期功能–监视小程序隐藏小程序从前景进入背景时，onHide将被触发
ｏｎｅｒｒｏｒ函数错误监视功能当小程序中发生脚本错误或api调用失败时，它将触发ｏｎｅｒｒｏｒ并显示一条错误消息
onPageNotFound函数页面没有监视功能。当出现小程序表示不存在要打开的页面时，将使用页面信息调用该功能
其他任何开发人员都可以向Object参数添加任何函数或数据，可以通过此参数访问
在app.js中，我们可以声明全局变量，监视和处理它们的生命周期功能。
如果要在其他地方使用该实例，则可以通过第一个getApp（）获取该应用程序实例；但不要调用生命周期方法。
您还可以在App（）之外定义函数和变量
正式说明：
App（）必须在app.js中注册，并且不能注册多个。
不要在App（）中定义的函数中调用getApp（），使用它来获取应用实例。
在onLaunch期间不要调用getCurrentPages（），该页面尚未生成。
通过getApp（）获取实例后，请勿私下调用生命周期函数。
（[2）app.json-小程序全局配置
我们可以在app.json中配置小程序的页面，小程序访问网络的超时时间等。
a.pages
指定组成小程序的页面。组成为“路径/文件名”。如图所示。
“ pages / index / index”->其中page表示左侧的最上层文件夹页面，index表示pages文件夹下的index文件夹，最后一个index表示index.js
app.json
b.window
用于设置小程序的状态栏，导航栏，标题，窗口背景颜色。
PS：
（[1）navigationBarTextStyle（attribute）-“仅支持黑白
（[2）navigationStyle仅在app.json中生效。打开自定义后，较低版本的客户端需要兼容。开发人员工具的基本库版本被削减为1. 7.0（不表示最低版本，（仅用于调试）可以轻松切入旧版本
c.tabBar
如果小程序是多选项卡应用程序（在客户端窗口的底部或顶部有一个标签栏以切换页面），则可以通过tabBar配置项指定标签栏的性能，然后切换选项卡时显示的相应页面。
小程序可以设置底部标签或顶部标签。
PS：
（[1）borderStyle（attribute）-“仅支持黑色/白色
（[2）list（attribute）-“至少2个标签，最多5个标签
workTimeout
各种网络请求的超时时间，以毫秒为单位。
（[3）app.wxss-公共样式表
wxss是样式表，具有CSS的大部分功能，并已通过features-size unit和样式导入进行了扩展，
计量单位
rpx（响应像素）：它可以适应屏幕的宽度。屏幕宽度为750rpx。例如，在iPhone6上，屏幕宽度为375px，总共有750个物理像素，那么750rpx = 375px = 750个物理像素，1rpx =0.5px = 1个物理像素。
样式导入
使用@import语句导入外部样式表。 @import后跟需要导入的外部样式表的相对路径。采用;表示语句的结尾。
示例代码：
/ ** common.wxss ** /
.small-p {
padding：5px;
}
/ ** app.wxss ** /
@import“ common.wxss”;
.middle-p {
padding：15px;
}
2.页（页）
pages包含小程序的各个页面（界面），其中index通常用作主界面（这不是唯一的界面，但取决于在app.json中配置页面的第一页。图）框架的位置）
起始页
页面主要由四个具有相同名称的文件组成，分别是js（逻辑），json（配置），wxml（结构）和wxss（样式）（请注意相同的名称和相同的路径）
（[1）js
js是每个页面的脚本语言。通过Page（）函数注册页面，接受对象参数，指定页面的初始数据，生命周期函数，自定义事件等。
PS：
a。初始数据将用作页面的第一个呈现。数据将以JSON的形式从逻辑层传输到呈现层，因此其数据必须采用可转换为JSON的格式：字符串，数字，布尔值，对象，数组。
b.onLoad：页面加载后，页面只会被调用一次。
c.onReady：在页面的第一次呈现完成时触发。页面仅被调用一次，这意味着该页面已准备好与视图层进行交互。注意：设置界面内容的API，例如wx.setNavigationBarTitle，必须在onReady之后完成。
（[2）wxml
wxml是页面的布局文件，等效于HTML（标记语言），但只能使用微信中定义的组件
（[3）wxss
wxss是样式表，具有CSS的大多数功能，并已扩展了功能（大小单位和样式导入）
计量单位
rpx（响应像素）：它可以适应屏幕的宽度。屏幕宽度为750rpx。例如，在iPhone6上，屏幕宽度为375px，总共有750个物理像素，那么750rpx = 375px = 750个物理像素，1rpx =0.5px = 1个物理像素。
样式导入
使用@import语句导入外部样式表。 @import后跟需要导入的外部样式表的相对路径。采用;表示语句的结尾。
示例代码：
/ ** common.wxss ** /
.small-p {
padding：5px;
}
/ ** app.wxss ** /
@import“ common.wxss”;
.middle-p {
padding：15px;
}
app.wxss中定义的样式是全局样式，作用于每个页面。该页面的wxss文件中定义的样式是部分样式，它仅作用于相应的页面，并且将覆盖app.wxss中的相同样式。
配置文件
如果小程序是多选项卡应用程序（在客户端窗口的底部或顶部有一个标签栏以切换页面），则可以通过tabBar配置项指定标签栏的性能，然后切换选项卡时显示的相应页面。
wxss是样式表，具有CSS的大多数功能，并且已经扩展了功能，
计量单位
rpx（响应像素）：它可以适应屏幕的宽度。屏幕宽度为750rpx。例如，在iPhone6上，屏幕宽度为375px，总共有750个物理像素，那么750rpx = 375px = 750个物理像素，1rpx =0.5px = 1个物理像素。
样式导入
使用@import语句导入外部样式表。 @import后跟需要导入的外部样式表的相对路径。采用;表示语句的结尾。
示例代码：
/ ** common.wxss ** /
.small-p {
padding：5px;
}
/ ** app.wxss ** /
@import“ common.wxss”;
.middle-p {
padding：15px;
}
app.wxss中定义的样式是全局样式，适用于每个页面。在页面的wxss文件中定义的样式是部分样式，它仅作用于相应的页面，并且将覆盖app.wxss中的同一选择器。
（[4）JSON
json是页面配置，比app.json简单得多。它只需要在窗口配置项中配置属性。与wxss相同。 json将覆盖app.json中的相同内容。
3.utils
实用程序是js文件，我们封装（提取）了一些公共方法/代码作为模块供全球使用
PS：js只能通过module.exports在外部公开接口（或导出方法Ctrip，并通过“ path”中的import {method name}导入方法）。