Uniapp -- framework arrangement and analysis summary

One 、 Lifecycle summary

/** *  Page lifecycle  -  Monitor page loading  * @param {Object} options  The passed parameter object  */
	async onLoad(options) {
    },
	
	/** *  Page lifecycle  -  Monitor page display （ It will trigger each time it is displayed ） */
	async onShow() {
    },

	/** *  Page lifecycle  -  Listening page first rendering completed  */
	async onReady() {
    
		//  Load data 
		this.loadData();
	},
	
	/** *  Page lifecycle  -  Monitor page hidden  */
	async onHide() {
    },
	
	/** *  Page lifecycle  -  Monitor page uninstall  */
	async onUnload() {
    },
	
	/** *  Page lifecycle  -  Monitor window size changes  * App、 Wechat applet  */
	async onResize() {
    },
	
	/** *  Page lifecycle  -  Monitor user pull-down action  */
	async onPullDownRefresh() {
    
		//  Stop the drop-down refresh 
		uni.stopPullDownRefresh();
	},
	
	/** *  Page lifecycle  -  Handling function of page pull bottom event  */
	async onReachBottom() {
    },
	
	/** *  Page lifecycle  -  Click on  tab  Trigger when  *  Wechat applet 、 Baidu applet 、H5、App（ Custom component pattern ） * @param {String} event.index  Clicked tabItem The serial number of , from 0 Start  * @param {String} event.pagePath  Clicked tabItem Page path  * @param {String} event.text  Clicked tabItem Button text  */
	async onTabItemTap(event) {
    },
	
	/** *  Page lifecycle  -  Users click the upper right corner to share  *  Wechat applet 、 Baidu applet 、 Bytedance applet 、 Alipay applet  */
	async onShareAppMessage() {
    },
	
	/** *  Page lifecycle  -  Monitor page scrolling  * @param {Number} event.scrollTop  How far the page has scrolled in the vertical direction （ Company px） */
	async onPageScroll(event) {
    },
	
	/** *  Page lifecycle  -  Listen for native title bar button click event  * 5+App、H5 * @param {Number} event.index  Subscript of the native title bar button array  */
	async onNavigationBarButtonTap(event) {
    },
	
	/** *  Page lifecycle  -  The monitor page returns  * App、H5 * @param {String} event.from  The source that triggers the return behavior ：'backbutton'—— Navigation bar button and Android return key in the upper left corner ;'navigateBack'——uni.navigateBack()  Method  *  matters needing attention ： * -  Only in this function can the return value be  true  when , It means that the default return... Is not executed , Handle the business logic at this time by yourself ; * -  Do not return or return other values , Will execute the default return behavior ; * - H5  platform , The top navigation bar back button supports  onBackPress(), Browser default return key and Android Mobile entity return key does not support  onBackPress(); */
	async onBackPress(event) {
    },
	
	/** *  Page lifecycle  -  Listen to the native title bar search input box for input content change events  * App、H5 */
	async onNavigationBarSearchInputChanged() {
    },
	
	/** *  Page lifecycle  -  Listen for native title bar search input box search Events , The user clicks... On the soft keyboard  " Search for "  Button to trigger  * App、H5 */
	async onNavigationBarSearchInputConfirmed() {
    },
	
	/** *  Page lifecycle  -  Listen to the native title bar search input box click event  * App、H5 */
	async onNavigationBarSearchInputClicked() {
    },

Two 、pages.json Property values of the configuration file

