微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

shine001 2022-12-10 我要评论

微信小程序 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();
},

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

微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

微信小程序 getApp() 方法

一整体结构

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

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

参数传递

接收参数

数据传递

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

点击事件、传递参数

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

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

上拉刷新

下拉加载

七微信小程序表单提交

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

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

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

十微信小程序分享功能

十一微信小程序打电话

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

globalData——全局数据

用js控制标题：

返回上一页

转发小程序：

拨打电话

尺寸单位：rpx

微信小程序上拉加载

微信小程序下拉刷新

相关文章

猜您喜欢

今日热门

微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

微信小程序 getApp() 方法

一 整体结构

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

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

参数传递

接收参数

数据传递

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

点击事件、传递参数

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

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

上拉刷新

下拉加载

七 微信小程序表单提交

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

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

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

十 微信小程序分享功能

十一 微信小程序打电话

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

globalData——全局数据

用js控制标题：

返回上一页

转发小程序：

拨打电话

尺寸单位：rpx

微信小程序上拉加载

微信小程序下拉刷新

相关文章

猜您喜欢

今日热门

一整体结构

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

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

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

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

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

七微信小程序表单提交

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

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

十微信小程序分享功能

十一微信小程序打电话