微信小程序常用功能實(shí)例匯總包括上拉刷新,下拉加載,列表數(shù)據(jù)綁定,輪播,參數(shù)傳遞

更新時(shí)間：2022年12月10日 15:54:28 作者：shine001

這篇文章主要介紹了微信小程序常用功能實(shí)例匯總包括上拉刷新,下拉加載,列表數(shù)據(jù)綁定,輪播,參數(shù)傳遞,撥打電話,需要的朋友可以參考下

微信小程序 getApp() 方法

小程序提供了全局的 getApp() 方法，可獲取當(dāng)前小程序?qū)嵗?，一般用于在子頁面中獲取頂層應(yīng)用。

// app.js
App({
  globalData: 1
});
// page.js
var app = getApp();
console.log(app.globalData); // 獲取 globalData

一整體結(jié)構(gòu)

圖片目錄(images)、頁面目錄(pages)、公共腳本(utils)、全局配置(app.json、project.config.json)四個(gè)大的部分構(gòu)成。

頁面目錄中，每個(gè)頁面配置完成會(huì)自動(dòng)生成4個(gè)文件(JS、JSON、WXSS、WXML)。頁面邏輯，頁面配置，頁面樣式，頁面結(jié)構(gòu)。

所有頁面需要在app.json中的pages中進(jìn)行配置注冊。

導(dǎo)航欄的菜單配置需要在app.json中的tabBar中進(jìn)行配置注冊。

全局變量需要在app.js的globalData中進(jìn)行定義，通過var app = getApp() 調(diào)用。

公共腳本需要將定義好的function在module.exports中進(jìn)行暴露，暴露模塊接口。

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

autoplay、interval、duration....自動(dòng)切換播放、播放間隔時(shí)間、播放動(dòng)畫時(shí)間。

比如banner的左右滾動(dòng)、公告的上下滾動(dòng)（設(shè)置vertical為true）。

三微信小程序頁面跳轉(zhuǎn)、參數(shù)傳遞、接收參數(shù)

四種跳轉(zhuǎn)方式

wx.navigateTo 跳轉(zhuǎn)新頁面；
wx.switchTab 跳轉(zhuǎn)導(dǎo)航菜單頁面；
wx.redirectTo 關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)新頁面；

頁面標(biāo)簽跳轉(zhuǎn)；

參數(shù)傳遞

wx.navigateTo({

url: '../activity/news/detail?id=' + activityid

})

wx.switchTab({

url: '../../index/index'

})

wx.redirectTo({

url: '../activity/news/detail?id=' + activityid

})

接收參數(shù)

onLoad: function (options) {

var id = options.id;

}

數(shù)據(jù)傳遞

1、本地緩存
2、全局變量：
在 app.js 中的 this.globalData = { } 中放入要存儲(chǔ)的數(shù)；
在組件.js 中，頭部引入 const app = getApp(); 獲取到全局變量；
直接使用 app.globalData.key 來進(jìn)行賦值和獲取值。

路由：

使用wx.navigateTo和wx.redirectTo時(shí)，可以通過在url后拼接 + 變量，然后在目標(biāo)頁面通過在onLoad周期中，通過參數(shù)來獲取傳遞過來的值。

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

接收時(shí)

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

四微信小程序列表數(shù)據(jù)綁定

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注意點(diǎn)

method 必須大寫；

GET時(shí)"Content-Type": "application/json"；

POST時(shí)"Content-Type": "application/x-www-form-urlencoded"

點(diǎn)擊事件、傳遞參數(shù)

使用bindtap綁定方法。參數(shù)用data-*的形式傳遞。記得全部小寫。默認(rèn)會(huì)放在dataset中。

openActivity: function (event) {

var params = event.currentTarget.dataset;

//dataset中多個(gè)單詞由連字符-鏈接，不能有大寫(大寫會(huì)自動(dòng)轉(zhuǎn)成小寫)

//底部菜單要使用wx.switchTab 來跳轉(zhuǎn)界面

var type = params.type;

var activityType = params.activitytype;

var relativeId = params.relativeid;

}

五微信小程序詳情數(shù)據(jù)綁定

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分別設(shè)置成0和10，并初始化數(shù)據(jù)，讓數(shù)據(jù)重新通過loadRoom()獲取
that.setData({ start: 0, maxResults: 10, infoList: [] }) that.loadRooms(); wx.stopPullDownRefresh(); }

