经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递
来源：jb51　　时间：2022/12/12 8:56:55　　对本文有异议

微信小程序 getApp() 方法

小程序提供了全局的 getApp() 方法，可获取当前小程序实例，一般用于在子页面中获取顶层应用。

  1. // app.js
  2. App({
  3.   globalData: 1
  4. });
  5. // page.js
  6. var app = getApp();
  7. console.log(app.globalData); // 获取 globalData

一 整体结构

图片目录(images)、页面目录(pages)、公共脚本(utils)、全局配置(app.json、project.config.json)四个大的部分构成。

页面目录中，每个页面配置完成会自动生成4个文件(JS、JSON、WXSS、WXML)。页面逻辑，页面配置，页面样式，页面结构。

所有页面需要在app.json中的pages中进行配置注册。

导航栏的菜单配置需要在app.json中的tabBar中进行配置注册。

全局变量需要在app.js的globalData中进行定义，通过var app = getApp() 调用。

公共脚本需要将定义好的function在module.exports中进行暴露， 暴露模块接口。

二 微信小程序左右轮播（swiper）、上下轮播

autoplay、interval、duration....自动切换播放、播放间隔时间、播放动画时间。

比如banner的左右滚动、公告的上下滚动（设置vertical为true）。

三 微信小程序页面跳转、参数传递、接收参数

四种跳转方式

  • wx.navigateTo 跳转新页面；
  • wx.switchTab 跳转导航菜单页面；
  • wx.redirectTo 关闭当前页面，跳转新页面；

页面标签跳转；

参数传递

  1. wx.navigateTo({
  2.  
  3. url: '../activity/news/detail?id=' + activityid
  4.  
  5. })

  1. wx.switchTab({
  2.  
  3. url: '../../index/index'
  4.  
  5. })

  1. wx.redirectTo({
  2.  
  3. url: '../activity/news/detail?id=' + activityid
  4.  
  5. })

接收参数

  1. onLoad: function (options) {
  2.  
  3. var id = options.id;
  4.  
  5. }

数据传递

1、本地缓存
2、全局变量：
在 app.js 中的 this.globalData = { } 中放入要存储的数；
在组件.js 中， 头部 引入 const app = getApp(); 获取到全局变量；
直接使用 app.globalData.key 来进行赋值和获取值。

路由：

使用wx.navigateTo和wx.redirectTo时，可以通过在url后拼接 + 变量， 然后在目标页面 通过在onLoad周期中，通过参数来获取传递过来的值。

  1. <text bindtap="pay" data-object-id="{{item.objectId}}" data-total-fee="{{item.amount}}" class="{{status != 0 ? 'hidden': ''}}">支付</text>

