一颗老白菜 - 微信小程序
type: channel
link: https://www.baicai.blog/index.php/category/wechat
description: 微信小程序开发
items: 微信小程序周选择组件封装
items: 微信小程序中使用echarts踩坑记录
items: 小程序消息订阅实现语音播放
items: 小程序分包
items: 小程序全局数据共享
items: 小程序中使用npm包
items: wxs脚本
items: 小程序生命周期
items: 自定义组件
items: 小程序之页面事件

微信小程序周选择组件封装
type: item
date: 2022-10-25T13:13:39+08:00
description: 背景在业务中有时需要以周为单位选择日期，将某个周的开始和结束日期回显在界面上。这种需求在pc端上有现成的组件可以使用，比如elementUI的el-date-picker组件即可实现。但是在原生小程序中并没有现成可用的组件实现这种需求，那么只能自定义一个这样的周组件或者基于第三方日历组件二次封装实现一个周组件。二次封装周组件准备工作熟悉第三方日历组件这里采用的是小历同学开发的开源日历组件进行二次封装，使用说明文档可点击第三方日历组件需要熟悉的方法和属性日历组件中的禁用日期属性disableMode、每周第一天是周日还是周一属性firstDayOfWeek、默认选中的日期属性defaultDay、是否开启日期范围选择模式属性chooseAreaMode、取消所有选中日期的方法cancelSelectedDates、选中指定日期范围的方法chooseDateArea、还有日期选择后的事件afterTapDay。获取周时间范围的算法 let year=e.detail.year let month=e.detail.month month=month<10?'0'+month:month let day=e.detail.day day=day<10?'0'+day:day let date=year+'-'+month+'-'+day let weekOfday = moment(date, "YYYY-MM-DD").format("E"); //计算今天是这周第几天 let startTime = moment(date) .subtract(weekOfday - 1, "days") .format("YYYY-MM-DD"); //周一日期 let endTime = moment(date).weekday(7).format("YYYY-MM-DD"); //周日日期 if(moment(date).day()==0){ endTime=date }实现思路（1）当组件第一次加载进来后，根据当前时间算出本周的开始和结束时间范围，然后调用组件的chooseDateArea方法实现周日期的默认选中。（2）当点击改变日历组件上的日期后，调用afterTapDay事件的回调函数afterTapDay：计算出所选日期所在周的日期范围，然后调用chooseDateArea方法将指定范围的日期选中。注意这里要在执行回调函数afterTapDay开始要调用日历组件的cancelSelectedDates方法取消所有已选择的日期，否则会导致周日期选择错乱。（3）在回调函数最后将计算出的周范围的日期放入变量中，当点击确定选择日期后回显到页面并把筛选日期范围传递给调用者（父组件）实现代码html代码<view class="select-period" hidden="" catchtouchmove="return"> <view class="select_top"> <view class="t_singer t2"></view> </view> <view class="sg"></view> <view> <view style="background: #f5f5f5;padding-top: 15rpx;" wx:if="{{selectPeriod=='week'}}"> <view class="date"> <calendar style="height: 100%;" preYear="true" nextYear="true" bind:afterTapDay="afterTapDay" id="mycalendar" calendarConfig="{{calendarConfig}}" bind:whenChangeMonth="whenChangeMonth" ></calendar> <slot> </slot> </view> <view class="btns" style="margin-top: 29rpx;"> <view class="cancel" bindtap="cancel">取消</view> <view class="ok" bindtap="setlect_date">确定</view> </view> </view> <view class="monthly" style="height: {{selectPeriod=='month'?'757rpx':'360rpx'}};" hidden="{{selectPeriod=='week'}}"> <view class="…