下拉加載

onReachBottom: function () {
//上拉分頁,將頁碼加1，然后調(diào)用分頁函數(shù)
var that = this;

var start = that.data.start;

that.setData({

start: ++start

});

setTimeout(function () {

wx.showToast({

title: '加載中..',

}),

that.loadRooms();

}, 1000)

}

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

{
"enablePullDownRefresh": true
}

七微信小程序表單提交

表單提交注意點(diǎn)

bindsubmit表單提交事件；

bindinput輸入框監(jiān)控事件；

獲得表單提交數(shù)據(jù)

formSubmit: function (e) {

    //獲得表單數(shù)據(jù)
    var objData = e.detail.value;
    var password = objData.password;
    var mobile = objData.mobile;
    var code = objData.code;

}

八微信小程序緩存數(shù)據(jù)讀取

緩存寫入

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

緩存讀取、移除、清除所有

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

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

提示信息和彈框，有icon時(shí)最多顯示7個(gè)字，icon為none時(shí)可顯示全部信息。

wx.showToast({

    title: '登錄成功',

    success: function() {

        setTimeout(function() {

            //要延時(shí)執(zhí)行的代碼
            //跳轉(zhuǎn)到成功頁面
            wx.switchTab({

                url: '../index/index'

            })

        },
        2000) //延遲時(shí)間
    }

})

微信小程序模態(tài)框，確認(rèn)取消對話框

wx.showModal({

	title: '確認(rèn)',

	content: '確認(rèn)提交訂單',

	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() {

}

    }

}

十一微信小程序打電話

打電話調(diào)用wx.makePhoneCall

phoneCall: function(mpbile) {

    wx.makePhoneCall({

        phoneNumber: "13724201432"

    })

}

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

自小程序基礎(chǔ)版本2.2.3起，組件的生命周期可以在lifetimes字段中聲明（這是推薦的方式，優(yōu)先級(jí)最高）

lifetimes: {
    created: function() {
        // 組件實(shí)例化，但節(jié)點(diǎn)樹還未導(dǎo)入，因此這時(shí)不能用setData
    },
    attached: function() {
        // 在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行 
        // 節(jié)點(diǎn)樹完成，可以用setData渲染節(jié)點(diǎn)，但無法操作節(jié)點(diǎn)
    },
    ready: function() {
        // 組件布局完成，這時(shí)可以獲取節(jié)點(diǎn)信息，也可以操作節(jié)點(diǎn)
    },
    move: function() {
        // 組件實(shí)例被移動(dòng)到樹的另一個(gè)位置
    },
    detached: function() {
        // 在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時(shí)執(zhí)行
    },
}

程序生命周期
（1）onLaunch：初始化完成
（2）onHide：收起小程序到后臺(tái)
（3）onShow：展開小程序到前臺(tái)（熱啟動(dòng)）
（4）onError：程序出錯(cuò)

globalData——全局?jǐn)?shù)據(jù)

頁面生命周期
（1）onLoad：頁面冷啟動(dòng)后，初次加載（只有一次）
（2）onShow：每次切換頁面，在之后的頁面中觸發(fā)
（3）onReady：頁面被首次切換到（每個(gè)頁面只有一次）
（4）onHide：每次切換頁面，在之前的頁面中觸發(fā)
（5）onUnload：關(guān)閉當(dāng)前頁

用js控制標(biāo)題：

    wx.setNavigationBarTitle({
      title: '這是NavigationBarTitle',
    })

返回上一頁

wx.navigateBack();  //返回上一頁

wx.navigateBack({     //返回的頁面數(shù)，如果 delta 大于現(xiàn)有頁面數(shù)，則返回到首頁。
   delta: 2
 })

轉(zhuǎn)發(fā)小程序：

<button  open-type="share" plain="true"  style='border:none'>轉(zhuǎn)發(fā)</button>

onShareAppMessage: function() {
      return {
        title: '標(biāo)題',
        path: '/zh_tcwq/pages/index/index',//打開的頁面路徑
        success: function (res) {
          // 轉(zhuǎn)發(fā)成功
        },
        fail: function (res) {
          // 轉(zhuǎn)發(fā)失敗
        }
      }
    }

