uni-app小程序商城 (2)
首页
搜索栏
<u-search></u-search>
在多个页面使用, 后续拆分成组件,
easycom
轮播图
<u-swiper></u-swiper>
- Promise 封装
uni-app 对部分 API 进行了 Promise 封装，返回数据的第一个参数是错误对象，第二个参数是返回数据。
uni.request({
url:‘https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata‘,
})
// .then(console.log)
//promise会传递参数给它
.then(res=>{
const message = res[1].data.message
}
-
箭头函数后面跟({}), 就不会把大括号解析成语句块的开始, 而是对象的一部分 ,()包起来, 只有一句, 默认会return
this.list = message.map(v=>({ ...v,image:v.image_src }))
底部导航栏
uni-app的tabbar配置项, 在
page.json中
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}]
}
tabbar
http请求封装
https://uviewui.com/js/http.html 中的完整示例
功能:
-
提取接口中 公共的 url部分 方便后期的维护
-
每一次发送请求之前
显示加载中... -
每一次请求回来之后
关闭加载中... -
自动的在访问私有路径 接口的时候 带上 token 拦截器
-
请求回来之后 统一判断 状态码 拦截器
- 404 提示找到路径
- 403 提示没有权限
- 500 服务器奔溃
-
新建文件
src/common/http.interceptor.js// install 名字不要改 规范 => 类似vue插件的封装 const install = (Vue, vm) => { // 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token变量 Vue.prototype.$u.http.setConfig({ // 统一的公共接口地址 baseUrl: ‘https://api-hmugo-web.itheima.net/api/public/v1‘, // 发送请求时 显示的文字 loadingText: ‘努力加载中~‘, // 如果发送请求后800内 数据还没有回来 才显示加载中 loadingTime: 800, // 显示加载中 showLoading: true, }); } export default { install } -
在
src/main.js中来引入代码引入和使用的位置不能乱改import Vue from ‘vue‘ import App from ‘./App‘ import uView from "uview-ui"; // http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径 import httpInterceptor from ‘@/common/http.interceptor.js‘ Vue.config.productionTip = false App.mpType = ‘app‘ Vue.use(uView); const app = new Vue({ ...App }) Vue.use(httpInterceptor, app) //app通过Vue.use传给httpInterceptor app.$mount()
在new Vue()后面的原因是，外部JS文件需要引用vue的实例，也即this对象，要等main.js中通过new创建了实例之后才能引用。 在app.$mount()之前的原因是，在Vue挂载this实例(也即初始化App.vue)之前配置请求信息，所以在App.vue中也能正常发出请求。
tsconfig.json报错
在配置文件“xxx/tsconfig.json”中找不到任何输入。指定的 "include" 路径为“["**/*"]”，"exclude" 路径为“[]”。
原因是有ts配置, 但没有找到ts文件, 不用管
image 全局样式
image{
/* 宽度等于父盒子的宽度, 不然image有默认的宽度320会撑开 */
Width:100%;
/* 移除图片标签默认的3px 间隙 */
vertical-align: middle;
}
uni-app小程序商城 (2)
原文：https://www.cnblogs.com/jiutianzhiyu/p/14705928.html