微信小程序 頁面

2021-02-13 開源庫
Page(Object object)

註冊小程序中的一個頁面。接受一個 Object 類型參數,其指定頁面的初始數據、生命周期回調、事件處理函數等。

參數Object object屬性類型默認值必填說明dataObject

頁面的初始數據onLoadfunction

生命周期回調—監聽頁面加載onShowfunction

生命周期回調—監聽頁面顯示onReadyfunction

生命周期回調—監聽頁面初次渲染完成onHidefunction

生命周期回調—監聽頁面隱藏onUnloadfunction

生命周期回調—監聽頁面卸載onPullDownRefreshfunction

監聽用戶下拉動作onReachBottomfunction

頁面上拉觸底事件的處理函數onShareAppMessagefunction

用戶點擊右上角轉發onShareTimelinefunction

用戶點擊右上角轉發到朋友圈onAddToFavoritesfunction

用戶點擊右上角收藏onPageScrollfunction

頁面滾動觸發事件的處理函數onResizefunction

頁面尺寸改變時觸發,詳見 響應顯示區域變化onTabItemTapfunction

當前是 tab 頁時,點擊 tab 時觸發其他any

開發者可以添加任意的函數或數據到 Object 參數中,在頁面的函數中用 this 可以訪問示例代碼
Page({  data: {    text: "This is page data."  },  onLoad: function(options) {      },  onShow: function() {      },  onReady: function() {      },  onHide: function() {      },  onUnload: function() {      },  onPullDownRefresh: function() {      },  onReachBottom: function() {      },  onShareAppMessage: function () {      },  onPageScroll: function() {      },  onResize: function() {      },  onTabItemTap(item) {    console.log(item.index)    console.log(item.pagePath)    console.log(item.text)  },    viewTap: function() {    this.setData({      text: 'Set some data for updating view.'    }, function() {          })  },  customData: {    hi: 'MINA'  }})

data

data 是頁面第一次渲染使用的初始數據。

頁面加載時,data 將會以JSON字符串的形式由邏輯層傳至渲染層,因此data中的數據必須是可以轉成JSON的類型:字符串,數字,布爾值,對象,數組。

渲染層可以通過 WXML 對數據進行綁定。

示例代碼:

在開發者工具中預覽效果

<view>{{text}}</view><view>{{array[0].msg}}</view>
Page({ data: { text: 'init data', array: [{msg: '1'}, {msg: '2'}] }})

生命周期回調函數

生命周期的觸發以及頁面的路由方式詳見

onLoad(Object query)

頁面加載時觸發。一個頁面只會調用一次,可以在 onLoad 的參數中獲取打開當前頁面路徑中的參數。

參數:

名稱類型說明queryObject打開當前頁面路徑中的參數onShow()

頁面顯示/切入前臺時觸發。

onReady()

頁面初次渲染完成時觸發。一個頁面只會調用一次,代表頁面已經準備妥當,可以和視圖層進行交互。

注意:對界面內容進行設置的 API 如wx.setNavigationBarTitle,請在onReady之後進行。詳見生命周期

onHide()

頁面隱藏/切入後臺時觸發。如 wx.navigateTo 或底部 tab 切換到其他頁面,小程序切入後臺等。

onUnload()

頁面卸載時觸發。如wx.redirectTo或wx.navigateBack到其他頁面時。

頁面事件處理函數onPullDownRefresh()

監聽用戶下拉刷新事件。

需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。

可以通過wx.startPullDownRefresh觸發下拉刷新,調用後觸發下拉刷新動畫,效果與用戶手動下拉刷新一致。

當處理完數據刷新後,wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。

onReachBottom()

監聽用戶上拉觸底事件。

onPageScroll(Object object)

監聽用戶滑動頁面事件。

參數 Object object:

屬性類型說明scrollTopNumber頁面在垂直方向已滾動的距離(單位px)

注意:請只在需要的時候才在 page 中定義此方法,不要定義空方法。以減少不必要的事件派發對渲染層-邏輯層通信的影響。 注意:請避免在 onPageScroll 中過於頻繁的執行 setData 等引起邏輯層-渲染層通信的操作。尤其是每次傳輸大量數據,會影響通信耗時。

