The effect achieved by global configuration
Developer
Micro-channel public platform
Login URL
https://mp.weixin.qq.com/
Register URL
https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
WeChat Mini Program Developer Tools
download link
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
Small program directory structure
Describe the overall app
app.js applet logic
app.json applet public configuration
app.wxss Applet public style sheet
pages describing the respective pages
In order to facilitate developers to reduce configuration items, the four files on the description page must have the same path and file name
js page logic
wxml page structure
json page configuration
wxss page style sheet
global configuration
Pages
Introduction
Pages is used to specify which pages the applet consists of
configuration item
pages: configure the pages of the applet
The file name does not need to write the file suffix, the framework will automatically find the four files of .json, .js, .wxml, .wxss in the corresponding location for processing
entryPagePath: specifies the home page of the applet
When entryPagePath is not specified, the first item in the array represents the home page of the applet
如："entryPagePath": "pages/index/index",
Configuration【app.json 】
"entryPagePath": "pages/index/index",
"pages": [
"pages/index/index",
"pages/logs/logs"
],window
Introduction
_window is used to set the status bar, navigation bar, title, window background color of the applet, etc.
configuration item
navigationBarBackgroundColor: Navigation bar background color [default # 000000]
navigationBarTextStyle: Navigation bar title color [default white, only black / white is supported]
navigationBarTitleText: Navigation bar title text content
backgroundColor: Window background color [# ffffff]
backgroundTextStyle: Pull-down loading style [Default dark, only supports dark / light]
enablePullDownRefresh: Whether to enable global pull-down refresh [default false]
onReachBottomDistance: The distance from the bottom of the page when the page pull-down event is triggered [default 50, unit px]
Configuration【app.json】
"window": {
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "第一个小程序",
"backgroundColor": "#000000",
"backgroundTextStyle": "light",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50
},tabBar
Introduction
There is a tab bar at the bottom or top of the client window to switch pages
configuration item
position: the position of the tab [default bottom, only bottom / top is supported]
color: the default color of the text on the tab
selectedColor: the color of the text on the tab when selected
backgroundColor: the background color of the tab
borderStyle: the color of the border on the tab [default blak, Only support black / white】
list: tab list [minimum 2, maximum 5] Attributes:
pagePath: page path [must be in pages]
text: button text
iconPath [optional]: image path [maximum 40kb, recommended size 81px * 81px, not supported Network pictures, not displayed when the position is top]
selectedIconPath [optional]: the picture path when selected
Configuration【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"
}]
},Rest of configuration
configuration item
style: configure "style" in app.json: "v2" to indicate that the new version of the component style is enabled
sitemapLocation: specify the location of sitemap.json
debug: whether to enable debug mode [default false]
debugOptions: configuration items related to applet debugging configuration
items:
enableFPSPanel: Whether to enable the FPS panel [default false]
FPS panel: In order to facilitate developers to debug the interactive performance of the rendering layer, the applet base library provides the option to enable the FPS panel, and developers can view the frame rate of the rendering layer in real time networkTimeout: various network
requests The timeout time, the unit is millisecond
Configuration items:
request: wx.request timeout time [default 60000]
connectSocket: wx.connectSocket timeout time [default 60000]
uploadFile: wx.uploadFile timeout time [default 60000]
downloadFile: wx .downloadFile timeout time [default 60000]
permission: Permission related settings of the applet interface
Configuration【app.json 】
"style": "v2",
"sitemapLocation": "sitemap.json",
"debug": true,
"debugOptions": {
"enableFPSPanel": true
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}public style
Introduction
The app.wxss file in the root directory of the project is the public style sheet of the applet, which is equivalent to the configuration of the CSS initialization file.
WXSS (WeiXin Style Sheets) is a set of style languages used to describe WXML component styles.
WXSS is used to determine WXML components. How it should be displayed
In order to adapt to the majority of front-end developers, WXSS has most of the features of CSS. At the same time, in order to be more suitable for the development of WeChat applets, WXSS has expanded and modified CSS
. Compared with CSS, the extended features of WXSS are: size unit/style import
measurement unit
rpx: It can be adapted according to the screen width [the specified screen width is 750rpx]
When developing WeChat applets, designers can use iPhone6 as the standard for visual drafts. For example, on iPhone6, the
screen width is 375px, and there are 750 physical pixels in total, so 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel
style import
Use the @import statement to import the external style sheet. @import is followed by the relative path of the external style sheet to be imported. Use ; to indicate the end of the statement
Introduce the common.wxss file in the app.wxss file: @import "./common/common.wxss";
Configure [app.wxss ]
@import "./common/common.wxss";
.box{
margin: 50px;
} global lifecycle function
Introduction
Each applet needs to call the App method in app.js to register the applet instance, bind life cycle callback functions, error monitoring and page non-existence monitoring functions, etc.
Lifecycle callback function
onLaunch: monitor the initialization of the applet
onShow: monitor the startup of the applet or switch to the foreground
onHide: monitor the applet to switch to the background
onError: the error monitoring function
onPageNotFound: the page does not exist the monitoring function
onThemeChange: monitor the system theme change
Configure【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("系统切换主题时触发");
}
})global attributes
Introduction
There is only one App instance in the whole applet, and the developer can obtain the globally unique App instance through the getApp method, obtain the data on the App or call the function registered by the developer on the App
Configure【app.js 】
App({
globalData: {
userInfo: "我是全局属性"
}
})Read [single page.js ]
Page({
onLoad(options)
{
const
appInstance = getApp()
console.log(appInstance.globalData.userInfo) // 我是全局属性
}
})