微信小程序全局配置详解_微信开发小程序全局注释

通过全局配置实现的效果

开发者

微信公众平台

登录网址

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】

Page({
    onLoad(options)
{
    const
appInstance = getApp()
console.log(appInstance.globalData.userInfo) // 我是全局属性
}
})