125 lines
2.4 KiB
Markdown
Executable File
125 lines
2.4 KiB
Markdown
Executable File
# 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
|
|
```
|
|
|
|
|
|
|
|
## uni-app 项目配置
|
|
|
|
> 例如修改 appid
|
|
|
|
```
|
|
src\manifest.json
|
|
```
|
|
|
|
修改了项目的配置文件 可能需要重启
|
|
|
|
|
|
|
|
## uni-app 中 使用 sass
|
|
|
|
> 内置好了 sass 配置 没有帮你安装好依赖
|
|
|
|
自己去安装 sass的依赖
|
|
|
|
```
|
|
npm i sass sass-loader
|
|
```
|
|
|
|
|
|
|
|
可能会出现版本过高的情况
|
|
|
|
卸载
|
|
|
|
```
|
|
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. 生命周期参考上面的
|
|
|