《微信小程序》入门小程序-商城小demo的实现_上下拉刷新

<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”>

{{shop.text}}

这个函数调用了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%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后的最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体获取

ype上的getUserInfo）是否可用

//设置

data: {
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-OPsFNeLf-1712994669275)]

[外链图片转存中…(img-8JqQtp2y-1712994669276)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-os8UfgRo-1712994669276)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后的最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体获取

[外链图片转存中…(img-0I2WBFm5-1712994669276)]

[外链图片转存中…(img-z9qS6R58-1712994669277)]

[外链图片转存中…(img-c7luUiCr-1712994669277)]

[外链图片转存中…(img-3lY2iRYt-1712994669277)]