撥打電話

// 撥打電話
  call_phone: function () {
    var that = this
      wx.makePhoneCall({
        phoneNumber: that.data.dianhua//電話號(hào)碼
      })
  },

尺寸單位：rpx

在小程序的里面，我們使用rpx來代替px，官方的定義如下：

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

微信小程序上拉加載

如果你使用的是<scroll-view>組件：他有一個(gè)事件叫做：bindscrolltolower，滾動(dòng)到底部/右邊，會(huì)觸發(fā) 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"; // 請求借口，加載數(shù)據(jù)，并更新數(shù)據(jù)
    util.http(nextUrl, this.processDoubanData);
    wx.showNavigationBarLoading(); // 顯示loading
},

微信小程序下拉刷新

在你需要的進(jìn)行下拉刷新的頁面的json文件里面：

{
  "enablePullDownRefresh": true
}

然后在js中，進(jìn)行相應(yīng)的數(shù)據(jù)操作：

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();
},

以上既是微信小程序常用功能實(shí)例匯總包括上拉刷新,下拉加載,列表數(shù)據(jù)綁定,輪播,參數(shù)傳遞，更多關(guān)于微信小程序的知識(shí)請查看下面的相關(guān)鏈接

您可能感興趣的文章:

微信小程序

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序常用功能實(shí)例匯總包括上拉刷新,下拉加載,列表數(shù)據(jù)綁定,輪播,參數(shù)傳遞

微信小程序 getApp() 方法

一整體結(jié)構(gòu)

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

三微信小程序頁面跳轉(zhuǎn)、參數(shù)傳遞、接收參數(shù)

參數(shù)傳遞

接收參數(shù)

數(shù)據(jù)傳遞

四微信小程序列表數(shù)據(jù)綁定

點(diǎn)擊事件、傳遞參數(shù)

五微信小程序詳情數(shù)據(jù)綁定

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

上拉刷新

下拉加載

七微信小程序表單提交

八微信小程序緩存數(shù)據(jù)讀取

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

微信小程序模態(tài)框，確認(rèn)取消對話框

十微信小程序分享功能

十一微信小程序打電話

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

globalData——全局?jǐn)?shù)據(jù)

用js控制標(biāo)題：

返回上一頁

轉(zhuǎn)發(fā)小程序：

撥打電話

尺寸單位：rpx

微信小程序上拉加載

微信小程序下拉刷新

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序常用功能實(shí)例匯總包括上拉刷新,下拉加載,列表數(shù)據(jù)綁定,輪播,參數(shù)傳遞

微信小程序 getApp() 方法

一 整體結(jié)構(gòu)

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

三 微信小程序頁面跳轉(zhuǎn)、參數(shù)傳遞、接收參數(shù)

參數(shù)傳遞

接收參數(shù)

數(shù)據(jù)傳遞

四 微信小程序列表數(shù)據(jù)綁定

點(diǎn)擊事件、傳遞參數(shù)

五 微信小程序詳情數(shù)據(jù)綁定

六 微信小程序上拉刷新、下拉加載

上拉刷新

下拉加載

七 微信小程序表單提交

八 微信小程序緩存數(shù)據(jù)讀取

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

微信小程序模態(tài)框，確認(rèn)取消對話框

十 微信小程序分享功能

十一 微信小程序打電話

1、組件也有它的生命周期（lifetimes）

globalData——全局?jǐn)?shù)據(jù)

用js控制標(biāo)題：

返回上一頁

轉(zhuǎn)發(fā)小程序：

撥打電話

尺寸單位：rpx

微信小程序上拉加載

微信小程序下拉刷新

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一整體結(jié)構(gòu)

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

三微信小程序頁面跳轉(zhuǎn)、參數(shù)傳遞、接收參數(shù)

四微信小程序列表數(shù)據(jù)綁定

點(diǎn)擊事件、傳遞參數(shù)

五微信小程序詳情數(shù)據(jù)綁定

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

七微信小程序表單提交

八微信小程序緩存數(shù)據(jù)讀取

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

微信小程序模態(tài)框，確認(rèn)取消對話框

十微信小程序分享功能

十一微信小程序打電話

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