微信小程序常用功能實例匯總包括上拉刷新,下拉加載,列表數據綁定,輪播,參數傳遞
微信小程序 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();
},
以上既是微信小程序常用功能實例匯總包括上拉刷新,下拉加載,列表數據綁定,輪播,參數傳遞，更多關於微信小程序的知識請查看下面的相關鏈接