})
//发起一个请求
wx.request({
//请求的服务器地址，例子的地址是统一写的，因此这里只是引入urlconfig.js中写好的地址
url:interfaces.homepage,
header:{
// 返回的数据类型为json格式，当然默认是application/json格式
“content-type”:“application/json”
},
//请求成功后的回调函数
success(res){
// 请求成功代表有返回数据，那么通过setData保存数据，保存的数据会实时更新
_this.setData({
swipers:res.data.swipers,
logos:res.data.logos,
quicks:res.data.quicks,
pageRow:res.data.pageRow
})
//隐藏加载中的提示框
wx.hideLoading();
}
})
}
这里通过setData设置数据，刚开始有疑问，为什么要通过setData设置，直接通过类似下例的方法不可以吗？
this.data.swipers = res.data.swipers;
这种方式设置数据难道不行吗，这种设置当然是可以的，但是这种设置有一个致命缺陷，就是设置后的数据不会实时的响应式的渲染到页面上，比如；swipers初始时是一个空数组，页面上通过wx:for循环也没有结果，当使用setData()的方式设置值后，那么页面会实时的渲染新结果，如果是通过直接赋值的方式保存结果，那么此时页面是不会对其作出响应的，仍然是渲染的空数组；
在小程序中，页面A跳转到页面B，是通过官方提供的跳转方法：wx.navigateTo()，这个方法通常和事件绑定在一起（当然这个不是绝对的，比如需要根据用户是否登录过作为跳转依据，跳转到不同的页面），具体看示例
页面A，对view绑定了一个点击事件，事件类型是bindtap（点击事件），函数是showShopDetail，代表的是当点击这个view之后触发了showShopDetail这个函数
<view
wx:for=“{{item.desc}}”
class=“right-shop”
wx:key=“index”
data-txt=“{{shop.text}}”
wx:for-item=“shop”
bindtap=“showShopDetail”>
这个函数调用了wx.navigateTo进行页面跳转，跳转的同时携带了一个参数title，值是绑定在view上的自定义属性txt的值
showShopDetail(e){
wx.navigateTo({
//url是需要进行跳转的地址
//例子中是跳转到pages目录下shopList目录下的index页面，并携带了一个参数title
url: ‘/pages/shopList/index?title=’+e.currentTarget.dataset.txt,
})
}
新跳转的页面，比如这里是跳转到shopList这个页面，在shoplist这个页面中的onLoad生命周期内可以接收到传递过来的参数，
/**
- 生命周期函数–监听页面加载
*/
onLoad: function (options) {
//options中会携带传递过来的参数title
this.setData({
title:options.title
})
//设置页面标题
wx.setNavigationBarTitle({
title: options.title,
})
}
概述
小程序同样也支持将功能模块抽象成自定义组件，具体查看自定义组件，类似于页面，自定义组件类似于页面，由 json、wxml、wxss、js 4个文件组成，其中必须要在json文件中声明这是一个自定义组件
{
“component”: true
}
之后，在wxml中编写模版，wxss中编写样式，如果有事件需要传递，那么可以通过triggerEvent()方法进行传递
this.triggerEvent(“事件名”,obj)
如果是接收父组件的属性，那么需要在子组件的js文件中定义名字
Component({
/**
- 组件的属性列表
*/
properties: {
//定义了一个count属性，值的类型是Number类型，这个值是父组件上传递过来的
count:Number
},
/**
- 组件的初始数据
*/
data: {},
/**
- 组件的方法列表
*/
methods: {}
})
接着，在需要调用组件的json文件中新定义一个字段usingComponents，key是调用组件时的标签名，值是对应的组件地址
{
“usingComponents”: {
“number”:“/components/number/index”
}
}
案例
自定义组件创建
新建一个组件，在根目录下新建了一个componnents文件夹，之后新建了一个number文件夹，右击number文件夹，选择新建Component，输入名字后会字段生成4个标准文件
在index.wxml中输入结构，同时通过catch绑定两个点击事件
-
{{count}}
+
当然，json文件中必须先声明这是一个组件
{
“component”: true,
“usingComponents”: {}
}
之后就是事件传递了，当点击绑定的两个事件时，将事件往父组件传递
Component({
/**
- 组件的属性列表
*/
properties: {
//定义了一个count属性，值的类型是Number类型
count:Number
},
/**
- 组件的初始数据
*/
data: {},
/**
- 组件的方法列表
*/
methods: {
addCount(){
this.triggerEvent(“addCount”)
},
subtractCount(){
this.triggerEvent(“subtractCount”)
}
}
})
父组件调用
首先是在需要调用number组件的页面，进行组件的注册，组件的注册简单的说就是在调用的页面的json文件中的usingComponents字段中添加组件
{
“usingComponents”: {
//"/components/number/index"是组件所在的路径
“number”:“/components/number/index”
}
}
这样就算是注册了，之后就可以直接在wxml中调用了
数量:
//调用组件
<number
//这个值就是会传递到子组件中
count=“{{partData.count}}”
//绑定了一个事件，事件名就是子组件传递过来的addCount，触发后执行js文件中的addCount函数
catchaddCount=“addCount”
//绑定了一个事件，事件名就是子组件传递过来的subtractCount，触发后执行js文件中的subtractCount函数
catchsubtractCount=“subtractCount”>
这样基本就是一套完整的流程，和vue不同的是，vue是不允许直接修改父组件传递过来的属性的，小程序不同，当子组件接收到父组件传递过来的属性，如果对其做修改，修改的是在data中的副本，换句话说，当子组件接收到父组件的属性后，会在data中创建一个副本，如果对属性修改，那么修改的是副本并不是传递过来的属性；
这个场景是这样的，当把产品加入购物车后，关闭小程序，此时如果再打开，显然加入过购物车的商品必须是依旧存在的，那么为了获取之前加入到购物车的商品，就需要商品加入购物车的同时，将商品列表加入本地缓存中；
小程序的缓存是storage，类似web中的localStorage，具体可以查看官方文档数据缓存；
概述
查看缓存
设置缓存
通过wx.setStorage()设置缓存内容，比如
wx.setStorage({
//key就是属性名
key:“key”,
//data就是对应的属性值
data:“value”
})
读取缓存
通过wx.getStorage()读取缓存内容，比如
wx.getStorage({
//key就是需要读取的缓存的属性名
key: ‘key’,
//当读取成功之后，会执行success回调函数
success (res) {
console.log(res.data)
}
})
删除缓存
通过wx.removeStorage()读取缓存内容，比如
wx.removeStorage({
//需要删除的属性名
key: ‘key’,
//删除成功之后的回调函数
success (res) {
console.log(res)
}
})
案例
当打开购物车页面时，在onShow生命周期阶段，读取缓存中的商品列表，并且假如有商品列表，那么在tab的右上角显示商品数量
效果
代码
/**
- 生命周期函数–监听页面显示
*/
onShow: function () {
//获取缓存数据
wx.getStorage({
//缓存的属性名叫做cartInfo
key: ‘cartInfo’,
//读取成功的时候执行success回调函数
success(res){
const arr = res.data;
//判断获得的数组的长度是否大于0，如果大于0，那么代表有数据的
arr.length > 0 ?
//显示右上角文本
wx.setTabBarBadge({
//下标为2的tabBar
index: 2,
//文本内容是数组的长度
text: String(arr.length)
}):
//如果长度不大于0，那么就删除下标为2的tabBar的右上角文本
wx.removeTabBarBadge({
index: 2,
})
}
})
},
在微信中，其实这两种方法都已经写好了，毕竟这是移动端非常常用的功能
下拉刷新
下拉刷新这个功能，首先必须在json文件中进行配置，否则，即使在方法写了代码，也是不会生效的
{
“usingComponents”: {},
//下拉刷新设置成true，代表需要下拉刷新这个功能
“enablePullDownRefresh”:true,
“backgroundTextStyle”:“dark”
}
之后，在页面的js文件中，和生命周期并列的有这么一个函数
/**
- 页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function () {
//微信官方提供的方法，作用是在标题上显示加载状态
wx.showNavigationBarLoading();
const _this = this;
//下拉刷新代表需要重新请求数据，因此这边重新发起请求
wx.request({
//请求地址
url: interfaces.productionsList,
//请求成功以后的回调函数
success(res){
_this.setData({
productionsList:res.data
})
//微信官方提供的方法，因为一旦请求成功有返回了，那么下拉加载动画就不需要了，可以立即隐藏掉
wx.stopPullDownRefresh();
//微信官方提供的方法，隐藏标题上的加载状态
wx.hideNavigationBarLoading();
}
})
},
上拉刷新
上拉刷新其实和下拉加载差不多，当内容滚动到大约距离底部50px的时候，会触发这个函数
/**
- 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
//停止下拉刷新，不管有没有，防止上拉刷新的时候，还有下拉加载的动画
wx.stopPullDownRefresh();
//微信官方提供的方法，作用是在标题上显示加载状态
wx.showNavigationBarLoading();
//向服务发起请求获得数据
wx.request({
url: interfaces.productionsList + “/” + _this.data.page + “/” + _this.data.size,
success(res){
//隐藏标题的加载状态
wx.hideNavigationBarLoading();
}
})
},
获取用户信息
微信对获取用户信息有严格的要求，具体内容见wx.getUserInfo(Object object)，想要获取用户信息，必须是通过微信提供的开放能力open-type获取，而且必须是经过用户确认同意的，大致流程：
确认当前获取用户信息的api（也就是open-type上的getUserInfo）是否可用
//设置
data: {
canIUse:wx.canIUse(‘button.open-type.getUserInfo’)
}
canIUser，判断当前指定的Api是否可用，返回值是一个布尔值（关于canIUse的更多信息查看canIUse详情），使用的是canIUser中的： c o m p o n e n t . {component}. component.{attribute}.${option} 方式来调用，
-
${component} 代表组件名字，也就是button组件
-
${attribute} 代表组件属性，open-type属性
-
${option} 代表组件属性的可选值，获取用户基本信息的值是getUserInfo
之后，给按钮声明一个属性open-type（关于open-type的值更多请看open-type），值是固定的，getUserInfo代表获取用户信息，之后绑定了一个事件，事件类型是getuserinfo，同时为其添加了一个函数，方法名是getUserInfo，点击按钮后执行了getUserInfo这个方法
<button wx:if=“{{!hasUserInfo && canIUse}}”
open-type=“getUserInfo”
bindgetuserinfo=“getUserInfo”>
获取头像昵称
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
《前端开发四大模块核心知识笔记》
最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。
2453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
