微信小程序开发环境安装以及相关设置配置
微信小程序开发环境安装以及相关设置配置
一.安装
软件名称: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.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共配置 |
app.wxss | 否 | 小程序公共样式表 |
一个小程序页面由四个文件组成，分别是：
文件类型 | 必需 | 作用 |
|---|---|---|
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构 |
json | 否 | 页面配置 |
wxss | 否 | 页面样式表 |
注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。
四.常用配置
一.配置项
属性 | 类型 | 必填 | 描述 | 最低版本 |
|---|---|---|---|---|
pages | string[] | 是 | 页面路径列表 | |
window | Object | 否 | 全局的默认窗口表现 | |
tabBar | Object | 否 | 底部 tab 栏的表现 | |
networkTimeout | Object | 否 | 网络超时时间 | |
debug | boolean | 否 | 是否开启 debug 模式，默认关闭 | |
functionalPages | boolean | 否 | 是否启用插件功能页，默认关闭 | 2.1.0 |
subpackages | Object[] | 否 | 分包结构配置 | 1.7.3 |
workers | string | 否 | Worker 代码放置的目录 | 1.9.90 |
requiredBackgroundModes | string[] | 否 | 需要在后台使用的能力，如「音乐播放」 | |
plugins | Object | 否 | 使用到的插件 | 1.9.6 |
preloadRule | Object | 否 | 分包预下载规则 | 2.3.0 |
resizable | boolean | 否 | iPad 小程序是否支持屏幕旋转，默认关闭 | 2.3.0 |
navigateToMiniProgramAppIdList | string[] | 否 | 需要跳转的小程序列表，详见 wx.navigateToMiniProgram | 2.4.0 |
usingComponents | Object | 否 | 全局自定义组件配置 | 开发者工具 1.02.1810190 |
permission | Object | 否 | 小程序接口权限相关设置 | 微信客户端 7.0.0 |
sitemapLocation | String | 是 | 指明 sitemap.json 的位置 | |
style | String | 否 | 指定使用升级后的weui样式 |
二.全局样式设置
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。 |
