# uni-app

> 基于 `vue` 语法的 `全端开发框架`

https://uniapp.dcloud.io/

使用:

1. 全局安装vue的脚手架
2. 创建项目

   ```bash
   vue create -p dcloudio/uni-preset-vue my-project
   ```

3. 运行项目
4. 使用微信小程序开发者工具来导入和预览项目

==注意: 只能修改uni-app项目的文件, 不能修改编译后的小程序文件==

## 使用cli

https://uniapp.dcloud.net.cn/quickstart-cli.html

## uni-app 配置文件

> 对应 小程序 app.json 全局配置 和 页面配置 index.json

```
src\pages.json
```

![](https://img.081024.xyz/20210220155544.png)

## uni-app 项目配置

> 例如修改 appid

```
src\manifest.json
```

修改了项目的配置文件 可能需要重启

![image-20210220093139256](http://192.168.68.69:9876/medias/image-20210220093139256.png)

## uni-app 中 使用 sass

> 内置好了 sass 配置 没有帮你安装好依赖

自己去安装 sass的依赖

```
npm  i sass sass-loader 
```

![image-20210220160219961](https://img.081024.xyz/20210220170114.png)

可能会出现版本过高的情况

卸载

```
npm uninstall sass-loader
```

重新-安装对应的版本

```
npm i sass-loader@10
```

代码中使用 `sass`

```vue
<style lang="scss" >
    .content {
        background-color:$uni-color-error ;
    }
</style>
```

## uni-app 生命周期

1. 应用 `App.vue` 小程序 `app.js` 生命周期类似
2. 页面 `index.vue` 小程序 页面 `index` 生命周期类似
3. 组件 的生命周期 类似 vue的生命周期

使用uniapp开发项目的时候

1. 当前编译的文件是谁
   1. App.vue 使用的生命周期 就是 小程序的应用的生命周期
   2. 页面.vue 使用的生命周期 就是 小程序 页面的生命周期
   3. 组件的.vue 使用的生命周期 就是 vue的生命周期

## uni-api

* 出现目的

1. 很多的原生的小程序的api 不支持 promise `wx.request`
2. 想要做一个跨平台 应用 那么 发送请求 该用哪一代码来发送
   1. axios 针对 网页的!!!
   2. wx.request 只针对 微信小程序
   3. 自己去封装一个api 可以去兼容适配所有的客户端

      ```
      if (微信小程序) wx.request
      if (web)  axios
      if (支付宝) ... 
      ```

* 如何使用

```
uni.request
```

## 语法

1. 标签优先使用小程序的或者uView
2. js语法和vue一样
3. 特有的api:  `uni.request`, `uni.showToast`
4. 生命周期参考上面的