/** * pages.json  Documents are used to correct  uni-app  Global configuration , Determine the path of the page file 、 Window style 、 The native navigation bar 、 The original at the bottom tabbar  etc.  */
{
    
	//  Set the window representation of the default page , The status bar used to set the application 、 Navigation bar 、 title 、 Window background color, etc 
	"globalStyle": {
    
		"navigationBarBackgroundColor": "#F8F8F8", //  Navigation bar background color （ Same as background color of status bar ）. The default value is ："#F7F7F7". Platform difference description ：APP And H5 by #F7F7F7, For applet platform, please refer to the corresponding applet documentation 
		"navigationBarTextStyle": "black", //  Navigation bar title color and status bar foreground color , Support only  black/white. The default value is ："white"
		"navigationBarTitleText": "uni-app", //  Navigation bar title text content 
		"navigationStyle": "default", //  Navigation bar style , Support only  default/custom.custom That is, cancel the default native navigation bar . Platform difference description ： Wechat applet  7.0+、 Baidu applet 、H5、App（2.0.3+）
		"backgroundColor": "#F8F8F8", //  Background color of window . The default value is ："#FFFFFF". Platform difference description ： Wechat applet 
		"backgroundTextStyle": "dark", //  The drop-down  loading  The style of , Support only  dark / light. Default ："dark". Platform difference description ： Wechat applet 
		"enablePullDownRefresh": true, //  Enable pull-down refresh . Default ：false
		"onReachBottomDistance": 50, //  Distance from the bottom of the page when the pull-up event is triggered , Units only support px. Default ：50
		"backgroundColorTop": "#FFFFFF", //  The background color of the top window （bounce Rebound area ）. The default value is ："#FFFFFF". Platform difference description ： only  iOS  platform 
		"backgroundColorBottom": "#FFFFFF", //  The background color of the bottom window （bounce Rebound area ）. The default value is ："#FFFFFF". Platform difference description ： only  iOS  platform 
		"titleImage": "", //  Navigation bar picture address （ Replace the current text title ）, Must be used in Alipay applet https Picture link address . Default ："". Platform difference description ： Alipay applet 、H5、APP
		"transparentTitle": "none", //  Navigation bar transparent settings . Support  always  Always transparent  / auto  Sliding adaptation  / none  Opaque . Default ："none". Platform difference description ： Alipay applet 、H5、APP
		"titlePenetrate": "NO", //  Click through... On the navigation bar . Default ："NO". Platform difference description ： Alipay applet 、H5
		"pageOrientation": "portrait", //  Screen rotation settings , Support only  auto / portrait. Default ："portrait". Platform difference description ： Wechat applet 
		"animationType": "pop-in", //  The animation effect of the window . Default ："pop-in". Optional value ：slide-in-right、slide-in-left、slide-in-top、slide-in-bottom、pop-in、fade-in、zoom-out、zoom-fade-out、none. Platform difference description ：APP
		"animationDuration": 300, //  The window shows the duration of the animation , Unit is  ms. Default ：300. Platform difference description ：APP
		"app-plus": {
    }, //  Set compile to  App  The specific style of the platform . Platform difference description ：APP
		"h5": {
    }, //  Set compile to  H5  The specific style of the platform . Platform difference description ：H5
		"mp-alipay": {
    }, //  Set the specific style of the applet compiled into Alipay . Platform difference description ： Alipay applet 
		"mp-weixin": {
    }, //  Set specific styles for compiling into wechat applets . Platform difference description ： Wechat applet 
		"mp-baidu": {
    }, //  Set the specific style of compiling to Baidu applet . Platform difference description ： Baidu applet 
		"mp-toutiao": {
    }, //  Set a specific style for compiling to ByteDance applets . Platform difference description ： Bytedance applet 
		"mp-qq": {
    }, //  Set compile to QQ Applet specific styles . Platform difference description ：QQ Applet 
		"usingComponents": {
    } //  Reference applet components . Platform difference description ： Wechat applet 、App
	},

	//  Set page path and window performance . The first item in the array represents the application startup page 
	"pages": [{
    
		"path": "pages/index/index", 
		"style": {
     
			"navigationBarTitleText": " home page "
		}
	}, {
    
		"path": "pages/biaofun-region/biaofun-region", 
		"style": {
     
			"navigationBarTitleText": " Province city selector "
		}
	}, {
    
		"path": "pages/biaofun-datetime-picker/biaofun-datetime-picker", 
		"style": {
     
			"navigationBarTitleText": " Date time selector "
		}
	}, {
    
		"path": "pages/biaofun-waterfall/biaofun-waterfall", 
		"style": {
     
			"navigationBarTitleText": " Waterfall flow layout "
		}
	}, {
    
		"path": "pages/biaofun-swiper-list/biaofun-swiper-list", 
		"style": {
     
			"navigationBarTitleText": " Slide list ",
			"enablePullDownRefresh": false
		}
	}, {
    
		"path": "pages/biaofun-loading-more/biaofun-loading-more", 
		"style": {
     
			"navigationBarTitleText": " Load more "
		}
	}, {
    
		"path": "pages/biaofun-marquee/biaofun-marquee", 
		"style": {
     
			"navigationBarTitleText": " Running lights "
		}
	}]
}