微信小程序中使用echarts踩坑记录
type: item
date: 2022-09-13T16:24:00+08:00
description: 从后台请求的数据改变，echarts图表未更新问题描述当从后台请求新的数据赋值给echarts时,图表的数据仍是初始化状态。解决造成该问题是没有将改变后的echarts数据重新更新到echarts组件配置中： chartMxin.setOption(mxinOption);上面的chartMxin是echarts.init()方法初始化的对象设置echarts柱状图背景色宽度比柱状图宽的问题示例实现方案 series: [ { data: [], type: "bar", name: "实际产量", // showBackground: true, // backgroundStyle: { // color: "#f1f2fb", // }, itemStyle: { normal: { color: "#505BD2" }, }, barWidth: "10", zlevel: 11 }, { // name: '背景', type: 'bar', barWidth: '20px', barGap: '-150%', data: [], itemStyle: { normal: { color: '#f1f2fb', }, }, tooltip: { show: false }, zlevel: 9 }, ],讲解核心思路再定义一类柱状图用于作为背景，需要使用barGap位移将背景柱状图位移到与柱状图在同一个位置，这里需要设置两者的层级关系，注意：pc端上使用zlevel属性即可，小程序中不可使用zlevel属性否则会报错，应该使用z属性。小程序中echarts图表横向内容超出滚动坐标轴固定的需求描述在移动设备上当x轴内容过多需要内容滚动坐标轴固定时可添加dataZoom属性来实现。实现 dataZoom: [ { type: 'inside', //1平移 缩放 throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。 minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目 start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。 end: 2, //数据窗口范围的结束百分比。范围是：0 ~ 100。 zoomLock: true //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。 } ],[scode type="lblue"]通过设置start,end属性可以缩放一屏上元素之间的距离，通过minValueSpan控制一屏展示的元素个数[/scode]如何解决echarts图表层级高在小程序中超出高度无法滚动问题描述由于echarts图表层级高，因此当内容超出高度时，设置元素超出滚动效果的样式是无法奏效的，需要搭配小程序scroll-view原生组件使用使其可以超出高度滚动。实现在echarts图表的外层添加scroll-view组件或者其他第三方scroll-view组件

小程序消息订阅实现语音播放
type: item
date: 2022-02-11T16:32:00+08:00
description: 小程序消息订阅实现消息订阅介绍有关微信小程序消息订阅可参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html消息订阅实现步骤获取消息订阅的模板ID 登录https://mp.weixin.qq.com/微信公众平台添加模板，如果没有合适的模板可以手动添加模板，然后获取模板ID。获取下发权限（弹出授权框需用户操作同意） 一次性订阅消息、长期订阅消息详见接口subscribeMessage.send设备订阅消息详见接口wx.requestSubscribeDeviceMessage调用接口下发订阅消息（此步骤由后端调用） 一次性订阅消息、长期订阅消息详见服务端接口subscribeMessage.send设备订阅消息详见服务端接口hardwareDevice.sendwebsocket监听处理订阅消息推送（后端发送websocket，前端监听） 当后端调用下发订阅消息API后，在小程序中会触发消息订阅通知下达给用户，另外当需要在小程序中查看订阅消息或者对消息订阅进行处理时（比如语音处理）还需要结合websocket来下发订阅消息的具体内容，以及监听新的订阅消息。小程序订阅消息语音提醒实现订阅消息语音提醒介绍订阅消息语音提醒目前官方给出的订阅模板仅能支持银行类目的收款到账通知订阅，官方具体介绍见下图：那么其他类型的订阅模板要想支持语音播放提醒需要结合第三方插件来实现，下面介绍使用微信同声传译插件来实现订阅消息语音提醒。微信同声传译插件接入小程序实现思路使用微信消息订阅功能，当后端发送消息订阅推送时，同时进行websocket推送相关内容（由于前端无法监听官方的推送消息，故采取此种方法）。前端监听websocket，当用户登录小程序时调用websocket监听方法，监听到有订阅消息发来时就调用同声翻译插件的语音合成textToSpeech方法播放相关内容。这样也可以实现订阅消息语音播放。在公众平台添加插件 打开微信公众平台---设置---第三方设置---添加插件---搜索微信同声传译插件---添加该插件在小程序项目的app.json配置插件{ "plugins": { "WechatSI": { "version": "0.3.5", "provider": "wx069ba97219f66d99" } }, }注意：Provider属性值为微信同声传译插件的APPID，在公众平台插件的详情里面可查看，version版本号一般为最新版本号在监听消息订阅推送的地方调用插件的文字播放语音方法（1）在使用插件方法的js文件中引入依赖const plugin = requirePlugin("WechatSI") const manager = plugin.getRecordRecognitionManager()（2）调用语音合成textToSpeech方法 plugin.textToSpeech({ lang: "zh_CN", tts: true, content: "您有新的未读消息", success: function(res) { console.log("succ tts", res.filename) wx.playBackgroundAudio({ dataUrl: res.filename }) }, fail: function(res) { console.log("fail tts", res) } })（3）使用真机调试在手机中查看效果（4）配置小程序退出后台声音的播放当小程序进入后台时语音不能进行播放，此时需要向app.json中添加一项配置，如下：{ pages:[], "sitemapLocation": "sitemap.json" }[scode type="red"]上述实现方式只能在某些业务中使用，大多情况无法适用，由于要结合websocket，当设备进入息屏状态websocket是断开的，因此也就无法实现实时播放语音！[/scode]参考资源微信面对面翻译小程序开源地址：https://github.com/Tencent/Face2FaceTranslator语音识别+语音合成+同声传译 微信小程序案例：https://blog.csdn.net/Resulte/article/details/122545279

小程序分包
type: item
date: 2022-01-19T23:48:00+08:00
description: 分包基础点什么是分包分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。分包的好处对小程序进行分包的好处如下：可以优化小程序首次启动的下载时间在多团队共同开发时可以更好的解耦卸载分包的项目构成分包后，小程序项目由1个主包+多个分包组成：主包：一般只包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一些公共资源分包：只包含和当前分包有关的页面和私有资源分包的加载规则在小程序启动时，默认会下载主包并启动主包内页面：tabBar页面需要放到主包中当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示：非tabBar页面可以按照功能的不同，划分为不同的分包之后，进行按需下载。分包的体积限制目前，小程序分包的大小有以下两个限制：整个小程序所有分包大小不超过16M（主包+所有分包）单个分包/主包大小不能超过2M使用分包配置方法在app.json的subpackages节点中声明分包的结构，如下：{ "pages":[ "pages/index", "pages/logs" ], "subpackages":[ { "root":"packageA", "pages":[ "pages/cat", "pages/dog" ] },{ "root":"packageB", "name":"pack2", //分包的别名 "pages":[ "pages/apple", "pages/banana" ] } ] }打包原则小程序会按subpackages的配置进行分包，subpackages之外的目录将被打包到主包中主包中也可以有自己的pagestabBar页面必须在主包内分包之间不能互相嵌套引用原则主包无法引用分包内的私有资源分包之间不能相互引用私有资源分包可以引用主包内的公共资源独立分包什么是独立分包独立分包本质也是分包，特殊在于：可以独立于主包和其他分包而独立运行。独立分包和普通分包的区别最主要的区别：是否依赖于主包才能运行普通分包必须依赖主包才能运行独立分包可以在不下载主包的情况下，独立运行独立分包的应用场景开发者可以按需，将某些具有一定功能独立性的页面配置到独立分包中。原因：当小程序从普通的分包页面启动时，需要首先下载主包而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度 注意：一个小程序中可以有多个独立分包独立分包的配置方法{ "pages":[ "pages/index", "pages/logs" ], "subpackages":[ { "root":"packageA", "pages":[ "pages/cat", "pages/dog" ] },{ "root":"packageB", "name":"pack2", //分包的别名 "pages":[ "pages/apple", "pages/banana" ], "independent":true //通过此节点，声明当前分包为独立分包 } ] }引用原则独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此资源，例如：主包无法引用独立分包内的私有资源独立分包之间，不能相互引用私有资源独立分包和普通分包之间，不能相互引用私有资源特别注意：独立分包中不能引用主包内的公共资源分包预下载什么是分包预下载分包预下载指：在进入小程序某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。配置分包的预下载预下载分包的行为，会在进入指定的页面时触发。在app.json中，使用preloadRule节点定义分包的预下载规则，示例如下：{ "preloadRule":{ "pages/contact/contact":{ "network":"all", "packages":["pkgA"] } } }分包预下载的限制同一个分包中的页面享有共同的预下载大小限额2M

小程序全局数据共享
type: item
date: 2022-01-14T16:00:00+08:00
description: 小程序中的全局数据共享方案在小程序中，可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。其中：mobx-miniprogram用来创建Store实例对象mobx-miniprogram-bindings用来把Store中的共享数据或方法绑定到组件或页面中使用MobX相关包的安装在项目中运行如下命令，安装MobX相关的包：npm install --save mobx-miniprogram mobx-miniprogram-bindings创建MobX的Store实例import {observable,action} from 'mob-miniprogram' export const store=observable({ numA:1, numB:2, //计算属性 get sum(){ return this.numA+this.numB }, updateNum1:action(function(step){this.numA+=step}), updateNum2:action(function(step){this.numB+=step}) })将Store中的成员绑定到页面中绑定到页面import {createStoreBindings} from 'mobx-miniprogram-bindings' import {store} from '../../store/store' Page({ onLoad:function(){ this.storeBindings=createStoreBindings(this,{ store, fields:['numA','numB','sum'], actions:['updateNum1'] }) }, onUnload:function(){ this.storeBindings.destroyStoreBindings() } })在页面中使用store成员<view>{{mumA}}+{{numB}}={{sum}}</view> <van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA+1</van-button> <van-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">numA-1</van-button> //按钮tap事件的处理函数 btnHandler1(e){ this.updateNum1(e.target.dataset.step) }将Store中的成员绑定到组件中store挂载到组件上import {storeBindingsBehavior} from 'mobx-miniprogram-bindings' import {store} from '../../store/store' Component({ behaviors:[storeBindingsBehavior], storeBindings:{ store, fields:{ numA:()=>store.numA, numB:(store)=>store.numB, sum:'sum' }, actions:{ updateNum2:'updateNum2' } } })在组件中使用store<view>{{numA}}+{{numB}}={{sum}}</view> <van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB+1</van-button> <van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB-1</van-button> //组件的方法列表 methods:{ btnHandler2(e){ this.updateNum2(e.target.dataset.step) } }

小程序中使用npm包
type: item
date: 2022-01-14T14:41:00+08:00
description: 小程序对npm的支持与限制小程序中使用npm包有如下3个限制：不支持依赖于node.js内置库的包不支持依赖于浏览器内置对象的包不支持依赖于c++插件的包vant Weapp npm包安装vant组件库在小程序中安装vant组件库有如下3步：通过npm安装构建npm包修改app.json具体步骤参考vant官方文档使用vant组件在app.json的usingComponents节点中引入需要的组件，即可在wxml中直接使用组件，示例："usingComponents":{ "van-button":"@vant/weapp/button/index" } <van-button type="primary">按钮</van-button>定制全局主题样式在app.wxss中，写入css变量，即可对全局生效page{ --button-danger-background-color:#c00000; }颜色变量参考官方配置文件API Promise化npm包实现API Promise化小程序中实现API Promise化主要依赖于miniprogram-api-promise这个第三方的npm包。安装使用步骤如下：安装依赖npm install--save miniprogram-api-promise在app.js中配置:只需调用一次promisifyAll()方法即可实现一步API的Promise化imoort {promisifyAll} from 'miniprogram-api-promise' const wxp=wx.p={} promisifyAll(wx,wxp)调用Promise化之后的异步API//wxml <van-button type="danger" bindtap="getInfo">vant按钮</van-button> async getInfo(){ const {data:res}=await wx.p.request({ method:'GET', url:'https://www.escook.cn/api/get', data:{name:'zs',age:20} }) }

wxs脚本
type: item
date: 2022-01-12T10:53:00+08:00
description: 什么是wxswxs是小程序独有的一套脚本语言，结合wxml，可以构建出页面的结构。wxs的应用场景wxml中无法调用在页面的.js中定义的函数，但是wxml中可以调用wxs中定义的函数。因此小程序中wxs典型的应用场景是过滤器。wxs和JavaScript的关系类似JavaScript但和JavaScript是不同的语言wxs有自己的数据类型number数值类型、string字符串类型、boolean布尔类型、object对象类型。function函数类型、array数组类型、date日期类型、regexp正则。wxs不支持类似于ES6以上的语法形式不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写。。。支持：var定义变量、普通function函数等类似于ES5的语法wxs遵循CommonJS规范module对象、require()函数、module.exports对象基础语法内嵌wxs脚本介绍wxs代码可以编写在wxml文件中的<wxs>标签内，就像JavaScript代码可以编写在html文件中的 标签内一样。wxml文件中的每个<wxs></wxs>标签，必须提供module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员。示例<view>{{m1.toUpper(username)}}</view> <wxs module="m1"> module.exports.toUpper=function(str){ return str.toUpperCase() } </wxs>定义外联的wxs脚本介绍wxs代码还可以编写在以.wxs为后缀名的文件内，就像JavaScript代码可以编写在.js为后缀名的文件中一样。示例function toLower(str){ return str.toLowerCase() } module.exports={ toLower:toLower }使用外联的wxs脚本介绍在wxml中引入外联的wxs脚本时，必须为<wxs>标签添加module和src属性，其中：module用来指定模块的名称，src用来指定要引入的脚本路径，且必须是相对路径示例<view>{{m2.toLower(country)}}</view> <wxs src="../../utils/tools.wxs" module="m2"></wxs>wxs脚本特点与JavaScript不同与JavaScript类似但是为两种不同的语言不能作为组件的事件回调wxs典型的应用场景就是过滤器，经常配合Mustache语法进行使用，但在wxs中定义的函数不能作为组件的时间回调函数，以下为错误用法： 按钮 隔离性（1）wxs不能调用js中定义的函数（2）wxs不能调用小程序提供的API性能好wxs代码运行效率高

小程序生命周期
type: item
date: 2022-01-11T00:16:00+08:00
description: 生命周期的分类应用生命周期特指小程序从启动---运行---销毁的过程页面生命周期特指小程序中，每个页面的加载---渲染---销毁的过程其中，页面的生命周期范围较小，应用程序的生命周期范围较大。生命周期函数的分类应用的生命周期函数特指小程序从启动---运行---销毁期间依次调用的那些函数页面的生命周期函数特制小程序中，每个页面从加载---渲染---销毁期间一次调用的那些函数应用的生命周期函数小程序的应用生命周期函数需在app.js中进行声明，示例代码如下：App({ //小程序初始化完成时，执行此函数，全局只触发一次。可以做一些初始化的工作。 onLaunch:function(options){} //小程序启动，或从后台进入前台显示时触发。 onShow:function(options){} //小程序从前台进入后台时触发。 onHide:function(){} })页面的生命周期函数小程序的页面生命周期函数需要在.js文件中进行声明，示例如下：Page({ //监听页面加载，一个页面只调用一次 onLoad:function(options){}, //监听页面显示 onShow:function(){}, //监听页面初次渲染完成，一个页面只调用1次 onReady:function(){}, //监听页面隐藏 onHide:function(){}, //监听页面卸载，一个页面只调用1次 onUnload:function(){} })

自定义组件
type: item
date: 2022-01-10T18:25:00+08:00
description: 组件的创建与引用创建组件在项目的根目录中，鼠标右键，创建components-test文件夹在新建的components-test文件夹上，鼠标右键点击“新建Component”键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为.js,.json,.wxml和.wxss注意：为目录结构清晰需把不同组件放入单独目录中引用组件局部引用：组件只能在当前被引用的页面内使用全局引用：组件可以在每个小程序页面中使用局部引用组件在页面的.json配置文件中引用组件的方式叫做“局部引用”，示例如下：{ "usingComponents":{ "my-test":"/components/test/test" } } //在页面.wxml中使用组件 <my-test></my-test>全局引用组件在app.json全局配置文件中引用组件的方式加全局引用组件，示例如下：{ "usingComponents":{ "my-test":"/components/test/test" } } //在页面的.wxml文件中使用组件 <my-test></my-test>组件和页面的区别组件的.json文件中需要声明"component":true组件的.js文件中调用的是Component()函数组件的事件处理函数需要定义到methods节点中自定义组件的样式组件样式隔离默认情况下组件的样式是隔离的，即组件间样式互不影响，组件样式不影响小程序页面的样式，小程序样式不影响组件的样式。组件样式隔离注意点app.wxss中的全局样式对组件无效只有class选择器会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响修改组件的样式隔离选项通过styleIsolation可修改组件的样式隔离特性，用法如下：Component({ options:{ styleIsolation:'isolated' } }) //或者在组件的.json文件中新增如下配置 { "styleIsolation":"isolated" }组件styleIsolation配置项|可选值|默认值|描述|isolated是表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会相互影响apply-shared否表示页面wxss样式将影响到自定义组件，但自定义组件wxss中指定的样式不会影响页面shared否表示页面wxss样式将影响到自定义组件，自定义组件wxss中指定的wxss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件自定义组件的数据、方法和属性data数据在小程序组件中，用于组件模板渲染的私有数据，需要定义到data节点中。methods方法在小程序中，事件处理函数和自定义方法需要定义到methods节点中，示例如下：Component({ methods:{ addCount(){ } } })小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据，示例如下：Component({ properties:{ //完整定义可指定默认值 max:{ type:Number, value:10 }, //简化定义 max:Number } }) //在.wxml中使用 <my-test max="10"></my-test>data和properties的区别properties和data的用法相同，都是可读可写的。两个对象都指向同一个地址，因此输出两个对象应完全相等。data更倾向于存储组件的私有数据，properties更倾向于存储外界传递到组件中的数据。使用setData修改properties的值使用setData为properties中的属性重新赋值，示例如下：Component({ properties:{max:Number}, methods:{ addCount(){ this.setData({max:this.properties.max+1}) //使用setData修改属性的值 } } })数据监听器什么是数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。类似于vue中的watch,基本语法如下：Component({ observers:{ '字段A,字段B':function(字段A的新值,字段B的新值){} } })监听对象属性的变化数据监听器支持监听对象中单个或多个属性的变化，示例如下：Component({ observers:{ '对象.属性a,对象.属性b':function(属性a的新值,属性b的新值){ //触发监听器的三种情况 //为属性a赋值 //为属性b赋值 //为对象赋值 } } })监听所有属性的变化当监…

小程序之页面事件
type: item
date: 2022-01-10T01:08:00+08:00
description: 下拉刷新事件启用下拉刷新启用下拉刷新有两种方式：（1）全局开启下拉刷新：在app.json配置文件中，将enablePullDownRefresh设置为true（2）局部开启下拉刷新：在页面的.json配置文件中，将enablePullDownRefresh设置为true配置下拉刷新窗口的样式在全局或页面的.json配置文件中，通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式，其中：（1）backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值。（2）backgroundTextStyle用来配置下拉刷新loading的样式，仅支持dark和light监听页面的下拉刷新事件通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。例如，下拉重置count的值<view>count值为：{{count}}</view> +1 countAdd(){ this.setData({ count:this.data.count+1 }) } onPullDownRefresh:function(){ this.setData({ count:0 }) }停止下拉刷新的效果当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的loading效果。调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新，代码：onPullDownRefresh:function(){ this.setData({ conut:0 }) wx.stopPullDownRefresh() }上拉触底事件监听页面的上拉触底事件通过onReachBottom()函数即可监听当前页面的上拉触底事件，代码如下：onReachBottom:function(){ console.log('触发到下拉触底事件') }配置上拉触底距离可以在全局或页面的.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离，小程序的默认距离为50px。