微信小程序开发环境安装以及相关设置配置
微信小程序开发环境安装以及相关设置配置一.安装软件名称: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文件中
代码语言:javascript代码运行次数:0运行复制 "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三.页面路由设置代码语言:javascript代码运行次数:0运行复制 "pages": [
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],注意点:
谁在最前面谁当首页显示
最后结尾不能有,
四.底部导航栏代码语言:javascript代码运行次数:0运行复制"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