小程序?qū)W習(xí)(四)之邏輯層(主要說(shuō)的是對(duì)應(yīng)的js文件)

小程序?qū)W習(xí)(四)之邏輯層(主要說(shuō)的是對(duì)應(yīng)的js文件)

本節(jié)知識(shí)點(diǎn):

  • 注冊(cè)小程序

  • 場(chǎng)景值

  • 注冊(cè)頁(yè)面

  • 路由

  • 模塊化

  • API

App()

App()函數(shù)用來(lái)注冊(cè)一個(gè)小程序，接受一個(gè)object參數(shù)，其指定小程序的生命周期函數(shù)等。

object參數(shù)說(shuō)明:

  • onLaunch

    類(lèi)型是function 作用監(jiān)聽(tīng)小程序初始化，觸發(fā)時(shí)機(jī)就是當(dāng)小程序初始化加載，會(huì)觸發(fā)onLaunch(全局只觸發(fā)一次)

  • onReady

    類(lèi)型function 作用監(jiān)聽(tīng)小程序加載。觸發(fā)時(shí)機(jī)當(dāng)小程序初次渲染完成。

  • onShow

類(lèi)型是Function 作用是監(jiān)聽(tīng)小程序顯示。觸發(fā)時(shí)機(jī)當(dāng)小程序啟動(dòng)后，或者從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā)onShow

  • onHide

類(lèi)型是Function 作用是監(jiān)聽(tīng)小程序隱藏，觸發(fā)時(shí)機(jī)當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)時(shí)候，會(huì)觸發(fā)onHide

  • OnError

類(lèi)型function 作用錯(cuò)誤監(jiān)聽(tīng)函數(shù) , 當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者api調(diào)用失敗。會(huì)觸發(fā)onError并帶上錯(cuò)誤信息

  • 其他

類(lèi)型Any 開(kāi)發(fā)者可以添加任意的函數(shù)或者數(shù)據(jù)到object參數(shù)中，用this可以訪(fǎng)問(wèn)

前臺(tái)，后臺(tái)定義。當(dāng)用戶(hù)點(diǎn)擊左上角關(guān)閉，或者來(lái)電話(huà)的時(shí)候，小程序并沒(méi)有直接銷(xiāo)毀，而是進(jìn)入了后臺(tái)。當(dāng)再次進(jìn)入小程序就又會(huì)從后臺(tái)進(jìn)入前臺(tái)。
特別注意：只有當(dāng)小程序進(jìn)入后臺(tái)一定的時(shí)間，或者系統(tǒng)資源占用過(guò)高，才會(huì)被真正的銷(xiāo)毀。

getApp()

我們提供了全局的getApp()函數(shù)，可以獲取到小程序?qū)嵗?/p> 

var app = getApp();
console.log(app.globalData)   //I am global data

特別注意:App()必須在app.js中注冊(cè)，且不能是多個(gè)
不要在定義于App()內(nèi)的函數(shù)調(diào)用getApp()使用this 就可以拿到app實(shí)例
不要在onlauch的時(shí)候調(diào)用getCurrentPages(),此時(shí)page還沒(méi)有生成
通過(guò)getApp() 獲取到實(shí)例后，不要私自調(diào)用或者啟用生命周期函數(shù)

Page

Page()函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面，接受一個(gè)object參數(shù)，其指定的頁(yè)面的初始數(shù)據(jù)，生命周期函數(shù)，事件處理函數(shù)等等

Object參數(shù)說(shuō)明:

  • data 類(lèi)型object 作用頁(yè)面的初始數(shù)據(jù)

  • onLoad 類(lèi)型Function 作用監(jiān)聽(tīng)頁(yè)面加載(只執(zhí)行一次)

  • onReady 類(lèi)型Function 作用監(jiān)聽(tīng)頁(yè)面初次渲染完成

  • onShow 類(lèi)型Function 作用監(jiān)聽(tīng)頁(yè)面顯示

  • onHide 類(lèi)型Function 作用監(jiān)聽(tīng)頁(yè)面隱藏

  • onUnload 類(lèi)型Function 作用監(jiān)聽(tīng)頁(yè)面卸載

  • onPullDownRefresh 類(lèi)型Function 作用監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作

  • onReachBottom 類(lèi)型Function 作用頁(yè)面上拉觸底事件的處理函數(shù)

  • onShareAppMessage 類(lèi)型Function 作用用戶(hù)點(diǎn)擊右上角轉(zhuǎn)發(fā)

  • onPageScroll 類(lèi)型Function 作用頁(yè)面滾動(dòng)觸發(fā)事件的處理函數(shù)

  • 其他 類(lèi)型 Any 作用開(kāi)發(fā)者可以添加任意的函數(shù)或者數(shù)據(jù)到object參數(shù)中。在頁(yè)面的函數(shù)中用this可以訪(fǎng)問(wèn)

