uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，支持iOS、Android、Web及各平台小程序。本系列文章为uni-app开发微信小程序知识点的归纳总结。
项目创建推荐
如果你是新手，项目创建一般推荐：uni-ui项目，该项目架构包含了uni官方提供的内嵌UI组件库，方便直接使用。
如果你已经对uni-app很熟悉，能熟练使用uView等UI框架及相关配置，建议创建 “默认模板” 新建项目。
页面生命周期归纳
uni-app中的页面文件，通常会存放在工程根目录下的pages文件夹。
每次新建页面，均需在pages.json中配置pages列表；未在pages.json -> pages 中配置的页面，uni-app会在编译阶段进行忽略。pages.json的完整配置参考（官网）：全局文件。
链接：pages.json 页面路由 | uni-app官网
小程序页面的生命周期，主要包括：
onLoad：监听页面加载事件，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），当页面来源为回退操作navigateBack或tab切换时，该函数不再重复执行
onShow：监听页面显示事件。页面每次出现在屏幕上都触发，包括页面来源为回退操作navigateBack或tab切换
onReady：监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发，当页面来源为回退操作navigateBack或tab切换时，该函数不再重复执行
正常情况下的执行顺序：1）onLoad —— 2）onShow —— 3）onReady
onUnload：监听页面卸载事件
onResize：监听窗口尺寸变化
onPullDownRefresh：监听用户下拉动作，下拉刷新，需要在page.json开启该页面下拉刷新权限
onReachBottom：页面滚动到底部的事件。可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。
onTabItemTap：点击 tab 切换时触发，参数为Object
onShareAppMessage：小程序右上角分享给好友
onShareTimeline：小程序右上角分享至朋友圈
onAddToFavorites：小程序右上角收藏
onPageScroll：监听页面滚动，参数为Object。回调参数scrollTop表示页面在垂直方向已滚动的距离
App.vue文件概述
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>
这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData
1）应用主要生命周期：
onLaunch：初始化完成时触发（全局只触发一次）
onShow：应用启动或从后台进入前台触发
onHide：从前台进入后台触发
onPageNotFound：页面不存在监听函数。比如通过分享卡片、小程序码且发现页面不存在，才会触发，通过路由api实现跳转不存在的页面不会触发（如 uni.navigateTo）
2）应用全局变量定义：globalData
在子页面中使用 getApp().globalData 获取变量对象，可以对全局变量对象进行修改
在App.vue中定义代码如下：
<script>
export default {
globalData: {
text: '20220922'
},
onLaunch: function() {
console.log('App Launch')
console.log(this.globalData.text)
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>在子页面中使用全局变量 globalData：
<script>
export default {
data() {
return {}
},
// 页面加载
onLoad() {
console.log('onLoad');
const app = getApp();
console.log(app.globalData.text) // '20220922'
app.globalData.text = 'abc'; // 允许对全局变量进行修改
console.log(app.globalData.text) // 'abc'
}
}
</script>css全局样式配置，如：
<style lang="scss">
// 设置整个项目的背景色
page {
background-color: #f5f5f5;
}
</style>3）获取页面路由栈：getCurrentPages()
getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。该函数仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。
| 路由方式 | 页面栈表现 | 触发时机 |
|---|---|---|
| 初始化 | 新页面入栈 | uni-app 打开的第一个页面 |
| 打开新页面 | 新页面入栈 | 调用 API uni.navigateTo 、使用组件 <navigator open-type="navigate"/> |
| 页面重定向 | 当前页面出栈，新页面入栈 | 调用 API uni.redirectTo 、使用组件 <navigator open-type="redirectTo"/> |
| 页面返回 | 页面不断出栈，直到目标返回页 | 调用 API uni.navigateBack 、使用组件 <navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键 |
| Tab 切换 | 页面全部出栈，只留下新的 Tab 页面 | 调用 API uni.switchTab 、使用组件 <navigator open-type="switchTab"/> 、用户切换 Tab |
| 重加载 | 页面全部出栈，只留下新的页面 | 调用 API uni.reLaunch 、使用组件 <navigator open-type="reLaunch"/> |
在跳转页面传递参数时，url有长度限制，太长的字符串会传递失败，可使用窗体通信、全局变量，或encodeURIComponent等多种方式解决，如下为encodeURIComponent示例。
<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
// navigate.vue页面接受参数
onLoad: function (option) {
const item = JSON.parse(decodeURIComponent(option.item));
}页面间全局通讯API应用
与EventBus使用规则一致
触发事件：uni.$emit(eventName,OBJECT)
监听事件：uni.$on(eventName,callback)
监听事件（只触发一次）：uni.$once(eventName,callback)
移除事件：uni.$off([eventName, callback])
移除事件注意项：
- 如果没有提供参数，则移除所有的事件监听器；
- 如果只提供了事件，则移除该事件所有的监听器；
- 如果同时提供了事件与回调，则只移除这个回调的监听器；
- 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；
uni.scss的优缺点
uni.scss为uni-app新建项目自带工程文件，使用的预处理器为sass/scss，由此可见，uni-app官方推荐的是scss，不建议在 uni-app中使用less、stylus等。
uni.scss具有如下一些特点：
- 无需引入，uni-app在编译时，会自动引入此文件
- 在此中定义的scss变量，可以全局使用，可以在此定义一些颜色，主题，尺寸等变量
- uni.scss会编译到每个scss文件中(请着重理解这一句话)
综上所述，我们可以得知，uni.scss主要是利用scss的特性，定义一些全局变量，供各个写了lang=scss的style标签引用，但是这引出了一个重要的问题：
uni.scss中所写的一切内容，都会注入到每个声明了scss的文件中，这意味着，如果您的uni.scss如果有几百行，大小10k左右，那么这个10k都会被注入所有的 其他scss文件(页面)中，如果您的应用有50个页面，那么有可能因此导致整体的包体积多了50 * 10 = 500k的大小，这可能会导致小程序包太大而无法预览和发布， 所以，我们建议您只将scss变量相关的内容放到uni.scss中。文章来源：https://www.toymoban.com/news/detail-585473.html
提个题外话，如果使用uView组件库配合开发，如何修改组件原生样式呢？可以使用::v-deep，值得注意的是，在微信小程序中要求::v-deep或/deep/前面必须还要有父元素的类名存在。如：文章来源地址https://www.toymoban.com/news/detail-585473.html
// 定义一个u-button组件
<template>
<view class="container">
<u-button type="primary" text="确定" @click="click"></u-button>
</view>
</template>
// 修改u-button组件内置样式
<style lang="scss" scoped>
.container ::v-deep button {
background-color: #FFFF00;
}
</style>到了这里，关于uniapp微信小程序系列（1）基础与入门的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
