uni-app的基本使用

在我们使用uni-app之前，我们首先先了解一下目录结构

pages 定义uniapp页面专用的目录

components 自定义第三方组件，

static 静态资源目录

uni_modules uniapp插件自动下载的目录

App.vue main.js 入口文件的内容

pages.json是uniapp的全局配置文件

globalStyle 全局配置项

pages 小程序页面的列表数据

tabbar 底部tabbar配置

subPackages 分包加载

以上是我们uni-app的目录，以及他们的作用是什么

代码展示

{
    "pages": [ //pages数组中第一项表示应用启动页，
        {
            "path": "pages/home/home",
            "style": {
                "navigationBarTitleText": "首页",
                "enablePullDownRefresh": false
            }

        },
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "我的"
                // "backgroundColor": "#FF0000"
            }
        }, {
            "path": "pages/cart/cart",
            "style": {
                "navigationBarTitleText": "购物车
                ",
                "enablePullDownRefresh": false
            }

        }, {
            "path": "pages/cate/cate",
            "style": {
                "navigationBarTitleText": "分类
                ",
                "enablePullDownRefresh": false
            }

        }
    ],
//全局样式设置
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#0088dd",
        "backgroundColor": "#F8F8F8",
        "enablePullDownRefresh": true
    },
//tabbar切换
    "tabBar": {
        "selectedColor": "#De0000",
        "list": [{
                "pagePath": "pages/home/home",
                "text": "首页",
                "iconPath": "static/tab_icons/home.png",
                "selectedIconPath": "static/tab_icons/home-active.png"
            },
            {
                "pagePath": "pages/cate/cate",
                "text": "分类",
                "iconPath": "static/tab_icons/cate.png",
                "selectedIconPath": "static/tab_icons/cate-active.png"
            },
            {
                "pagePath": "pages/cart/cart",
                "text": "购物车",
                "iconPath": "static/tab_icons/cart.png",
                "selectedIconPath": "static/tab_icons/cart-active.png"
            },
            {
                "pagePath": "pages/index/index",
                "text": "我的",
                "iconPath": "static/tab_icons/my.png",
                "selectedIconPath": "static/tab_icons/my-active.png"
            }
        ]
    },
    "uniIdRouter": {}
}

拦截器配置

我们在main.js中，配置我们的拦截器

//配置拦截器
uni.addInterceptor("request", {
    //invoke请求发送出去之前触发的效果
    invoke(config) {
        console.log("接口发起请求");
        console.log(config);
        const baseUrl = "/https://api-hmugo-web.itheima.net/api/public/v1/";
        //请求接口地址的拼接
        config.url = baseUrl + config.url;
        
        //loading加载效果
        uni.showLoading({
            title:"努力加载中"
        })
    },

    complete() {
        console.log("请求回调成功触发");
        
        uni.hideLoading();//隐藏效果
    }
})

我们给他设置的loding加载效果是在我们的接口在请求接口数据时的一个加载效果，是为了使我们的页面更加的美观，同样也是为了用户体验感设计的

接口请求

<script>
    export default {
        data() {
            return {
                title: 'Hello UNI-APP'
            }
        },
        onLoad() {
            this.getTest();
        },
        methods: {
            async getTest() {
                //测试请求一下接口数据
                let [err, res] = await uni.request({
                    url: "home/swiperdata"
                });

                console.log(res);
            }
        }
    }
</script>

在此补充一下，如果想要判断是否是可以使用promise进行接口数据的请求，我们可以打印这个请求的方法，如果能打印出来我们promise那三种状态，那么就说明我们可以使用promise的方法，如果没有打印出来promise的三种状态中的任意一个，那么就说明不能使用promise

promise和async await有什么区别？

promise的话，在我们请求接口的过程中，它可以接着执行下面的操作，他是一个异步的方法，目的是为了解决回调地狱的问题

注：回调地狱（回调函数中嵌套回调函数）

async await是用异步的方法执行同步的操作，在我们的接口返回数据之前，我们不能进行一些其他的操作，如果我们上面请求的接口下面要使用，我们就可以使用async await编写