示例代碼:

//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.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
   // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

初始化數(shù)據(jù)

初始化數(shù)據(jù)將作為頁(yè)面的第一次渲染。data將會(huì)以JSON的形式由邏輯層傳輸?shù)戒秩緦?。所以?shù)據(jù)必須是可以轉(zhuǎn)成JSON格式的。字符串，數(shù)字，布爾值，對(duì)象，數(shù)組

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

對(duì)應(yīng)的在JS里面的data數(shù)據(jù)應(yīng)該寫(xiě)成

Page({
 data:{
  text:"今天",
  array:[{msg:'1'},{msg:'2'}]
 }
})

生命周期函數(shù)

  • onLoad :頁(yè)面加載

    一個(gè)頁(yè)面只會(huì)調(diào)用一次，可以在onLoad中獲取打開(kāi)當(dāng)前頁(yè)面所調(diào)用的query參數(shù)

  • onShow:頁(yè)面顯示

    每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次

  • onReady: 頁(yè)面初次渲染完成

    一個(gè)頁(yè)面只會(huì)調(diào)用一次，代碼頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層交互
    對(duì)界面的設(shè)置如:wx.setNavigationBarTitle請(qǐng)?jiān)趏nReady之后設(shè)置

  • onHide 頁(yè)面隱藏

    當(dāng)navigateTo或者底部tab切換的時(shí)候調(diào)用

  • onUnload: 頁(yè)面卸載

    當(dāng)redirectTo或者navigateBack的時(shí)候調(diào)用

頁(yè)面相關(guān)事件處理函數(shù)

  • onPullDownRefresh :下拉刷新

    （1）監(jiān)聽(tīng)用戶(hù)下拉刷新事件。
    （2）必須需要在app.json的window選項(xiàng)中，或者在頁(yè)面配置中開(kāi)啟enablePullDownRefresh
    （3）當(dāng)處理完數(shù)據(jù)刷新后。wx.stopPullDownRefresh可以停止當(dāng)前頁(yè)面的刷新

  • onReachBottom:上拉觸底

    (1)監(jiān)聽(tīng)用戶(hù)上拉觸底事件。
    (2)可以在app.json里面的window選項(xiàng)中或者頁(yè)面配置中設(shè)置觸發(fā)距離onReachBottomDistance
    (3)在觸發(fā)距離內(nèi)滑動(dòng)期間，本事件只會(huì)觸發(fā)一次.

  • onPageScroll：頁(yè)面滾動(dòng)

    (1)監(jiān)聽(tīng)用戶(hù)滑動(dòng)頁(yè)面事件
    (2)參數(shù)為object包含以下字段.
    scrollTop 類(lèi)型Num 頁(yè)面在垂直方向已滾動(dòng)的距離(單位Px)
    (3)代碼如下:

onPageScroll:function(options){
    console.log(options.scrollTop);
    }

  • onShareAppMessage : 用戶(hù)轉(zhuǎn)發(fā)

    (1)只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示轉(zhuǎn)發(fā)按鈕.
    (2)用戶(hù)點(diǎn)擊轉(zhuǎn)發(fā)按鈕的時(shí)候就會(huì)調(diào)用
    (3)此事件需要return一個(gè)object用戶(hù)自定義轉(zhuǎn)發(fā)內(nèi)容

  onShareAppMessage: function () {
  return {
    title: '頁(yè)面的主標(biāo)題',
    desc: '頁(yè)面的描述',
    path: '/pages/index/index?id=123'
        }
      }

事件處理函數(shù)

(1)除了初始化數(shù)據(jù)和生命周期函數(shù)，我們還可以自定義事件處理函數(shù)，在組件中加入事件綁定，當(dāng)達(dá)到觸發(fā)事件就會(huì)執(zhí)行Page中定義的事件處理函數(shù).

示例代碼:

<view bindtap = "clickme">點(diǎn)擊我</view>

在邏輯層(js)

