【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
