上手uni-app的基础：vue和微信小程序
uni-app相关基础
概念
背景： 在讲uniapp之前，我们先来讲一下，当前前端移动端开发存在的问题。对于前端来说，移动端的种类有很多：ios、安卓、H5、各种小程序（微信/支付宝/百度/头条，注：小程序不仅仅存在于微信app中），如果想要把同一个项目展示到不同的终端，需要解决很多问题，例如每个终端的展示方式不同，通信方式等。
解决办法有两个：
1. 针对不同终端开发对应的代码，但是这样对开发人员成本很高，需要学习不同终端的相关知识
2. 开发出一套代码，通过中间转化者打包发布到ios、安卓、H5、各种小程序等移动端平台中（甚至可以打包到web端），而uni-app就扮演着这样的中间转化者的角色注：可以这么理解，我们在开发web端代码的时候，一般是打包成能够被浏览器识别的js\html\css，因此在移动端开发也是需要类似浏览器相同的平台（移动端为webview）来识别前端代码。uni-app就是在这个基础上处理不同webview的差异，进行打包代码的
概念：uniapp是一个基于vue.js的前端框架中的一种全端应用框架，该框架可以让开发者可以编写一套代码就可以打包运行到多种终端的前端应用框架，就不用去学习各种终端应用框架了，减少了开发成本。
环境搭建
项目介绍 & 开发规范
uniapp框架需要特定的环境，因此我们需要在我们电脑中安装对应的环境，主要有两个要求： 1.安装HbuilderX编辑器（适合uniapp的一种IDE） 2.安装微信开发者工具（微信开发者工具，因为项目如果要打包成微信小程序，而微信小程序必须要在微信开发者工具中预览，所以需要安装微信开发者工具）
项目目录基本介绍
- pages目录存在所有的页面
- static文件存放静态资源
- unpackage文件为打包目录，存放打包输出的文件
- App.vue是根组件，也是页面 de的入口文件，所有页面都是在App.vue下面进行切换，在这个文件中可以调用应用的生命周期函数
- main.js 文件是项目的入口文件，主要作用是初始化vue实例并使用需要的插件
- mainfest.json 文件是应用的配置文件用于指定应用的名称、图标、权限等
- pages.json 对uniapp进行全局配置，决定页面的路径，窗口样式、原生导航栏等
开发者开发uniapp时，需要注意的开发规范
为了实现多端兼容，综合考虑编译速度、运行性能等、需要约定如下开发规范：
1.组件的书写规范：页面的书写遵循组件的单文件规范
2.组件中所使用标签接近小程序规范（uni-app组件规范）
3.接口能力接近微信小程序规范
4.数据绑定和事件处理同vue.js规范
5.生命周期有app和页面自己的生命周期
6.布局建议使用flex布局，兼容性好
相关配置
全局配置 & 页面配置
数据绑定
uni-app的生命周期
uniapp的生命周期主要分为三类：应用生命周期、页面生命周期、页面内组件生命周期\
(1) 应用生命周期：
onlaunch、show、hide
(2) 页面生命周期：
- 按照页面的加载 onLoad(加载后开始渲染)、
- 页面的显示 onShow、
- 渲染完成 onReady、
- 隐藏 onHide、
- 页面的卸载 onUnload
(3) 组件生命周期：
beforeCreate： 在实例初始化之后被调用created： 实例创建完成后被立即调用--调函数、beforeMount： 在挂载开始之前被调用mounted： 挂载到实例上去之后调用destroyed：Vue 实例销毁后调用
注意：项目和页面的生命周期都存在显示和隐藏两个钩子：onShow和onHide，所以在记忆的时候不用突出记忆，项目中的重要的钩子是项目发起钩子：onLauch，页面中重要的钩子由是三个：onLoad、onReady、onUnload 总结：进入应用后整体生命周期加载顺序：
App LaunchApp Showpage onLoadpage onShowcomponent beforeCreatecomponent createdcomponent mountedpage onReady
