一、认识uni-app

官网：uni-app官网 (dcloud.io)

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见 (opens new window)），腾讯课堂官方为uni-app录制培训课程（详见 (opens new window)），开发者可以放心选择。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见 (opens new window)）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

uniapp框架图

二、环境搭建

UniApp开发的环境搭建
下载及安装hbuilderx；https://www.dcloud.io/hbuilderx.html

解压安装打开即可

微信开发者工具：
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

 

 傻瓜安装完就好了

去微信公众号平台： 微信公众平台 (qq.com)

注册生成你的AppID

点击开发设置

 

保存好你这组数据。

三、创建一个项目

文件--》新建--》项目--》输入你项目名，选择创建路径，默认模板

 

运行：选择你的浏览器，或者选择微信小程序运行

 

 四、uni-app的生命周期

uni-app完整支持 Vue实例的生命周期，同时还新增应用生命周期及页面生命周期。

1、应用生命周期

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

// 只能在App.vue里监听应用的生命周期

设置404跑丢页面

 

 

   然后由这个页面会跳转到专门的404页

 

 2、页面生命周期

onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为object（用于页面传参）
onShow	监听页面显示
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载
onPullDownRefresh	监听用户下拉动作时触发
onReachBottom	页面上拉触底事件的处理函数
onShareAppMessage	用户点击右上角分享 微信小程序时触发
onPageScroll	监听页面滚动
onTabItemTap	当前是 tab 页时，点击 tab 时触

 

 onshow()

 

onPullDownRefresh()： 下拉刷新

 

onReachBottom（）： 页面到达底部：

 index.vue 代码

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

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onShow() {
			console.log('首页在展示！')
		},
		onLoad(){
		},
		onPullDownRefresh(){
			console.log('页面下拉刷新')
		},
		onReachBottom() {
			console.log('页面到达底部')
		},
		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;
	}
	.aa{
		height: 900px;
	}
</style>