Page({
  clickme:function(){
  console.log('Hello world!')
  }
})

this.setData()

setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層(異步)，同時(shí)改變對(duì)應(yīng)的this.data的值(同步)

setData()參數(shù)格式

  • data

類(lèi)型object 必填:是 描述需要改變的數(shù)據(jù)

  • callback 類(lèi)型function 必填:否 描述回調(diào)函數(shù)

object以key,value的形式表示將this.data中的key對(duì)應(yīng)的值變成value！callback是一個(gè)回調(diào)函數(shù)，在這次setData對(duì)界面渲染完畢后使用。
其中key可以非常靈活，以數(shù)據(jù)路徑的形式給出。如arr[2].message,a.b.c.d并且不需要再this.data中預(yù)先定義.

注意:
直接修改this.data而不調(diào)用this.setData 是無(wú)法改變頁(yè)面的狀態(tài)的。還會(huì)造成數(shù)據(jù)不一致。
單次設(shè)置的數(shù)據(jù)不能超過(guò)1024KB，避免一次設(shè)置過(guò)多的數(shù)據(jù).

示例代碼:

<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>

在index.js文件里面

Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

頁(yè)面路由

在小程序中所有的頁(yè)面的路由全部由框架進(jìn)行管理

getCurrentPages()

getCurrentPages()函數(shù)用于獲取到當(dāng)前頁(yè)面棧的實(shí)例，以數(shù)組形式按棧的順序給出，第一個(gè)元素為首頁(yè)，最后一個(gè)元素為當(dāng)前頁(yè)。

重要的事情說(shuō)三遍。千萬(wàn)不要修改頁(yè)面棧。千萬(wàn)不要修改頁(yè)面棧。千萬(wàn)不要修改頁(yè)面棧。

路由方式

  • 打開(kāi)新頁(yè)面:

    調(diào)用API wx.navigateTo
    或者組件<navigator open-type="navigateTo">

  • 頁(yè)面重定向

    調(diào)用API wx.redirecTo
    或者使用組件<navigator open-type="redirectTo">

  • 頁(yè)面返回

    調(diào)用API wx.navigateBack
    或者使用組件<navigator open-type="navigateBack">

  • Tab切換

    調(diào)用API wx.switchTab
    或者使用組件<navigator open-type="switchTab">

  • 重啟動(dòng)

    調(diào)用API wx.reLaunch
    或者使用組件<navigator open-type="reLaunch">

這幾種路由跳轉(zhuǎn)方式。對(duì)于前頁(yè)面來(lái)說(shuō):
wx.navigateTo 對(duì)應(yīng)的 onHide
wx.redirecTo 對(duì)應(yīng)的 onUnload
wx.navigateBack 對(duì)應(yīng)的onUnload

特別注意

  • navigateTo,redirectTo只能打開(kāi)不是底部導(dǎo)航指定的頁(yè)面
  • SwitchTab 只能打開(kāi)tabBar頁(yè)面
  • reLaunch 可以打開(kāi)任意頁(yè)面
  • 頁(yè)面底部的tabBar由頁(yè)面決定，即只要是定義了tabbar的頁(yè)面，底部就有tabBar
  • 調(diào)用頁(yè)面路由帶的參數(shù)可以在目標(biāo)頁(yè)面的onLoad中獲取
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 昨天看了一下微信小程序官方文檔,總結(jié)一下自己學(xué)習(xí)的個(gè)人心得. 首先從官方文檔給的框架說(shuō)起,微信小程序官方文檔給出了...
    Mr大大大閱讀 47,533評(píng)論 9贊 68
  • 微信小程序在無(wú)論在功能、文檔及相關(guān)支持方面，都是優(yōu)于前面幾種微信賬號(hào)類(lèi)型，它提供了很多原生程序才有的接口，使得我們...
    未央大佬閱讀 2,407評(píng)論 0贊 12
  • 前言: 上一篇文章我們介紹了.wxml和.wxss文件，這篇文章對(duì)js文件進(jìn)行詳細(xì)的講解，首先貼上一個(gè)簡(jiǎn)單的js文...
    Smile__EveryDay閱讀 20,432評(píng)論 0贊 7
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,724評(píng)論 19贊 139
  • 目標(biāo)：4215 完成：399.8 差比：3815.2 累計(jì)沒(méi)完成：18765 今天休息第一天上班，早上把倉(cāng)庫(kù)整理了...
    譚甜閱讀 185評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容