微信小程式常用功能範例彙總包括上拉重新整理,下拉載入,列表資料繫結,輪播,引數傳遞

2022-12-11 14:01:20

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

以上既是微信小程式常用功能範例彙總包括上拉重新整理,下拉載入,列表資料繫結,輪播,引數傳遞，更多關於微信小程式的知識請檢視下面的相關連結