微信小程序
微信小程序开发准备
在线文档:https://developers.weixin.qq.com/miniprogram/dev/index.html
小程序开发者账号注册
微信公众平台:https://mp.weixin.qq.com
小程序开发者账号注册:https://mp.weixin.qq.com/wxopen/waregister?action=step1
微信开发者工具
- 微信开发者工具
- WebStorm
- VS Code
- 其他开发工具
微信开发者工具下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
微信开发者工具快捷键
快捷键 | 功能 |
---|---|
Ctrl+Shift+T | 显示/隐藏工具栏 |
Shift+Alt+F | 格式化代码 |
Ctrl+B | 编译 |
Ctrl+D | 选中匹配 |
Ctrl+P | 跳转文件 |
主体文件结构
一个小程序主体部分由 2 到 3 个文件组成,必须放在项目的根目录,如下:
文件 | 必填 | 作用 |
---|---|---|
app.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共设置 |
app.wxss | 否 | 小程序公共样式表 |
注意:微信小程序根目录下,app.js 和 app.json 文件是必需的。
页面文件结构
一个小程序页面由 2 到 4 个文件组成,分别是:
文件类型 | 必填 | 作用 |
---|---|---|
js | 是 | 页面逻辑 ( 微信小程序没有window和document对象 ) |
wxml | 是 | 页面结构 ( XML语法,不是HTML语法 ) |
wxss | 否 | 页面样式表 ( 拓展了rpx尺寸单位,微信专属响应式像素 ) |
json | 否 | 页面配置 ( 不能写注释,否则编译报错 ) |
注意:微信小程序页面目录下,.js 和 .wxml 文件是必需的。
小程序四大标准
- JSON 配置 JavaScript Object Notation
- WXML 结构 WeiXin Markup Language
- WXSS 样式 Weixin Style Sheet
JS 脚本 JavaScript
JSON - 小程序配置文件
app.json
文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
以下是一个包含了所有配置选项的 app.json
:
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
注意:
1. json 配置文件不能添加注释。
2. json 配置文件不能有多余的逗号。
3. json 配置文件使用双引号。
app.json 全局配置
属性 | 类型 | 必填 | 描述 |
---|---|---|---|
pages | String Array | 是 | 设置页面路径 |
window | Object | 否 | 设置默认页面的窗口表现 |
tabBar | Object | 否 | 设置底部 tab 的表现 |
networkTimeout | Object | 否 | 设置网络超时时间 |
debug | Boolean | 否 | 设置是否开启 debug 模式 |
pages 配置项
用于设置小程序的页面组成,接受一个数组,每一项都是字符串。
以下是 app.json 中 pages 的配置示例:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
注意:
1. 数组的第一项代表小程序的初始页面。
2. 小程序中新增/减少页面,都需要对 pages 数组进行修改。
3. 文件名不需要写文件后缀,因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。
window 配置项
用于设置小程序的状态栏、导航条、标题、窗口背景色。
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | 000000 | 导航栏背景颜色,如”#000000” |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持 black/white |
navigationBarTitleText | String | 导航栏标题文字内容 | |
backgroundColor | HexColor | ffffff | 窗口的背景色 |
backgroundTextStyle | String | dark | 下拉背景字体、loading 图的样式,仅支持 dark/light |
enablePullDownRefresh | Boolean | false | 是否开启下拉刷新,详见页面相关事件处理函数。 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px |
以下是 app.json 中 window 的配置示例:
{
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
tabBar 配置项
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 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 | 可选值 bottom、top,设置成top是无图标 |
其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
pagePath | String | 是 | 页面路径,必须在 pages 中先定义 |
text | String | 是 | tab 上按钮文字 |
iconPath | String | 否 | 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效 |
selectedIconPath | String | 否 | 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效 |
以下是 app.json 中 tabbar 的配置示例:
"tabBar": {
"color": "#ddd",
"selectedColor": "#3cc51f",
"backgroundColor": "#fff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/components",
"text": "组件",
"iconPath": "images/icon_components@3x.png",
"selectedIconPath": "images/icon_components_active@3x.png"
},
{
"pagePath": "pages/interface",
"text": "接口",
"iconPath": "images/icon_interface@3x.png",
"selectedIconPath": "images/icon_interface_active@3x.png"
}
]
}
注意:
1. 当设置 position 为 top 时,将不会显示 icon。
2. tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
page.json 页面配置
每一个小程序页面也可以使用.json
文件来对本页面的窗口表现进行配置。 页面的配置比app.json
全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。
属性 | 类型 | 默认值 | 描述 | |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | 000000 | 导航栏背景颜色,如”#000000” | |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持 black/white | |
navigationBarTitleText | String | 导航栏标题文字内容 | ||
backgroundColor | HexColor | ffffff | 窗口的背景色 | |
backgroundTextStyle | String | dark | 下拉 loading 的样式,仅支持 dark/light | |
enablePullDownRefresh | Boolean | false | 是否开启下拉刷新,详见页面相关事件处理函数。 | |
disableScroll | Boolean | false | 设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项 | |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px |
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
注意:页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键,