微信小程序开发环境安装以及相关设置配置
一.安装
软件名称:wechat_devtools_1.02.1907232_x64
软件安装地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
使用官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/
二.小程序项目创建以及设置
点创建项目时候其中appid是唯一的需要去自己小程序账号上查找
下面选项一般不使用云服务
其中相关设置点击设置
或者右上角详情可以点出相关设置
其中本地测试需要在右上角详情
→本地设置
→不校验合法域名进行勾选
三.目录结构
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
一个小程序页面由四个文件组成,分别是:
注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。
四.常用配置
一.配置项
二.全局样式设置
app.json文件中window文件中
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#250",
"navigationBarTitleText": "YWY",
"navigationBarTextStyle": "black"
},
navigationBarBackgroundColor |
HexColor |
#000000 |
导航栏背景颜色,如 #000000 |
|
navigationBarTextStyle |
string |
white |
导航栏标题颜色,仅支持 black / white |
|
navigationBarTitleText |
string |
|
导航栏标题文字内容 |
|
navigationStyle |
string |
default |
导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮。参见注 2。 |
微信客户端 6.6.0 |
backgroundColor |
HexColor |
#ffffff |
窗口的背景色 |
|
backgroundTextStyle |
string |
dark |
下拉 loading 的样式,仅支持 dark / light |
|
backgroundColorTop |
string |
#ffffff |
顶部窗口的背景色,仅 iOS 支持 |
微信客户端 6.5.16 |
backgroundColorBottom |
string |
#ffffff |
底部窗口的背景色,仅 iOS 支持 |
微信客户端 6.5.16 |
enablePullDownRefresh |
boolean |
false |
是否开启全局的下拉刷新。 详见 Page.onPullDownRefresh |
|
onReachBottomDistance |
number |
50 |
页面上拉触底事件触发时距页面底部距离,单位为 px。 详见 Page.onReachBottom |
|
pageOrientation |
string |
portrait |
屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化 |
2.4.0 (auto) / 2.5.0(landscape) |
- 注 1:HexColor(十六进制颜色值),如"#ff00ff"
- 注 2:关于
navigationStyle

三.页面路由设置
"pages": [
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
注意点:
谁在最前面谁当首页显示
最后结尾不能有,
四.底部导航栏
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "",
"selectedIconPath": ""
},
{
"pagePath": "pages/test/test",
"text": "测试",
"iconPath": "",
"selectedIconPath": ""
}]
}
里面用数组套对象的形式,而且只能配置最少 2 个、最多 5 个 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,见详情 |
2.5.0 |
其属性值如下:
pagePath |
string |
是 |
页面路径,必须在 pages 中先定义 |
text |
string |
是 |
tab 上按钮文字 |
iconPath |
string |
否 |
图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 position 为 top 时,不显示 icon。 |
selectedIconPath |
string |
否 |
选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 position 为 top 时,不显示 icon。 |
?

五.其他配置
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#%E9%85%8D%E7%BD%AE%E9%A1%B9