首頁 > 微信小程式 > 小程式開發 > 微信小程式開發註冊頁面的介紹

微信小程式開發註冊頁面的介紹

高洛峰
發布: 2017-03-23 13:50:32
原創
2185 人瀏覽過

這篇文章主要介紹了微信小程式註冊頁面的相關資料,需要的朋友可以參考下

##微信小程式-Page

Page()

函數用來註冊一個頁面。接受一個object參數,其指定頁面的初始資料、生命週期函數、事件處理函數等。

object參數說明:

類型描述dataObject頁面的初始資料Function生命週期函數--監聽頁面載入onReady# Function生命週期函數--監聽頁面渲染完成#onShowFunction生命週期函數--監聽頁面顯示onHideFunction生命週期函數--監聽頁面隱藏Function生命週期函數--監聽頁面卸載#其他#

範例程式碼:

//index.js
Page({
 data: {
 text: "This is page data."
 },
 onLoad: function(options) {
 // Do some initialize when page load.
 },
 onReady: function() {
 // Do something when page ready.
 },
 onShow: function() {
 // Do something when page show.
 },
 onHide: function() {
 // Do something when page hide.
 },
 onUnload: function() {
 // Do something when page close.
 },
 // Event handler.
 viewTap: function() {
 this.setData({
  text: 'Set some data for updating view.'
 })
 }
})
登入後複製

初始化資料

初始化資料將作為頁面的第一次渲染。 data將會以JSON的形式由邏輯層傳至渲染層,所以其資料必須是可以轉換成JSON的格式:字串,數字,布林值,物件陣列

渲染層可以透過WXML對資料進行綁定。

範例程式碼:

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
登入後複製
Page({
 data: {
 text: &#39;init data&#39;,
 array: [{msg: &#39;1&#39;}, {msg: &#39;2&#39;}]
 }
})
登入後複製

事件處理函數

除了初始化資料和生命週期函數,Page中還可以定義一些特殊的函數:事件處理函數。在渲染層可以在元件中加入事件綁定,當達到觸發事件時,就會執行Page中定義的事件處理函數。

範例程式碼:

click me

Page({
 viewTap: function() {
 console.log(&#39;view tap&#39;)
 }
})
登入後複製

Page. prototype.setData()

setData函數用於將資料從邏輯層傳送到視圖層,同時改變對應的this.data的值。

注意:

直接修改this.data無效,無法改變頁面的狀態,也會造成數據不一致。
單次設定的資料不能超過1024kB,請盡量避免一次設定過多的資料。

setData()參數格式

接受一個對象,以key,value的形式表示將this.data中的key對應的值改變成value。
其中key可以非常靈活,以資料路徑的形式給出,如array[2].message,a.b.c.d,並且不需要在this.data中預先定義。

範例程式碼:

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
登入後複製
//index.js
Page({
 data: {
 text: &#39;init data&#39;,
 array: [{text: &#39;init data&#39;}],
 object: {
  text: &#39;init data&#39;
 }
 },
 changeText: function() {
 // this.data.text = &#39;changed data&#39; // bad, it can not work
 this.setData({
  text: &#39;changed data&#39;
 })
 },
 changeItemInArray: function() {
 // you can use this way to modify a danamic data path
 var changedData = {}
 var index = 0
 changedData[&#39;array[&#39; + index + &#39;].text&#39;] = &#39;changed data&#39;
 this.setData(changedData)
 },
 changeItemInObject: function(){
 this.setData({
  &#39;object.text&#39;: &#39;changed data&#39;
 });
 },
 addNewField: function() {
 this.setData({
  &#39;newField.text&#39;: &#39;new data&#39;
 })
 }
})
登入後複製

以下內容你不需要立刻完全弄清楚,不過以後它會有幫助。

生命週期函數

下圖說明了Page實例的生命週期。

微信小程式開發註冊頁面的介紹

頁面的路由

#在小程式中所有頁面的路由全部由框架進行管理,對於路由的觸發方式以及頁面生命週期函數如下:

屬性
onLoad
onUnload
##Any 開發者可以將任意的函數或資料加入Object參數中,用this可以存取
##頁回傳#呼叫API wx.navigateBack或使用者按左上角返回按鈕onShowonUnload#Tab切換多Tab 模式下使用者切換Tab
#路由方式 觸發時機 路由後頁面 路由前頁面
#初始化 小程式開啟的第一個頁面 onLoad,onShow  
#開啟新頁面 呼叫API wx.navigateTo或使用元件 onLoad,onShow onHide
頁面重定向 呼叫API wx.redirectTo或使用元件  onLoad,onShow onUnload


######################### ##第一次打開onLoad,onshow;否則onShow######onHide################感謝閱讀,希望能幫助大家,謝謝大家對本站的支持! ############

以上是微信小程式開發註冊頁面的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板