devStandard/docs/learning/6-小程序/uni-app.md

uni-app

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

https://uniapp.dcloud.io/

使用:

1. 全局安装vue的脚手架

2. 创建项目

   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

<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. 生命周期参考上面的