uniapp微信小程序系列（1）基础与入门

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，支持iOS、Android、Web及各平台小程序。本系列文章为uni-app开发微信小程序知识点的归纳总结。

项目创建推荐

项目创建一般推荐：uni-ui项目，该项目架构包含了uni官方提供的内嵌UI组件库，方便直接使用。

页面生命周期归纳

uni-app中的页面文件，通常会存放在工程根目录下的pages文件夹。

每次新建页面，均需在pages.json中配置pages列表；未在pages.json -> pages 中配置的页面，uni-app会在编译阶段进行忽略。pages.json的完整配置参考（官网）：全局文件。

小程序页面的生命周期，主要包括：

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本身不是页面，这里不能编写视图元素，也就是没有