本文介绍了微信小程序中的轮播图组件Swiper的使用，滚动视图的配置，利用wx.request进行数据请求，页面跳转、自定义组件的创建与通信，以及数据缓存、下拉刷新和上拉加载的实现。还涉及了获取和处理用户信息以及前端开发面试经验分享。
<swiper
//是否显示轮播上的点
indicator-dots=“{{indicatorDots}}”
//滑动方向是否为纵向
vertical=“{{vertical}}”
//是否自动切换图片
autoplay=“{{autoplay}}”
//自动切换时间间隔
interval=“{{interval}}”
//滑动动画时常
duration=“{{duration}}”
//是否采用衔接滑动
circular=“{{circular}}”
//轮播图上原点的颜色
indicator-color=“rgba(255, 255, 255, .3)”
//当前被选中的轮播图的小圆点颜色
indicator-active-color=“#ffffff”
class=“swiper”
//wx:for指令循环遍历数组
scroll-view，官方提供的滚动视图组件，它将内容包裹起来之后，当内容超出高度或宽度，那么可纵向或横向滚动视图区域，具体请看：scroll-view滚动视图，在这里主要使用到了其一个纵向属性scroll-y，默认是false，也就是不允许滚动，因此需要设置成true；
swiper，轮播图组件，网页上常见的功能组件，微信官方命名为滑块视图容器，该容器中只可放置swiper-item组件，其内是具体内容，关于使用到的属性已注释在组件上了，更多具体请看：swiper轮播图组件；
微信官方提供了请求数据的方法，并不需要自己引入axios或者ajax等工具，在微信中请求的方法叫做wx.request()方法，具体请看微信数据请求request，当然请求的接口地址的域名必须是在该小程序的后台登记过的，没有登记过是会报错的，即使接口正确；
当页面进行加载（也就是生命周期处于onload）的时候，向服务器请求数据，同时显示加载中的提示loading提示框，等到请求成功，返回了数据，那么就将加载中的提示关闭掉；
当请求成功之后，将请求到的数据存储到本地的data中，存储变量的方式和react类似，是通过setData()的方式存储的；
//引入接口地址，接口地址是统一写在一个文件中的，通过require引入
const interfaces = require(“…/…/utils/urlconfig.js”);
/**
- 生命周期函数–监听页面加载
*/
onLoad: function (options) {
const _this = this;
//显示加载中的提示框，文字为：加载中
wx.showLoading({
title: ‘加载中’,
})
//发起一个请求
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: {
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
总结一下这三次面试下来我的经验是：
-
一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！
-
代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！
-
尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！
-
多刷面经！
我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】获取。祝大家早日拿到自己心怡的工作！
篇幅有限，仅展示部分内容
VI1aJt-1712554016731)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-KlszsFDB-1712554016731)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
总结一下这三次面试下来我的经验是：
-
一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！
-
代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！
-
尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！
-
多刷面经！
我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】获取。祝大家早日拿到自己心怡的工作！
篇幅有限，仅展示部分内容
984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
