一。环境搭建
微信公众平台小程序注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
注册时主体类型选择：个体
微信官方开发工具的下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
注册成功之后获取appid，小程序的appid相当于小程序平台的一个身份证，很多地方需要用到appid，比如在创建小程序项目时候就需要用到appid。
获取方法：设置--开发设置--小程序id右边的那一串
二。创建第一个项目
点开下载安装好的微信开发工具→第一步会出现项目（要先创建一个空的app文件夹路径随便），然后项目目录就是该文件夹→Appid就填写在设置中获取到的→项目名称任意名字→然后就可以进入开发页面了
.在页面中开发模式选择小程序开发，新建一个编译模式1，进入场景默认
三。分析小程序文件的基本结构
- pages // 包含了所有页面
- index // 页面文件夹
- index.js // 页面的脚本逻辑文件
- index.wxml // 页面模板文件
- index.wxss // 页面样式文件
- index.json // 页面配置文件
- utils // 普通的工具函数
- app.js // 项目启动入口
- app.json // 全局的配置
- app.wxss // 全局样式
- project.config.json // 项目的配置文件
注意点：wxml就是等于web中的html，wxss是样式
四。项目的json文件配置
详细配置文档说明地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
pages配置（记得参考微信官方文档）
pages数组中的页面路径地址必须存在pages文件夹中
pages数组中的页面路径地址下标为0，也就是第一个路径在普通编译模式下会作为启动页面，但不建议使用更换顺序的方式修改启动页， 可以通过新增或修改编译模式更改启动页
window配置示例
// app.json
{
"window":{
"navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
"navigationBarTextStyle": "black", // 导航栏标题颜色，仅支持 black / white
"navigationBarTitleText": "weChart", // 导航栏标题文字内容
"backgroundColor": "#fff", // 窗口的背景色
"backgroundTextStyle": "light"， // 下拉 loading 的样式，仅支持 dark / light
"enablePullDownRefresh": true // 设置允许下拉刷新
}
}
注意： window的配置
- navigationBarTextStyle导航栏标题颜色，仅支持 black / white
- backgroundTextStyle下拉 loading 的样式，仅支持 dark / light
tabBar配置示例
// app.json
{
"tabBar": {
"color": "#000", // tab 上的文字默认颜色
"selectedColor": "#000", // tab 上的文字选中时的颜色
"backgroundColor": "#f5f5f5", // tab 的背景色
"list": [{
"pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义（必填）
"text": "首页", // tab 上按钮文字（必填）
"iconPath": "", // tab 上的图片路径,不支持网络图片
"selectedIconPath": "" // 选中时的图片路径
}, {
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "",
"selectedIconPath": ""
}]
}
}
注意：配置了tabBar后，底部栏只对配置的页面可见, 而且tabBar的设置至少两个，最多5个
页面配置
页面配置文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。
页面的配置只能设置 app.json 中部分 window 配置项的内容**，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
wxml和html的不同点
标签名字不一样，如html里常用的标签 div、a、span等，在小程序里标签是view、navigator、text等，除了常用的元素块标签，小程序还提供了地图，视频，音频等组件
view容器组件
text文本组件
文本内容
navigator的基本使用
// url的连接前面必须加上斜杆 “/”
跳转到demo
注意点：navigator不支持跳转到外部的url，例如url="https://www.baidu.com"
跳转到tabBar的页面
设置open-type值为switchTab，比如index页面是tabBar的页面，可以这样来设置
跳转到tabBar的使用方法
跳转到首页
open-type 常用的有效值
- redirect 覆盖当前页面
switchTab 跳转到tabBar页 - navigateBack 关闭当前页面，返回上一页面, 不需要制定url的值，相当于的web的history.back()
image图片组件
注意点：image组件默认宽度300px、高度240px 注2：image组件中二维码/小程序码图片不支持长按识别
常用的mode 有效值
scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来
aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来
其他组件跟html标签差不多，具体参考微信官方文档使用即可
wxss样式
rpx 尺寸单位
什么是rpx？
rpx可以使元素根据屏幕宽度进行自适应，小程序规定屏幕的宽度为750rpx， 也就是 100% = 750rpx; 50% = (750 / 2)rpx
其他自适应方法
web中使用rem，vw, vh, 百分比
使用方法
在开发小程序是建议使用750像素宽度的设计稿，这样设计稿的元素宽度是多少像素就直接设置为多少rpx