uni

您所在的位置：网站首页 › qq支持的最大文件是什么 › uni

uni

#uni| 来源: 网络整理| 查看: 265

在我们使用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加载效果是在我们的接口在请求接口数据时的一个加载效果，是为了使我们的页面更加的美观，同样也是为了用户体验感设计的

接口请求 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); } } }

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

promise和async await有什么区别？

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

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

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

【本文地址】

uni

uni

今日新闻

推荐新闻