2020.8.08 微信小程序 （附前端面试题）

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

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选择器>元素选择器>通配符选择器>继承>浏览器默认属性