学习目标:
- 寻找移动端的接口请求的解决方案
- 满足开发需求
- 打包压缩后减少体积,且和平常的使用差别不能太大【习惯问题】
学习内容:
- 先确认架构和思路
- 寻找解决方案
- 分类实践解决方案的可行性
学习产出:
- 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>