【Uni-App】其他配置笔记

manifest.json

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。

https://uniapp.dcloud.io/collocation/manifest

package.json

通过在package.json文件中增加uni-app扩展节点，可实现自定义条件编译平台（如钉钉小程序、微信服务号等平台）。

https://uniapp.dcloud.io/collocation/package

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项，具体规范参考：vue.config.js

https://uniapp.dcloud.io/collocation/vue-config
https://cli.vuejs.org/zh/config/#vue-config-js

uni.scss

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

https://uniapp.dcloud.io/collocation/uni-scss

App.vue

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听，在页面监听无效。

https://uniapp.dcloud.io/collocation/App

应用生命周期

uni-app 支持如下应用生命周期函数：

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

App.vue 代码示例：

<script>
	export default {

		/**
		 * 注意
		 * 应用生命周期仅可在App.vue中监听，在其它页面监听无效。
		 * onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942
		 * onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）
		 */

		/*
		 当uni-app 初始化完成时触发（全局只触发一次）

		 */
		onLaunch: function() {
			console.log('App Launch')
		},

		/*
		 当 uni-app 启动，或从后台进入前台显示
		 */
		onShow: function() {
			console.log('App Show')
		},

		/* 

		 当 uni-app 从前台进入后台
		 */
		onHide: function() {
			console.log('App Hide')
		},

		/*
		 	当 uni-app 报错时触发
		 */
		onError:function(){ 

		},

		/*
			对 nvue 页面发送的数据进行监听，
			可参考 nvue 向 vue 通讯 https://uniapp.dcloud.io/nvue-api?id=communication
		 */
		onUniNViewMessage:function(){

		},

		/*
		 对未处理的 Promise 拒绝事件监听函数（2.8.1+）
		 */
		onUnhandledRejection:function(){

		},

		/*
		 监听页面不存在时触发
		 */
		onPageNotFound:function(){

		},

		/*
		 监听系统主体发生变化
		 */
		onThemeChange:function(){

		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

　　

页面的生命周期

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},

		/*
			监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，
			参数类型为 Object（用于页面传参），触发时机早于 onLoad	

			百度小程序	3.1.0+

			onInit使用注意

			仅百度小程序基础库 3.260 以上支持 onInit 生命周期
			其他版本或平台可以同时使用 onLoad 生命周期进行兼容，注意避免重复执行相同逻辑
			不依赖页面传参的逻辑可以直接使用 created 生命周期替代
		 */
		onInit:function(obj){

		},

		/*
			监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），

			参考示例
			https://uniapp.dcloud.io/api/router?id=navigateto
		 */
		onLoad(obj) {

		},

		/*
			监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		 */
		onShow:function(){

		},

		/*
			监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		 */
		onReady:function(){

		},

		/*
			监听页面隐藏
		 */
		onHide:function(){

		},

		/*
			监听页面卸载
		 */
		onUnload:function(){

		},

		/*
			监听窗口尺寸变化

			App、微信小程序
		 */
		onResize:function(){

		},

		/*
			监听用户下拉动作，一般用于下拉刷新，
			uni.startPullDownRefresh(OBJECT)
			开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

			参考示例
			https://uniapp.dcloud.io/api/ui/pulldown
		 */
		onPullDownRefresh:function(){

		},

		/*
			页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项

			onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

		 */
		onReachBottom:function(){

		},

		/*
			点击 tab 时触发，参数为Object，具体见下方注意事项

			微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App（自定义组件模式）

			obj 对象说明
			index	String	被点击tabItem的序号，从0开始
			pagePath	String	被点击tabItem的页面路径
			text	String	被点击tabItem的按钮文字
		 */
		onTabItemTap:function(obj){
			console.log(obj);
			// obj的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
		},

		/*
			用户点击右上角分享
			微信小程序、QQ小程序、支付宝小程序、字节小程序、快手小程序
		 */
		onShareAppMessage:function(){

		},

		/*
			监听页面滚动，参数为Object	nvue暂不支持

			如使用scroll-view导致页面没有滚动，则触底事件不会被触发。
			scroll-view滚动到底部的事件请参考scroll-view的文档

			onPageScroll里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。
			如果想实现滚动时标题栏透明渐变，在App和H5下，可在pages.json中配置titleNView下的type为transparent，参考。
			如果需要滚动吸顶固定某些元素，推荐使用css的粘性布局，参考插件市场。插件市场也有其他js实现的吸顶插件，但性能不佳，需要时可自行搜索。
			在App、微信小程序、H5中，也可以使用wxs监听滚动，参考；在app-nvue中，可以使用bindingx监听滚动，参考。
			onBackPress上不可使用async，会导致无法阻止默认返回

			scrollTop	Number	页面在垂直方向已滚动的距离（单位px）
		 */
		onPageScroll:function(obj){ //nvue暂不支持滚动监听，可用bindingx代替
			console.log("滚动距离为：" + e.scrollTop);

		},

		/*
			监听原生标题栏按钮点击事件，参数为Object	App、H5
			index	Number	原生标题栏按钮数组的下标
		 */
		onNavigationBarButtonTap:function(e){
			console.log(e);
			// e的返回格式为json对象：{"text":"测试","index":0}
		},

		/*
			监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；
			navigateBack表示来源是 uni.navigateBack ；
			详细说明及使用：onBackPress 详解。

			支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
			app、H5、支付宝小程序

			from	String
			触发返回行为的来源：'backbutton'——左上角导航栏按钮及安卓返回键；
			'navigateBack'——uni.navigateBack() 方法。

			支付宝小程序端不支持返回此字段
		 */
		onBackPress:function(opt){
			console.log('from:' + options.from)
		},

		/*
			监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
		*/
		onNavigationBarSearchInputChanged:function(){

		},

		/*
			监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
		 */
		onNavigationBarSearchInputConfirmed:function(){

		},

		/*
			监听原生标题栏搜索输入框点击事件	App、H5	1.6.0
		 */
		onNavigationBarSearchInputClicked:function(){

		},

		/*
			监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
		 */
		onShareTimeline:function(){

		},

		/*
			监听用户点击右上角收藏	微信小程序	2.8.1+
		 */
		onAddToFavorites:function(){

		},

		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

　　

组件生命周期

https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e7%bb%84%e4%bb%b6%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f