2022-3-25 Vue移动端接口请求学习历程

学习目标：

• 寻找移动端的接口请求的解决方案
• 满足开发需求
• 打包压缩后减少体积，且和平常的使用差别不能太大【习惯问题】

---

学习内容：

1. 先确认架构和思路
2. 寻找解决方案
3. 分类实践解决方案的可行性

---

学习产出：

• uview在luch-request的基础上改造的ni.$u.http
• luch-request
• uni-ajax
  1、uview在luch-request的基础上改造的ni.$u.http官网关于http请求的介绍
  2、 luch-request的使用可以参考luch-request
  3、uni-ajax的使用方式可以参考uniajax.ponjs.com

我推荐的是使用第一种的uview的方式：【1不用重新下载新的依赖，个人想法：可以避免时就尽量去避免了，2、不用引入额外的文件增大打包的体积】
先下载uview-ui

npm i uview-ui

在main.js上引入并使用【使用的语句要写在vue示例创建后】

import App from "./App";
//vue2的写法如下
import uView from "uview-ui";
import Vue from "vue";
Vue.use(uView);//必须写在引入Vue的后面，否则不生效
const app = new Vue({
  ...App,
});
require("./common/service.js")(app);//app就是Vue的实例，在该封装的js下可直接访问到实例
//vue3的写法如下
import {
  createSSRApp,
} from "vue";
export function createApp () {
  const app = createSSRApp(App);

  app.use(uView);//必须放在后面
  require("./common/service.js")(app);//这里是引入一下封装好的请求文件，主要内容是请求和响应的拦截请求相关
  return {
    app,
  };
}

相关推荐：
在使用uview的其他知识点：

//vue.config.js
module.exports = {
  transpileDependencies: ["uview-ui"],
};
//uni.scss
//必须在内容的最前面引入
@import 'uview-ui/theme.scss';
//pages.json,easycom可以在打包时去掉一些未使用的组件，减少了打包的体积，对性能也有好处
"easycom": {
	"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
"pages":[]
//App.vue
//必须记得写 lang="scss"
<style lang="scss">
	/*每个页面公共css */
	@import "uview-ui/index.scss";
</style>