01-基础

下载微信开发者工具：传送门

下载后安装，点击运行工具：

 扫码登录

---

 uni-app 规范：

1.页面文件遵循Vue单文件组件规范

2.组件标签靠近小程序规范

3.接口能力（JS API）靠近微信小程序规范

4.数据绑定及事件处理同Vue.js规范

5.为兼容多端运行，建议使用flex布局进行开发 

upiapp框架会为我们自动带上各个浏览器的样式前缀

---

uniapp特色:

1.条件编译

2.App端的 Nvue 开发（native vue的简写）

Nvue内置了weex的渲染引擎，weex为App提供了源生的渲染能力，在Nvue中我们既可以使用weex的组件和API，也可以使用uniapp的组件和API，这就相当于Nvue为weex渲染引擎补充了大量的uniapp的组件和API

3.HTML5+ 

像一些比较复杂的功能，在纯前端很难做到的时候，我们可以使用原生的安卓和IOS插件来帮助我们去实现这些功能。同时HTML5+还内置了几十万种API和方法，让我们能够方便的快速实现这些丰富的原生能力。

需要说明：Nvue 和 HTML5+只能在APP端去使用，在H5和小程序端是无法使用的，如果我们项目只是去实现APP端的话，不妨去体验一下Nvue和HTML5+。

---

 uniapp知识点：

---

 搭建uniapp开发环境：

两种创建uniapp项目的方式：

1.安装并运行HbuilderX（uniapp自家的产品，对uniapp比其他编辑器支持度高）

传送门 下载了正式版的APP开发版

打开hbuilderX后新建项目：

2.使用vue-cli的方式运行项目

前提要装有node和vue cli

使用命令：

vue create -p dcloudio/uni-preset-vue test-uniapp（项目名）

安装成功后提示选择模板：

 选择模板后回车，安装模板后，就可以进入模板项目，运行启动项目了

 两种创建项目的方式：（左边第一种hbuilderX自建项目的模板，右边vue-cli模板），我们使用vue开发基本都会选择vue-cli的方式把，但是我们用hbuilderX编辑器更好，因为自带提示，用其他编辑器如Vscode就没有,比如下面的右图，是在hbuilderX中打开的项目，输入就有提示，同样的项目VSCODE中就没有提示。

---

1. 它拥有像vue一样的模板语法{{}}，v-if条件判断，v-for循环，写法与vue一模一样

---

 2..基础组件：就是一些标签，如view 相当于div，text相当于span，写的时候对照着官方文档，组件上还可以加上一些内置的属性如：

 

 这样鼠标按下去的时候，就会出现设置的边框

---

 3.自定义组件：

自定义组件创建与vue一样的方式，引入的时候，直接@路径，就代表是src下的，不需要我们像vue中去进行配置（uniapp帮你配置好了）

组件之间的数据通信跟vue一样。

---

 4.uniapp中的一些api的使用

输出结果：

---

 5.条件编译

 如果上面加上h5，就会在h5页面（就是我们谷歌浏览器中看到这句话）

 在样式和方法中同样这样写，就是把要加条件编译的代码用#ifdef #endif包裹一下

---

 6.样式

 

 在uniapp中写样式的单位可以是px，rpx , rem , vw/vh

rpx是一个相对于屏幕宽度的自适应单位。 在uniapp是以750屏幕宽度为基准的

 引入外部样式文件：同vue一样，用@import '~~~'

---

 7.生命周期：

1）应用的生命周期

在App.vue文件中

启动编译：

 注意：第一次需要设置微信开发者工具的本地文件路径，还需要打开微信开发者工具的设置-安全设置功能：

 

 接着，就会自动打开微信开发者工具

非常注意的一点：微信开发者工具的启动必须是用上面说到的用uniapp创建的upiapp的项目，如果用vue-cli创建的项目是虽然可以启动微信开发者工具，但是不会自动打开项目，如果自己导入项目，会报错。

---

 2）页面生命周期

 

 因为rediect会卸载掉（关闭）上一个页面，所以再进来的时候还会触发onLoad,onShow,onReady 钩子

 

---

 3）组件生命周期

就是一个vue的生命周期，和 应用生命周期，页面生命周期合起来的执行顺序：

 

---