onAddToFavorites(Object object)本接口為 Beta 版本,安卓 7.0.15 版本起支持,暫只在安卓平臺支持

監聽用戶點擊右上角菜單「收藏」按鈕的行為,並自定義收藏內容。

參數 Object object:

參數類型說明webviewUrlString頁面中包含web-view組件時,返回當前web-view的url

此事件處理函數需要 return 一個 Object,用於自定義收藏內容:

欄位說明默認值title自定義標題頁面標題或帳號名稱imageUrl自定義圖片,顯示圖片長寬比為 1:1頁面截圖query自定義query欄位當前頁面的query

示例代碼


Page({ onAddToFavorites(res) { console.log('WebviewUrl: ', res.webviewUrl) return { title: '自定義標題', imageUrl: 'http://demo.png', query: 'name=xxx&age=xxx', } }})

onShareAppMessage(Object object)

監聽用戶點擊頁面內轉發按鈕(button 組件 open-type="share")或右上角菜單「轉發」按鈕的行為,並自定義轉發內容。

注意:只有定義了此事件處理函數,右上角菜單才會顯示「轉發」按鈕

參數 Object object:

參數類型說明最低版本fromString轉發事件來源。
button:頁面內轉發按鈕;
menu:右上角轉髮菜單1.2.4targetObject如果 from 值是 button,則 target 是觸發這次轉發事件的 button,否則為 undefined1.2.4webViewUrlString頁面中包含web-view組件時,返回當前web-view的url1.6.4

此事件處理函數需要 return 一個 Object,用於自定義轉發內容,返回內容如下:

自定義轉發內容 基礎庫 2.8.1 起,分享圖支持雲圖片。

欄位說明默認值最低版本title轉發標題當前小程序名稱
path轉發路徑當前頁面 path ,必須是以 / 開頭的完整路徑
imageUrl自定義圖片路徑,可以是本地文件路徑、代碼包文件路徑或者網絡圖片路徑。支持PNG及JPG。顯示圖片長寬比是 5:4。使用默認截圖1.5.0

示例代碼

在開發者工具中預覽效果


