通过全局配置实现的效果
开发者
微信公众平台
登录网址
https://mp.weixin.qq.com/
注册网址
https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
微信小程序开发者工具
下载地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
小程序目录结构
描述整体的app
app.js 小程序逻辑
app.json 小程序公共配置
app.wxss 小程序公共样式表
描述各自页面的page
为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名
js 页面逻辑
wxml 页面结构
json 页面配置
wxss 页面样式表
全局配置
Pages
简介
Pages用于指定小程序由哪些页面组成
配置项
pages:配置小程序的页面
文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理
entryPagePath:指定小程序的首页
未指定 entryPagePath 时,数组的第一项代表小程序的首页
如:"entryPagePath": "pages/index/index",
配置【app.json】
"entryPagePath": "pages/index/index",
"pages": [
"pages/index/index",
"pages/logs/logs"
],
window
简介
_window 用于设置小程序的状态栏、导航条、标题、窗口背景色等等
配置项
navigationBarBackgroundColor: 导航栏背景颜色【默认 # 000000】
navigationBarTextStyle: 导航栏标题颜色【默认white,仅支持black / white】
navigationBarTitleText: 导航栏标题文字内容
backgroundColor: 窗口的背景色【 # ffffff】
backgroundTextStyle: 下拉loading的样式【默认dark,仅支持dark / light】
enablePullDownRefresh: 是否开启全局的下拉刷新【默认false】
onReachBottomDistance: 页面上拉触底事件触发时距页面底部距离【默认50,单位px】
配置【app.json】
"window": {
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "第一个小程序",
"backgroundColor": "#000000",
"backgroundTextStyle": "light",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50
},
tabBar
简介
客户端窗口的底部或顶部有 tab 栏可以切换页面
配置项
position:tab的位置【默认bottom,仅支持bottom / top】
color :tab上的文字默认颜色
selectedColor:tab上的文字选中时的颜色
backgroundColor:tab的背景色
borderStyle:tab上边框的颜色【默认blak,仅支持black / white】
list:tab的列表【最少2个,最多5个】属性:
pagePath:页面路径【必须在pages有】
text:按钮文字
iconPath【可选】:图片路径【最大40kb,建议尺寸81px * 81px,不支持网络图片,当position为top时不显示】
selectedIconPath【可选】:选中时的图片路径
配置【app.json】
"tabBar": {
"color": "#999999",
"selectedColor": "#ff0000",
"backgroundColor": "#fff",
"borderStyle": "black",
"position": "bottom",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "./images/home.png",
"selectedIconPath": "./images/home_select.png"
},
{
"pagePath": "pages/news/news",
"text": "新闻",
"iconPath": "./images/news.png",
"selectedIconPath": "./images/news_select.png"
}]
},
其余配置
配置项
style:app.json 中配置 "style": "v2"可表明启用新版的组件样式
sitemapLocation:指明 sitemap.json的位置
debug:是否开启debug模式【默认false】
debugOptions:小程序调试相关配置项
配置项:
enableFPSPanel:是否开启 FPS 面板【默认false】
FPS 面板:为了便于开发者调试渲染层的交互性能,小程序基础库提供了选项开启 FPS 面板,开发者可以实时查看渲染层帧率
networkTimeout:各类网络请求的超时时间,单位均为毫秒
配置项:
request:wx.request的超时时间【默认60000】
connectSocket:wx.connectSocket的超时时间【默认60000】
uploadFile:wx.uploadFile的超时时间【默认60000】
downloadFile:wx.downloadFile的超时时间【默认60000】
permission:小程序接口权限相关设置
配置【app.json】
"style": "v2",
"sitemapLocation": "sitemap.json",
"debug": true,
"debugOptions": {
"enableFPSPanel": true
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
公共样式
简介
在项目根目录的 app.wxss 文件为小程序公的共样式表,相当与CSS初始化文件配置
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式
WXSS 用来决定 WXML 的组件应该怎么显示
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改
与 CSS 相比,WXSS 扩展的特性有:尺寸单位/样式导入
尺寸单位
rpx: 可以根据屏幕宽度进行自适应【规定屏幕宽为750rpx】
开发微信小程序时设计师可以用 iPhone6作为视觉稿的标准,如在 iPhone6 上,
屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素
样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束
在app.wxss文件中引入common.wxss文件:@import "./common/common.wxss";
配置【app.wxss】
@import "./common/common.wxss";
.box{
margin: 50px;
}
全局生命周期函数
简介
每个小程序都需要在app.js中调用App方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等
生命周期回调函数
onLaunch:监听小程序初始化
onShow:监听小程序启动或切前台
onHide:监听小程序切后台
onError:错误监听函数
onPageNotFound:页面不存在监听函数
onThemeChange:监听系统主题变化
配置【app.js】
App({
onLaunch(options)
{
console.log("监听小程序初始化", options);
},
onShow(options)
{
console.log("监听小程序启动", options);
},
onHide()
{
console.log("监听小程序切后台");
},
onError(msg)
{
// 小程序发生脚本错误或
API
调用报错时触发
console.log("错误监听函数", msg)
},
onPageNotFound(res)
{
console.log("页面不存在监听函数");
},
onThemeChange()
{
console.log("系统切换主题时触发");
}
})
全局属性
简介
整个小程序只有一个 App 实例,开发者可以通过getApp方法获取到全局唯一的App实例,获取App上的数据或调用开发者注册在App上的函数
配置【app.js】
App({
globalData: {
userInfo: "我是全局属性"
}
})
读取【单页面.js】文章来源:https://www.toymoban.com/news/detail-540083.html
Page({
onLoad(options)
{
const
appInstance = getApp()
console.log(appInstance.globalData.userInfo) // 我是全局属性
}
})
文章来源地址https://www.toymoban.com/news/detail-540083.html
到了这里,关于微信小程序全局配置详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!