首页

搜索栏

<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 中的完整示例

功能:

1. 提取接口中 公共的 url部分 方便后期的维护

2. 每一次发送请求之前 显示加载中...

3. 每一次请求回来之后 关闭加载中...

4. 自动的在访问私有路径 接口的时候 带上 token 拦截器

5. 请求回来之后 统一判断 状态码 拦截器

   1. 404 提示找到路径
   2. 403 提示没有权限
   3. 500 服务器奔溃

6. 新建文件 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
   }
   

7. 在 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