接收时

  1. function(e) {
  2.         var objectId = e.currentTarget.dataset.objectId;
  3.         var totalFee = e.currentTarget.dataset.totalFee;

四 微信小程序列表数据绑定

JS部分

  1. wx.request({
  2.  
  3. url: app.globalData.requestUri + "/banners",
  4.  
  5. header: {
  6.  
  7. "Content-Type": "application/json"
  8.  
  9. },
  10.  
  11. method: "GET",
  12.  
  13. data: {
  14.  
  15. start: start,
  16.  
  17. maxResults: maxResults,
  18.  
  19. bannerType: bannerType
  20.  
  21. },
  22.  
  23. success: function (res) {
  24.  
  25. that.setData({
  26.  
  27. bannerList: res.data.items
  28.  
  29. })
  30.  
  31. }
  32.  
  33. })

wx.request注意点

method 必须大写；

GET时"Content-Type": "application/json"；

POST时"Content-Type": "application/x-www-form-urlencoded"

点击事件、传递参数

使用bindtap绑定方法。参数用data-*的形式传递。记得全部小写。默认会放在dataset中。

  1. openActivity: function (event) {
  2.  
  3. var params = event.currentTarget.dataset;
  4.  
  5. //dataset中多个单词由连字符-链接，不能有大写(大写会自动转成小写)
  6.  
  7. //底部菜单要使用wx.switchTab 来跳转界面
  8.  
  9. var type = params.type;
  10.  
  11. var activityType = params.activitytype;
  12.  
  13. var relativeId = params.relativeid;
  14.  
  15. }

五 微信小程序详情数据绑定

js部分代码

  1. onLoad: function (options) {
  2.  
  3. var id = options.id;
  4.  
  5. var that = this;
  6.  
  7. wx.request({
  8.  
  9. url: app.globalData.requestUri + "/infos/" + id,
  10.  
  11. header: {
  12.  
  13. "Content-Type": "application/json"
  14.  
  15. },
  16.  
  17. method: "GET",
  18.  
  19. success: function (res) {
  20.  
  21. that.setData({
  22.  
  23. news: res.data,
  24.  
  25. imgurl: app.globalData.domain + res.data.imgurl,
  26.  
  27. publishTime: util.formatTime1(res.data.publishTime,'Y-M-D h:m:s')
  28.  
  29. })
  30.  
  31. }
  32.  
  33. })
  34.  
  35. }

页面部分代码

  1. {{news.title}}
  2.  
  3. {{publishTime}}

页面引用公用js

  1. var util = require("../../../utils/util.js");
  2.  
  3. var app = getApp();

六 微信小程序上拉刷新、下拉加载

上拉刷新

  1. onPullDownRefresh: function () {
  2.  
  3. var that = this;
  4. //下拉刷新，将pageNumber和pageSize分别设置成0和10，并初始化数据，让数据重新通过loadRoom()获取
  5. that.setData({ start: 0, maxResults: 10, infoList: [] }) that.loadRooms(); wx.stopPullDownRefresh(); }

下拉加载

  1. onReachBottom: function () {
  2. //上拉分页,将页码加1，然后调用分页函数
  3. var that = this;
  4.  
  5. var start = that.data.start;
  6.  
  7. that.setData({
  8.  
  9. start: ++start
  10.  
  11. });
  12.  
  13. setTimeout(function () {
  14.  
  15. wx.showToast({
  16.  
  17. title: '加载中..',
  18.  
  19. }),
  20.  
  21. that.loadRooms();
  22.  
  23. }, 1000)
  24.  
  25. }

需要在json中配置启用下拉事件

  1. {
  2. "enablePullDownRefresh": true
  3. }

七 微信小程序表单提交

表单提交注意点

bindsubmit表单提交事件；

bindinput输入框监控事件；

获得表单提交数据

  1. formSubmit: function (e) {
  2.  
  3.     //获得表单数据
  4.     var objData = e.detail.value;
  5.     var password = objData.password;
  6.     var mobile = objData.mobile;
  7.     var code = objData.code;
  8.  
  9. }

八 微信小程序缓存数据读取

缓存写入

  1. wx.setStorageSync('password', password);
  2. wx.setStorageSync('mobile', mobile);

缓存读取、移除、清除所有

  1. var mobile = wx.getStorageSync('mobile');
  2. wx.removeStorageSync('mobile');
  3. wx.clearStorage();

九 微信小程序提示信息，弹出框

提示信息和弹框，有icon时最多显示7个字，icon为none时可显示全部信息。

  1. wx.showToast({
  2.  
  3.     title: '登录成功',
  4.  
  5.     success: function() {
  6.  
  7.         setTimeout(function() {
  8.  
  9.             //要延时执行的代码
  10.             //跳转到成功页面
  11.             wx.switchTab({
  12.  
  13.                 url: '../index/index'
  14.  
  15.             })
  16.  
  17.         },
  18.         2000) //延迟时间
  19.     }
  20.  
  21. })

微信小程序模态框，确认取消对话框

  1. wx.showModal({
  2.  
  3. 	title: '确认',
  4.  
  5. 	content: '确认提交订单',
  6.  
  7. 	success: function(res) {
  8.  
  9. 		if (res.confirm) {
  10.  
  11. 			console.log('确定')
  12.  
  13. 		} else {
  14.  
  15. 			console.log(取消')
  16. 		}
  17. 	    
  18. 	}
  19.  
  20. })

十 微信小程序分享功能

分享，imageUrl非必填

  1. onShareAppMessage: function() {
  2.  
  3.     return {
  4.  
  5.         title: '金算子',
  6.  
  7.         desc: '新闻资讯',
  8.  
  9.         imageUrl: '../../images/home/home-add-01.png',
  10.  
  11.         path: '../activity/news/detail',
  12.  
  13.         success: function(res) {
  14.  
  15. },
  16.  
  17.         fail: function() {
  18.  
  19. }
  20.  
  21.     }
  22.  
  23. }

十一 微信小程序打电话

打电话调用wx.makePhoneCall

  1. phoneCall: function(mpbile) {
  2.  
  3.     wx.makePhoneCall({
  4.  
  5.         phoneNumber: "13724201432"
  6.  
  7.     })
  8.  
  9. }

1、组件也有它的生命周期（lifetimes）

自小程序基础版本2.2.3起，组件的生命周期可以在lifetimes字段中声明（这是推荐的方式，优先级最高）

  1. lifetimes: {
  2.     created: function() {
  3.         // 组件实例化，但节点树还未导入，因此这时不能用setData
  4.     },
  5.     attached: function() {
  6.         // 在组件实例进入页面节点树时执行 
  7.         // 节点树完成，可以用setData渲染节点，但无法操作节点
  8.     },
  9.     ready: function() {
  10.         // 组件布局完成，这时可以获取节点信息，也可以操作节点
  11.     },
  12.     move: function() {
  13.         // 组件实例被移动到树的另一个位置
  14.     },
  15.     detached: function() {
  16.         // 在组件实例被从页面节点树移除时执行
  17.     },
  18. }

程序生命周期
（1）onLaunch：初始化完成
（2）onHide：收起小程序到后台
（3）onShow：展开小程序到前台（热启动）
（4）onError：程序出错

globalData——全局数据

页面生命周期
（1）onLoad：页面冷启动后，初次加载（只有一次）
（2）onShow：每次切换页面，在之后的页面中触发
（3）onReady：页面被首次切换到（每个页面只有一次）
（4）onHide：每次切换页面，在之前的页面中触发
（5）onUnload：关闭当前页

用js控制标题：

  1.     wx.setNavigationBarTitle({
  2.       title: '这是NavigationBarTitle',
  3.     })

返回上一页

  1. wx.navigateBack();  //返回上一页
  2.  
  3. wx.navigateBack({     //返回的页面数，如果 delta 大于现有页面数，则返回到首页。
  4.    delta: 2
  5.  })
  6.  

转发小程序：

  1. <button  open-type="share" plain="true"  style='border:none'>转发</button>
  2.  
  3. onShareAppMessage: function() {
  4.       return {
  5.         title: '标题',
  6.         path: '/zh_tcwq/pages/index/index',//打开的页面路径
  7.         success: function (res) {
  8.           // 转发成功
  9.         },
  10.         fail: function (res) {
  11.           // 转发失败
  12.         }
  13.       }
  14.     }

拨打电话

  1. // 拨打电话
  2.   call_phone: function () {
  3.     var that = this
  4.       wx.makePhoneCall({
  5.         phoneNumber: that.data.dianhua//电话号码
  6.       })
  7.   },

尺寸单位：rpx

在小程序的里面，我们使用rpx来代替px，官方的定义如下：

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

微信小程序上拉加载

如果你使用的是<scroll-view>组件：他有一个事件叫做：bindscrolltolower，滚动到底部/右边，会触发 scrolltolower 事件。
// wxml

  1. <scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
  2.   // 你的代码
  3. </scroll-view>
  4.  
  5. // wxss
  6. onScrollLower: function (event) {
  7.     var nextUrl = this.data.requestUrl +
  8.       "?start=" + this.data.totalCount + "&count=20";
  9.     util.http(nextUrl, this.processDoubanData)
  10.     wx.showNavigationBarLoading()
  11. },

如果你使用<view>，你就不需要在元素里面绑定任何事件，直接在js文件里面申明：

  1. onReachBottom: function (event) {
  2.     var nextUrl = this.data.requestUrl +
  3.       "?start=" + this.data.totalCount + "&count=20"; // 请求借口，加载数据，并更新数据
  4.     util.http(nextUrl, this.processDoubanData);
  5.     wx.showNavigationBarLoading(); // 显示loading
  6. },

微信小程序下拉刷新

在你需要的进行下拉刷新的页面的json文件里面：

  1. {
  2.   "enablePullDownRefresh": true
  3. }

然后在js中，进行相应的数据操作：

  1. onPullDownRefresh: function (event) {
  2.     var refreshUrl = this.data.requestUrl +
  3.       "?start=0&count=20";
  4.     this.data.movies = {};
  5.     this.data.isEmpty = true;
  6.     this.data.totalCount = 0;
  7.     util.http(refreshUrl, this.processDoubanData);
  8.     wx.showNavigationBarLoading();
  9. },

以上既是微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递，更多关于微信小程序的知识请查看下面的相关链接

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号