微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递
作者：shine001
微信小程序 getApp() 方法
小程序提供了全局的 getApp() 方法，可获取当前小程序实例，一般用于在子页面中获取顶层应用。
// app.js
App({
globalData: 1
});
// page.js
var app = getApp();
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 关闭当前页面，跳转新页面；
页面标签跳转；
参数传递
wx.navigateTo({
url: '../activity/news/detail?id=' + activityid
})
wx.switchTab({
url: '../../index/index'
})
wx.redirectTo({
url: '../activity/news/detail?id=' + activityid
})
接收参数
onLoad: function (options) {
var id = options.id;
}
数据传递
1、本地缓存
2、全局变量：
在 app.js 中的 this.globalData = { } 中放入要存储的数；
在组件.js 中， 头部 引入 const app = getApp(); 获取到全局变量；
直接使用 app.globalData.key 来进行赋值和获取值。
路由：
使用wx.navigateTo和wx.redirectTo时，可以通过在url后拼接 + 变量， 然后在目标页面 通过在onLoad周期中，通过参数来获取传递过来的值。
<text bindtap="pay" data-object-id="{{item.objectId}}" data-total-fee="{{item.amount}}" class="{{status != 0 ? 'hidden': ''}}">支付</text>
接收时
function(e) {
var objectId = e.currentTarget.dataset.objectId;
var totalFee = e.currentTarget.dataset.totalFee;
四 微信小程序列表数据绑定
JS部分
wx.request({
url: app.globalData.requestUri + "/banners",
header: {
"Content-Type": "application/json"
},
method: "GET",
data: {
start: start,
maxResults: maxResults,
bannerType: bannerType
},
success: function (res) {
that.setData({
bannerList: res.data.items
})
}
})
wx.request注意点
method 必须大写；
GET时"Content-Type": "application/json"；
POST时"Content-Type": "application/x-www-form-urlencoded"
点击事件、传递参数
使用bindtap绑定方法。参数用data-*的形式传递。记得全部小写。默认会放在dataset中。
openActivity: function (event) {
var params = event.currentTarget.dataset;
//dataset中多个单词由连字符-链接，不能有大写(大写会自动转成小写)
//底部菜单要使用wx.switchTab 来跳转界面
var type = params.type;
var activityType = params.activitytype;
var relativeId = params.relativeid;
}
五 微信小程序详情数据绑定
js部分代码
onLoad: function (options) {
var id = options.id;
var that = this;
wx.request({
url: app.globalData.requestUri + "/infos/" + id,
header: {
"Content-Type": "application/json"
},
method: "GET",
success: function (res) {
that.setData({
news: res.data,
imgurl: app.globalData.domain + res.data.imgurl,
publishTime: util.formatTime1(res.data.publishTime,'Y-M-D h:m:s')
})
}
})
}
页面部分代码
{{news.title}}
{{publishTime}}
页面引用公用js
var util = require("../../../utils/util.js");
var app = getApp();六 微信小程序上拉刷新、下拉加载
上拉刷新
onPullDownRefresh: function () {
var that = this;
//下拉刷新，将pageNumber和pageSize分别设置成0和10，并初始化数据，让数据重新通过loadRoom()获取
that.setData({ start: 0, maxResults: 10, infoList: [] }) that.loadRooms(); wx.stopPullDownRefresh(); }下拉加载
onReachBottom: function () {
//上拉分页,将页码加1，然后调用分页函数
var that = this;
var start = that.data.start;
that.setData({
start: ++start
});
setTimeout(function () {
wx.showToast({
title: '加载中..',
}),
that.loadRooms();
}, 1000)
}
需要在json中配置启用下拉事件
{
"enablePullDownRefresh": true
}
七 微信小程序表单提交
表单提交注意点
bindsubmit表单提交事件；
bindinput输入框监控事件；
获得表单提交数据
formSubmit: function (e) {
//获得表单数据
var objData = e.detail.value;
var password = objData.password;
var mobile = objData.mobile;
var code = objData.code;
}
八 微信小程序缓存数据读取
缓存写入
wx.setStorageSync('password', password);
wx.setStorageSync('mobile', mobile);
缓存读取、移除、清除所有
var mobile = wx.getStorageSync('mobile');
wx.removeStorageSync('mobile');
wx.clearStorage();
九 微信小程序提示信息，弹出框
提示信息和弹框，有icon时最多显示7个字，icon为none时可显示全部信息。
wx.showToast({
title: '登录成功',
success: function() {
setTimeout(function() {
//要延时执行的代码
//跳转到成功页面
wx.switchTab({
url: '../index/index'
})
},
2000) //延迟时间
}
})微信小程序模态框，确认取消对话框
wx.showModal({
title: '确认',
content: '确认提交订单',
success: function(res) {
if (res.confirm) {
console.log('确定')
} else {
console.log(取消')
}
}
})十 微信小程序分享功能
分享，imageUrl非必填
onShareAppMessage: function() {
return {
title: '金算子',
desc: '新闻资讯',
imageUrl: '../../images/home/home-add-01.png',
path: '../activity/news/detail',
success: function(res) {
},
fail: function() {
}
}
}十一 微信小程序打电话
打电话调用wx.makePhoneCall
phoneCall: function(mpbile) {
wx.makePhoneCall({
phoneNumber: "13724201432"
})
}1、组件也有它的生命周期（lifetimes）
自小程序基础版本2.2.3起，组件的生命周期可以在lifetimes字段中声明（这是推荐的方式，优先级最高）
lifetimes: {
created: function() {
// 组件实例化，但节点树还未导入，因此这时不能用setData
},
attached: function() {
// 在组件实例进入页面节点树时执行
// 节点树完成，可以用setData渲染节点，但无法操作节点
},
ready: function() {
// 组件布局完成，这时可以获取节点信息，也可以操作节点
},
move: function() {
// 组件实例被移动到树的另一个位置
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
}程序生命周期
（1）onLaunch：初始化完成
（2）onHide：收起小程序到后台
（3）onShow：展开小程序到前台（热启动）
（4）onError：程序出错
globalData——全局数据
页面生命周期
（1）onLoad：页面冷启动后，初次加载（只有一次）
（2）onShow：每次切换页面，在之后的页面中触发
（3）onReady：页面被首次切换到（每个页面只有一次）
（4）onHide：每次切换页面，在之前的页面中触发
（5）onUnload：关闭当前页
用js控制标题：
wx.setNavigationBarTitle({
title: '这是NavigationBarTitle',
})
返回上一页
wx.navigateBack(); //返回上一页
wx.navigateBack({ //返回的页面数，如果 delta 大于现有页面数，则返回到首页。
delta: 2
})
转发小程序：
<button open-type="share" plain="true" style='border:none'>转发</button>
onShareAppMessage: function() {
return {
title: '标题',
path: '/zh_tcwq/pages/index/index',//打开的页面路径
success: function (res) {
// 转发成功
},
fail: function (res) {
// 转发失败
}
}
}
拨打电话
// 拨打电话
call_phone: function () {
var that = this
wx.makePhoneCall({
phoneNumber: that.data.dianhua//电话号码
})
},
尺寸单位：rpx
在小程序的里面，我们使用rpx来代替px，官方的定义如下：
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
微信小程序上拉加载
如果你使用的是<scroll-view>组件：他有一个事件叫做：bindscrolltolower，滚动到底部/右边，会触发 scrolltolower 事件。
// wxml
<scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
// 你的代码
</scroll-view>
// wxss
onScrollLower: function (event) {
var nextUrl = this.data.requestUrl +
"?start=" + this.data.totalCount + "&count=20";
util.http(nextUrl, this.processDoubanData)
wx.showNavigationBarLoading()
},
如果你使用<view>，你就不需要在元素里面绑定任何事件，直接在js文件里面申明：
onReachBottom: function (event) {
var nextUrl = this.data.requestUrl +
"?start=" + this.data.totalCount + "&count=20"; // 请求借口，加载数据，并更新数据
util.http(nextUrl, this.processDoubanData);
wx.showNavigationBarLoading(); // 显示loading
},
微信小程序下拉刷新
在你需要的进行下拉刷新的页面的json文件里面：
{
"enablePullDownRefresh": true
}
然后在js中，进行相应的数据操作：
onPullDownRefresh: function (event) {
var refreshUrl = this.data.requestUrl +
"?start=0&count=20";
this.data.movies = {};
this.data.isEmpty = true;
this.data.totalCount = 0;
util.http(refreshUrl, this.processDoubanData);
wx.showNavigationBarLoading();
},
以上既是微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递，更多关于微信小程序的知识请查看下面的相关链接