欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

2020.8.08 微信小程序 (附前端面试题)

程序员文章站 2022-06-22 20:12:23
今天说一下小程序接口数据的封装: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...

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

1.在与pages同级目录下新建http文件夹:
2020.8.08  微信小程序  (附前端面试题)

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

本文地址:https://blog.csdn.net/weixin_45616142/article/details/107888591