前言
今天抱着学习新技术的心态开始第一次接触微信小程序，甭管外面怎么吹捧小程序，咱们学到就是赚到，好啦，废话不多说，开始学习！！
一、简介
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不关心是否安装太多应用的问题。应用将无处不在，随时随地可用，但又无需安装卸载。
至此，我们可以总结下小程序的特点：
- 无需下载和安装
- 用完即走
- 随时可用
二、安装
1、小程序注册
注册完之后就可以在开发设置中看到APPID了，到这里个人申请小程序已经顺利完成了非常重要的准备工作了，
2、下载微信开发者工具 （传送门）
安装完成之后，新建我们的第一个项目
接下来点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微信的扫一扫在手机上体验你的第一个小程序。
3、小程序代码构成
在我们刚刚创建的项目中，可以留意到在这个项目中生成了不同类型的文件
1、.json 后缀的 JSON 配置文件
2、.wxml 后缀的 WXML 模板文件
3、.wxss 后缀的 WXSS 样式文件
4、.js 后缀的 JS 脚本逻辑文件
这里我只说一下，我认为重要的两点，详情请参考（传送门）
先说说app.json这个脚本要注意的地方
{
"pages":[
"pages/index/index",
"pages/logs/logs"
], //这里是配置你小程序里所有的页面的，如果你要新添加了页面，记得一定要在这里配置好
"window":{//这里就是页面属性及样式的配置了，大家可以去更改下配置去看看具体的效果
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
再来说说app.wxss
app.wxss 是整个小程序的公共样式表
.container { //看到这个很熟悉了吧,.class呦，你明白就好
height: 100%; display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
OK，对于小程序，我们有了大概的了解，这里值得一提的是，每当我们新建一个页面，就要在app.json中配置该页面（很重要）
4、小程序的配置
全局配置 （app.json）
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/index",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": [
"wxe5f52902cf4de896"
]
}
完整配置项说明请参考 （传送门）
页面配置
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
完整配置项说明请参考 （传送门）
三、API
事件监听 API
以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等。
//这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。
wx.onCompassChange(function (res) {
console.log(res.direction)
})
同步 API
以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等，
//同步 API 的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。
try {
wx.setStorageSync('key', 'value')
} catch (e) {
console.error(e)
}
异步API
大多数 API 都是异步 API，如 wx.request，wx.login 等。
这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果
要获取用户的地理位置时，只需要：
wx.getLocation({
type: 'wgs84',
success: (res) => {
var latitude = res.latitude // 纬度
var longitude = res.longitude // 经度
}
})
调用微信扫一扫能力，只需要：
wx.scanCode({
success: (res) => {
console.log(res)
}
})
注：多数 API 的回调都是异步，需要处理好代码逻辑的异步问题
四、小程序手机预览
当我们做完小程序后，就可以打开手微信扫描件二维码，然后在手机看我们做的小程序啦，是不是很nice~，是不是敲有成就感喔
今天主要先了解一下微信小程序，后续在讲解其他内容
转载：https://blog.csdn.net/qq_45784580/article/details/104608416