微信小程序接口数据封装 （附前端面试题）

今天说一下小程序接口数据的封装：

1.在与pages同级目录下新建http文件夹：

2.在http文件夹下新建env.js文件，搭建环境：

module.exports={
//开发环境
dev:{
baseUrl:'http://127.0.0.1:8080'
},
//生产环境
prod:{
baseUrl:'https://api.it120.cc'
},
//测试环境
test:{
baseUrl:'https://api.1909A.com'
}
}

3.在http文件夹下新建request.js文件,进行接口封装的操作：

const { baseUrl } = require('./env.js').prod
const vipUrl = "sbq"
module.exports = {
// request是一个函数，封装了request，其中的参数不填的话就会有默认值
request:function(url,method="GET",data={},isSubDomain=true){
//把正确的请求地址拼接起来
let fullurl = `${baseUrl}/${isSubDomain?vipUrl:""}/${url}`
//Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.
return new Promise((resolve,reject)=>{
wx.request({
url: fullurl,
method,
data,
header:{
//此处的头部信息要注意接口文档
"content-type":"pplication/x-www-form-urlencoded"
},
//成功回调
success(res){
if(res.statusCode === 200 && res.data.code===0){
//返回的数据
resolve(res.data.data)
}else{
console.log("接口有问题")
}
},
//失败回调
fail(){
console.log("接口问题")
}
})
})
}
}

4.在http文件夹下新建api.js文件,就是项目中用到的各种业务接口的封装（例举商品列表接口）：

const {request} = require('./request.js')
module.exports={
// 商品列表接口
goodsItem:()=>{
return request("shop/goods/list","GET","",true)
}
}

然后在对应的组件里面直接调用就可以：

// components/xhy_goodItem/xhy_goodItem.js
const { goodsItem }=require('../../http/api.js')
Component({

//组件的生命周期
lifetimes: {
created() {
this.getData();
},
},

/**
* 组件的初始数据
*/
data: {
goodItem: []
},

/**
* 组件的方法列表
*/
methods: {
getData() {
goodsItem().then(res=>{
this.setData({
goodItem:res
})
})
}
}
})

拿到数据，正常渲染页面就可以了。

前端面试题 :

1.前端性能优化手段？

a. 尽可能使用雪碧图

b. 使用字体图标代替图片

c. 对HTML，css，js 文件进行压缩

d. 模块按需加载

e. 资源懒加载与资源预加载

f. 避免使用层级较深的选择器及减少DOM深度

2.单页面应用和多页面应用的区别及优缺点？

单页面的概念： 单页面应用(SPA)，其实就是指只有一个主页面的应用，类似前端现在的三大框架，React.Vue,Angular 浏览器一开始要加载所有必须的html,js css。所有的页面内容都包含在这个所谓的主页面中。

单页面的原理: 利用js感知到URL的变化，通过这一点，可以用js动态的将当前的页面内容清除掉，然后将下一个页面的内容挂载到当前的页面上。页面每次切换跳转时，并不需要做html文件的请求，这样就节约了很多http发送延迟，我们在切换页面的时候速度很快。

单页面的优点：

a. 加载速度快，用户体验好，内容的改变不需要重新加载整个页面，基于这一点SPA对服务器压力较小。

b. 前后端分离

c. 页面视觉效果良好

单页面的缺点：

a. 不利于SEO（搜索引擎优化）

b. 页面初次加载时比较慢

c. 页面复杂度提高很多

多页面的概念： 多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整个页面都刷新，每次都请求一个新的页面。

多页面的优点:首屏加载时间快，SEO效果好

多页面的缺点：页面切换慢，每次切换页面都需要选择性的重新加载公共资源

3. var，let，const的区别？

var：var的作用域是函数作用域，在一个函数内利用var声明一个变量，则这个函数只在这个函数内有效，存在变量提升。

let ：作用域是块级作用域 不存在变量提升，不允许重复定义。

const ：一般用来声明常量，且声明的常量是不允许被改变的，声明的时候就赋值，不存在变量提升，不允许重复定义。

4. 箭头函数和普通函数的区别？

箭头函数：

a. this指向：箭头函数指向 定义时所在的作用域中的this指向

b. 箭头函数作为匿名函数，是不能作为构造函数的，不能使用new

c. 箭头函数不能换行

普通函数：

a. this指向：谁调用就指向谁

5. css优先级算法？

!important>内联>ID选择器>class选择器>元素选择器>通配符选择器>继承>浏览器默认属性