2024年Web前端最全掉了两根头发，+微信小程序+（项目） 出炉了(1)，前端入门视频教程

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

icon图标解决法

---

前言：

挺久不写小程序了，我蹲在厕所哭了很久，我把语法给忘了

掉了两跟头发还是将大demo整完

掐着人中也要更，兄弟们卷起来，

四分资料双手奉上

1 微信开发官方文档 点 https://developers.weixin.qq.com/miniprogram/dev/component/https://developers.weixin.qq.com/miniprogram/dev/component/

2 Vant Weapp组件库 点https://vant-contrib.gitee.io/vant-weapp/#/quickstarthttps://vant-contrib.gitee.io/vant-weapp/#/quickstart

3 视屏配套  .   .      .    http://yun.itheima.com/course/589.html?bilihttp://yun.itheima.com/course/589.html?bili

4 我的粑粑源码奉上 https://gitee.com/zhang-kun8888/applet-of-we-chat.githttps://gitee.com/zhang-kun8888/applet-of-we-chat.git

会在下面着重说下封装，项目图例

 

封装请求接口，解决请求嵌套、回调地狱，如果嵌套只需不断.then下去

---

// 这里封装请求接口，解决请求嵌套、回调地狱，如果嵌套只需不断.then下去

//定义一个变量，定义一个回调，回调里有参数，回调里面写new promise,引入这个文件时需要解构变量名，因为参数接收的多不知道是哪个所以解构

export const request = (params) => { //将封装好的请求赋值给常量request并导出request

wx.showLoading({

title: ‘加载中……’,

// 是否出现遮罩不能点击其他内容

mask: true

})

return new Promise((resolve, reject) => { //定义promise

wx.request({

…params, //将接收的参数解构进来 get method data。。。

url: ‘https://api-hmugo-web.itheima.net/api/public/v1’ + params.url,

success: (result) => {

// console.log(result);

resolve(result.data.message)

},

fail: (err) => {

reject(err)

},

complete: () => {//不管成功或失败都会执行的函数

wx.hideLoading()

}

})

})

}

// 封装 showToast

export const showToast = (params) => {

return new Promise((resolve, reject) => {

wx.showToast({

…params,

success: (res) => {

resolve(res)

},

fail: (err) => {

reject(err)

},

complete: (res) => { },

})

})

}

// 封装 login

export const login = () => {

return new Promise((resolve, reject) => {

wx.login({

success: (res) => { resolve(res) },

fail: (err) => { reject(err) },

timeout: 5000,

})

})

}

使用export单个导出，在页面使用需要用{xx,xxx}

当然了一般我使用uniapp开发，这样开发实在是太慢，uniapp也有源码，需要就上传，比这个demo要为详细

添加购物车逻辑（经典）

---

// 添加购物车

add_cart() {

// console.log(123);

// 获取购物车数据或空，第一次获取是空，

let getStorag = wx.getStorageSync(‘cart’) || [];

// (如果从本地取出来的数据id===定义的总数据的id) == -1,

if (getStorag.findIndex(v => v.goods_id === this.data.detailList.goods_id) == -1) {

//不存在 第一次添加加字段num=1 push 追加

this.data.detailList.num = 1;

// 添加字段checked 购物车要用但是数据里没有

this.data.detailList.checked = true;

// 全部push

getStorag.push(this.data.detailList)

} else {

// 已存在 num++ 让当前的++

getStorag[getStorag.findIndex(v => v.goods_id === this.data.detailList.goods_id)].num++;

}

// 添加到本地存储

wx.setStorageSync(‘cart’, getStorag);

this.num();

wx.showToast({

title: ‘添加购物车’, //提示的内容,

icon: ‘success’, //图标,

duration: 500, //延迟时间,

mask: true, //显示透明蒙层，防止触摸穿透,

success: res => { }

});

},

上滑加载、下拉刷新

---

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】