Page({ onShareAppMessage: function (res) { if (res.from === 'button') { // 來自頁面內轉發按鈕 console.log(res.target) } return { title: '自定義轉發標題', path: '/page/user?id=123' } }})

onShareTimeline()基礎庫 2.11.3 開始支持,低版本需做兼容處理。本接口為 Beta 版本,暫只在 Android 平臺支持,詳見分享到朋友圈 (Beta)

監聽右上角菜單「分享到朋友圈」按鈕的行為,並自定義發享內容。

注意:只有定義了此事件處理函數,右上角菜單才會顯示「分享到朋友圈」按鈕

自定義轉發內容

事件處理函數返回一個 Object,用於自定義分享內容,不支持自定義頁面路徑,返回內容如下:

欄位說明默認值最低版本title自定義標題,即朋友圈列表頁上顯示的標題當前小程序名稱
query自定義頁面路徑中攜帶的參數,如 path?a=1&b=2 的 「?」 後面部分當前頁面路徑攜帶的參數
imageUrl自定義圖片路徑,可以是本地文件或者網絡圖片。支持 PNG 及 JPG,顯示圖片長寬比是 1:1。默認使用小程序 Logo
onResize(Object object)基礎庫 2.4.0 開始支持,低版本需做兼容處理。

小程序屏幕旋轉時觸發。詳見 響應顯示區域變化

onTabItemTap(Object object)基礎庫 1.9.0 開始支持,低版本需做兼容處理。

點擊 tab 時觸發

Object 參數說明:

參數類型說明最低版本indexString被點擊tabItem的序號,從0開始1.9.0pagePathString被點擊tabItem的頁面路徑1.9.0textString被點擊tabItem的按鈕文字1.9.0

示例代碼:


Page({ onTabItemTap(item) { console.log(item.index) console.log(item.pagePath) console.log(item.text) }})

組件事件處理函數

Page 中還可以定義組件事件處理函數。在渲染層的組件中加入事件綁定,當事件被觸發時,就會執行 Page 中定義的事件處理函數。

示例代碼:

在開發者工具中預覽效果

<view bindtap="viewTap"> click me </view>

Page({
viewTap: function() {
console.log('view tap')
}
})

Page.route基礎庫 1.2.0 開始支持,低版本需做兼容處理。

到當前頁面的路徑,類型為String。

Page({
onShow: function() {
console.log(this.route)
}
})

Page.prototype.setData(Object data, Function callback)

setData 函數用於將數據從邏輯層發送到視圖層(異步),同時改變對應的 this.data 的值(同步)。

參數說明欄位類型必填描述最低版本dataObject是這次要改變的數據
callbackFunction否setData引起的界面更新渲染完畢後的回調函數1.5.0

Object 以 key: value 的形式表示,將 this.data 中的 key 對應的值改變成 value。

其中 key 可以以數據路徑的形式給出,支持改變數組中的某一項或對象的某個屬性,如 array[2].message,a.b.c.d,並且不需要在 this.data 中預先定義。

注意:

直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的,還會造成數據不一致。

僅支持設置可 JSON 化的數據。

單次設置的數據不能超過1024kB,請儘量避免一次設置過多的數據。

請不要把 data 中任何一項的 value 設為 undefined ,否則這一項將不被設置並可能遺留一些潛在問題。

示例代碼:

在開發者工具中預覽效果


<!--index.wxml--><view>{{text}}</view><button bindtap="changeText"> Change normal data </button><view>{{num}}</view><button bindtap="changeNum"> Change normal num </button><view>{{array[0].text}}</view><button bindtap="changeItemInArray"> Change Array data </button><view>{{object.text}}</view><button bindtap="changeItemInObject"> Change Object data </button><view>{{newField.text}}</view><button bindtap="addNewField"> Add new data </button>
Page({ data: { text: 'init data', num: 0, array: [{text: 'init data'}], object: { text: 'init data' } }, changeText: function() { this.setData({ text: 'changed data' }) }, changeNum: function() { this.data.num = 1 this.setData({ num: this.data.num }) }, changeItemInArray: function() { this.setData({ 'array[0].text':'changed data' }) }, changeItemInObject: function(){ this.setData({ 'object.text': 'changed data' }); }, addNewField: function() { this.setData({ 'newField.text': 'new data' }) }})

頁面間通信基礎庫 2.7.3 開始支持,低版本需做兼容處理。

如果一個頁面由另一個頁面通過 wx.navigateTo 打開,這兩個頁面間將建立一條數據通道:

這兩個 EventChannel 對象間可以使用 emit 和 on 方法相互發送、監聽事件。

PageObject[] getCurrentPages()

獲取當前頁面棧。數組中第一個元素為首頁,最後一個元素為當前頁面。

注意:

相關焦點

  • 微信小程序頁面加載完成前禁止操作或點其他頁面
    重點來了:如果這時候不設置加載完頁面,或者還未拿到userid的情況下,用戶點其他頁面是沒有數據的,是不顯示的,這樣會導致很嚴重的問題,整個小程序都無法使用了。這時候我們使用wx.showLoading,再配合setTimeout,就能輕鬆實現。
  • 一招搞定微信小程序前端頁面設計
    全民家教歡迎頁效果圖小程序每個頁面組成由4個部分:.wxss和.wxml和.js以及.json其中.wxml(變種的html)和.wxss(變種的css樣式表),對於小程序前端開發至關重要。所以對於從web前端開發轉到小程序開發的人來說,這個接觸起來很容易。但是對於一些像我這樣半道出家,以前只會用DW或者可視化前端工具的人,css一知半解,自己想搞一個小程序前端頁面非常困難(在不使用別人源碼,自己手擼的前提下)。在我剛剛開發"全民家教"小程序的時候往往為了一個頁面,甚至一個組件的擺放都大費周折,往往弄到半夜才勉強可以實現。
  • 微信小程序教程入門篇_微信小程序開發
    小程序的正規價格表因為有幾個因素:功能、頁面、域名和伺服器,其他第三方服務費用,例如雲儲存和簡訊套餐費用等。四、微信小程序2萬元貴嗎?經常有客戶諮詢開發一個微信小程序需要多少錢?2萬做一個小程序貴嗎?其實,目前小程序開發定製費用沒有一個統一標準,影響小程序的費用因素是由功能需求決定的,需求越複雜,所需要的的開發頁面和開發周期也越長,開發成本自然也增加。
  • 微信小程序學習(創建新頁面)
    我們學習完註冊小程序,添加新建的項目後,下面要創建一個簡單的頁面,設置標題,並從首頁跳轉到這個頁面,具體有以下幾個步驟:1、新建一個項目後,在pages 中添加一個目錄,選中page,右擊滑鼠,在彈出的菜單裡,選擇新建一個文件夾test,完成後如圖
  • 「精品」微信小程序開發(五)———頁面跳轉
    今天我給大家講一下如何進行頁面跳轉,要是連頁面跳轉都不會,還做什麼微信小程序啊,大家想想對不對,因為我們開發微信小程序不可能只開發一個頁面,我們得開發好幾個頁面,要是不能讓他們之間互相跳轉的話,那玩笑可就開大嘍!
  • 微信小程序開發系列四:微信小程序之控制器的初始化邏輯
    微信小程序開發系列教程這個教程的前兩篇文章,介紹了如何用下圖所示的微信開發者工具自動生成一個Hello World的微信小程序,並講解了這個自動生成的微信小程序的視圖開發原理。本文繼續介紹這個微信小程序的控制器index.js的實現, 即MVC設計理念的C-Controller-控制器。不過嚴格意義上說,按照微信小程序官方文檔裡介紹的,微信小程序實際採取的是React和Vue的MVMM的設計思路,提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM,JS只需要管理狀態,然後再通過一種模板語法來描述狀態和界面結構的關係即可。
  • 小程序頁面設計步驟:用模板做一個美觀的小程序
    小程序的設計效果與用戶體驗直接相關,一個設計美觀的小程序,更能吸引用戶流量,也能給用戶好的體驗,給商家帶來更高轉化率。不過大多數需要生成小程序的人都是不懂技術和設計知識的小白,這種情況下如果你需要一個美觀的小程序,就要用到小程序頁面設計模板。
  • 早報| 微信測試朋友圈直達小程序直播頁面
    微信測試朋友圈直達小程序直播頁面 據時尚商業快訊,微信廣告正在測試將直播小程序投放至朋友圈、公眾號和小程序等多個廣告流量位的新型直播模式。有分析認為,這意味著商家在微信生態不僅可以通過小程序直播運營私域流量,還能藉助微信廣告的公域流量分發機制,拓展更廣域的潛在消費人群。
  • 微信小程序發布流程:公司、個人如何註冊小程序
    如今製作微信小程序已經是非常簡單的事了,即使是完全不懂技術的小白,也能利用小程序製作工具快速生成小程序,基本上選一個模板就能快速把頁面搭建好。不過,雖然小程序頁面搭建很簡單,但還有不少人不知道頁面搭建成功後,該如何讓小程序上線、被搜索到,不清楚小程序發布流程。
  • 微信小程序「去中心化」---網站+微信小程序+公眾號!
    小程序迎來一輪又一輪的熱潮,小程序營銷帶來的優勢很明顯。再加上網站!全網營銷將出現新局面,微信小程序去中心化------16年張小龍詳細闡述過的觀點—去中心化,據他解釋「微信要打造一個真正的去中心化系統,不會提供一個中心化的流量入口來給所有的公眾平臺方、第三方」。小程序最新的全網營銷模式:公眾號+網站+微信小程序!
  • 如何為小程序申請微信認證?| 小程序問答 #35
    今天,知曉程序(微信號 zxcx0101)就來教你,如何小程序申請微信認證。關注「知曉程序」公眾號,在微信後臺回復「問答」,獲取往期小程序問答文章。
  • 微信小程序開放網頁版入口,電腦端可以用小程序了?
    微信小程序的流量入口越來越多,微信賦予小程序的功能越來越強大!據微同圈小程序官網獲悉,電腦端可以用微信小程序了!又開放了網頁版入口。微信發布新版本,新增「我的小程序」入口7月13日,微信更新了iOS 6.7.1版本,在最新版本的微信中,新增了「我的小程序」入口。小程序的復用率將會大幅度提升。
  • 微信小程序開發系列教程三:微信小程序的調試方法
    微信小程序開發系列教程這個教程的前兩篇文章,介紹了如何用下圖所示的微信開發者工具自動生成一個Hello World的微信小程序,並講解了這個自動生成的微信小程序的視圖開發原理。這個系列的下一步,會繼續介紹這個微信小程序的控制器index.js的實現。
  • 徹底看懂微信小程序
    如果小程序開發者把很多圖片、文字等頁面元素都做成動態加載且不做緩存,那麼你每次打開小程序相當於……重新下載了一遍app,跟原來的H5是一樣的。但是原來H5的頁面切換不流暢總是要加載,小程序不會啊,你怎麼能說小程序和H5一樣呢?原因在於之前大部分外包開發商更傾向於一個個單獨頁面寫,頁面邏輯混亂,當要跳轉到新的頁面就得重新向伺服器請求一個頁面,極其噁心。
  • 微信小程序1萬字實操指南
    如果小程序開發者把很多圖片、文字等頁面元素都做成動態加載且不做緩存,那麼你每次打開小程序相當於……重新下載了一遍 app,跟原來的 H5是一樣的。但是原來 H5的頁面切換不流暢總是要加載,小程序不會啊,你怎麼能說小程序和 H5一樣呢?
  • 微信小程序開發系列二:微信小程序的視圖設計
    大家如果跟著我第一篇文章  一起動手,那麼微信小程序的開發環境一定搭好了。效果就是能把該小程序的體驗版以二維碼的方式發送給其他朋友使用。這個系列接下來的文章我們就來研究使用微信開發者工具自動生成的這個小程序的實現文件。
  • 微信小程序開發教程,零基礎入門小程序雲開發視頻
    微信小程序開發教程,零基礎入門小程序雲開發,培訓課程視頻講座內容介紹
  • 小程序雲端解決方案,微信小程序及後臺交互架構
    從微信的誕生,到微信公眾號、微信支付,再到小程序,騰訊生態在一次又一次影響用戶行為習慣的同時,也為開發者提供了新的思路和技能發展方向。無可置疑,微信小程序開發浪潮已經來臨,也將在 2018年成為各行業流量紅利的集中爆發入口。
  • 如何註冊微信小程序
    什麼是小程序,小程序的趨勢,2.微信公眾號的重要性日漸降低,小程序如何可以反轉這個情況?3.小程序註冊需要提供哪些資料,小程序註冊需要多久 ?4.不管是企業個體還是個人都是可以註冊小程序,但是個人與企業還是有差別的,個人註冊小程序在類別上有限制,而且在審核時間上比較長。所以還是不建議個人註冊小程序。小程序註冊時間一般是一周之內。微信必須與營業執照經營範圍必須和小程序開店內容一致,也就是說你用餐飲的營業執照註冊的小程序,經營服裝是絕對不可以的。
  • 微信小程序開發系列一:微信小程序的申請和開發環境的搭建
    我最近也剛剛開始微信小程序的開發,想把我自學的一些心得寫出來分享給大家。這是第一篇,從零開始學習微信小程序開發。主要是小程序的註冊和開發環境的搭建。首先我們要在下列網址申請一個屬於自己的微信小程序:https://mp.weixin.qq.com/cgi-bin/wx點擊按鈕「前往註冊」。注意我們需要使用一個沒有註冊過微信小程序或者微信公眾號的郵箱。我用的是網易郵箱。註冊之後,郵箱會收到一封激活郵件。激活之後,就可以進入小程序主體信息登記頁面了。