uniapp小程序的分包配置、发起请求调接口、封装showMsg提示框、页面跳转

一、配置小程序分包

分包可以减少小程序首次启动时的加载时间。为此，我们在项目中，把 tabBar 相关页面放到主包中，其它页面放到分包中。在 uni-app 项目中，配置分包的步骤如下：

1. 在项目根目录中，创建分包的根目录，命名为 subpkg

2. 在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构

{
  "pages": [  // tabBar 相关页面
    {
      "path": "pages/home/home",
      "style": {}
    }...  ...
  ],
  "subPackages": [  // 分包相关页面
    {
      "root": "subpkg",
      "pages": []
    }
  ]
}

3. 在 subpkg 目录上右键，点击 新建页面 选项，并填写页面的相关信息

二、小程序中发起请求

1. 配置网络请求

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。在项目的 main.js 入口文件中，通过如下的方式进行配置：

请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用

官方文档： @escook/request-miniprogram - npm

import { $http } from '@escook/request-miniprogram'

uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.xxxxxx.com'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

2. 请求轮播图的数据

2.1 实现步骤

1. 在 data 中定义轮播图的数组

1. 在 onLoad 生命周期函数中调用获取轮播图数据的方法

1. 在 methods 中定义获取轮播图数据的方法

2.2 示例代码

      export default {
        data() {
          return {
            swiperList: [],
          }
        },
        onLoad() {
          this.getSwiperList()
        },
        methods: {
          async getSwiperList() {
            const { data: res } = await uni.$http.get('/api/public/...')
            if (res.meta.status !== 200) {
              return uni.showToast({
                title: '数据请求失败！',
                duration: 1500,
                icon: 'none',
              })
            }
            this.swiperList = res.message
          },
        },
      }

2.3 渲染 UI 结构

      <template>
        <view>
          <!-- 轮播图区域 -->
          <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
            <!-- 循环渲染轮播图的 item 项 -->
            <swiper-item v-for="(item, i) in swiperList" :key="i">
              <view class="swiper-item">
                <!-- 动态绑定图片的 src 属性 -->
                <image :src="item.image_src"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </template>

3. 调用需要携带参数的接口get/post

      async login() {
        const data/param = {
          phone：this.phone,
          password：this.password,
        };
        const res = await uni.$http.get/post('/api/public/...', data/param)
        if (res.code == '200') {
          // 其他操作或调用其他方法
         return uni.showToast({
           title: '登录成功！',
           duration: 1500,
           icon: 'success',
         })
        } else {
          return uni.showToast({
           title: '登录失败，请重试！',
           duration: 1500,
           icon: 'none',
         })
        }
      },

三、封装 uni.$showMsg() 方法

当数据请求失败或成功时，经常需要调用 uni.showToast({ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。具体的改造步骤如下：

1. 在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法

      uni.$showErrorMsg = function (title = '失败！', duration = 1500) {
        uni.showToast({
          title,
          duration,
          icon: 'none'
        })
      }
      uni.$showSuccMsg = function (title = '成功！', duration = 1500) {
        uni.showToast({
          title,
          duration,
          icon: 'success'
        })
      }

2. 在需要提示消息的时候，直接调用 uni.$showMsg() 方法

      async login() {
        const data = {
          phone：this.phone,
          password：this.password,
        };
        const res = await uni.$http.get('/admin/login', data)
        if (res.data.code == '200') return uni.$showSuccMsg('登陆成功！')
        if (res.data.data == '登陆失败') return uni.$showErrorMsg('登陆失败！')
      },

三、小程序的跳转方式

navigateTo：保留当前页，跳转到另一个页面，有返回按键

redirectTo：关闭当前页，重定向到其他页面，没有返回按键

switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

navigateBack：返回一级或多级

uni.switchTab({  // 底部tabbar页面跳转
   url: '/pages/home/home'
})

uni.navigateTo({ // 其他页面跳转
   url: `/subpkg/mingxi/mingxi`
})

getItem() {
   money = this.money
   time = this.time
   uni.navigateTo({  // 携带参数跳转
     url: `/subpkg/mingxi/mingxi?money=${money}&time=${time}`
   })
}