邏輯層 App Service

小程序開發框架的邏輯層使用 JavaScript 引擎爲小程序提供開發者 JavaScript 代碼的運行環境以及微信小程序的特有功能。

邏輯層將數據進行處理後發送給視圖層，同時接受視圖層的事件反饋。

開發者寫的所有代碼最終將會打包成一份 JavaScript 文件，並在小程序啓動的時候運行，直到小程序銷燬。這一行爲類似 ServiceWorker，所以邏輯層也稱之爲 App Service。

在 JavaScript 的基礎上，我們增加了一些功能，以方便小程序的開發：

增加 App 和 Page 方法，進行程序和頁面的註冊。
增加 getApp 和 getCurrentPages 方法，分別用來獲取 App 實例和當前頁面棧。
提供豐富的 API，如微信用戶數據，掃一掃，支付等微信特有能力。
每個頁面有獨立的作用域，並提供模塊化能力。

注意：小程序框架的邏輯層並非運行在瀏覽器中，因此 JavaScript 在 web 中一些能力都無法使用，如 window，document 等。

一註冊程序

（1）App(Object)

App() 函數用來註冊一個小程序。接受一個 Object 參數，其指定小程序的生命週期回調等。

App() 必須在 app.js 中調用，必須調用且只能調用一次。不然會出現無法預期的後果。

Object 參數說明：

前臺、後臺定義： 當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序並沒有直接銷燬，而是進入了後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺。需要注意的是：只有當小程序進入後臺一定時間，或者系統資源佔用過高，纔會被真正的銷燬。

關閉小程序（基礎庫版本1.1.0開始支持）：當用戶從掃一掃、轉發等入口（場景值爲1007, 1008, 1011, 1025）進入小程序，且沒有置頂小程序的情況下退出，小程序會被銷燬。

小程序運行機制在基礎庫版本 1.4.0 有所改變： 上一條關閉邏輯在新版本已不適用。詳情

我們下面通過代碼來演示上面那幾個函數的區別，

onLaunch函數是指在小程序初始化的過程中調用的函數，那麼我們看看是不是這樣，在前面我們說過了對象用{}，那麼給App傳入一個對象，應該在app.js下寫成App({ ...... })的形式，我們先來測試onLauch方法，

1. onLaunch(Object)

小程序初始化完成時觸發，全局只觸發一次。參數也可以使用 wx.getLaunchOptionsSync 獲取。

參數說明：

與 wx.getLaunchOptionsSync 一致

App({
    onLaunch(options){
        console.log("初始化成功1")
        console.log(options)
    }
})

當我們運行小程序時，在console窗口出現

我們可以看到onLanch的參數有path, query.... 這些參數我們等會講，我們點擊切後臺圖標，進入後臺，沒有發現console窗口變化，再次點擊切後臺，也沒發現任何變化，說明onLaunch只有在小程序初始化階段調用，

2.onShow(Object)

小程序啓動，或從後臺進入前臺顯示時觸發。也可以使用 wx.onAppShow 綁定監聽。

參數說明：

與 wx.onAppShow 一致

接下來我們測試onshow方法：

//app.js
App({
    onLaunch(options){
        console.log("初始化成功1")
        console.log(options)
    },
    onShow(options) {
        console.log("後臺進入前臺")
        console.log(options)
    }
})

運行程序：

從圖中我們發現是先初始化，然後再從後臺進入前臺，我們不妨再做一個測試，點擊兩次切後臺，注意點一次切後臺是從前臺到後臺，再點擊一次是從後臺進入前臺。出現如下信息：

的確再次運行了onshow方法，圖中的錯誤暫且不管。

3. onHide()

小程序從前臺進入後臺時觸發。也可以使用 wx.onAppHide 綁定監聽。

我們接下來測試一下onHide方法，看看是不是從前臺到後臺

//app.js
App({
    onLaunch(options){
        console.log("初始化成功1")
        console.log(options)
    },
    onShow(options) {
        console.log("後臺進入前臺")
        console.log(options)
    },
    onHide(options){
        console.log("前臺進入後臺")
        console.log(options)
    }
})

運行後出現

注意到小程序的流程了嗎，先初始化，然後從後臺進入前臺，沒有觸發onHide方法，接下來我們點擊一下切後臺，

可以看到當前臺到後臺時，的確觸發了onHide方法。

這三個方法我們就講到這。

（2）getApp(Object)

全局的 getApp() 函數可以用來獲取到小程序 App 實例。

Object 參數說明：

注意：

不要在定義於 App() 內的函數中調用 getApp() ，使用 this 就可以拿到 app 實例。
通過 getApp() 獲取實例之後，不要私自調用生命週期函數。

這個到底是什麼意思呢，其實getapp方法是獲取小程序app實例的，這樣說很抽象，比如說我在app.js下定義了一個變量，我在其他頁面的js文件中可以通過getapp函數實例化一個app，然後在調用實例化對象的元素，比如在app.js下定義了一個name

//app.js
App({
    onLaunch(options){
        console.log("初始化成功1")
        console.log(options)
    },
    onShow(options) {
        console.log("後臺進入前臺")
        console.log(options)
    },
    onHide(options){
        console.log("前臺進入後臺")
        console.log(options)
    },
    "name": "llls"
})

然後在index.js下我們看看實例化後的對象是啥，

//index.js
//獲取應用實例
const app = getApp()
console.log(app)

Page({
  data: {
  }
})

運行

看，這裏有上面我們提到的方法和name變量，我們可以單獨打印name變量， indexjs代碼：

//index.js
//獲取應用實例
const app = getApp()
console.log(app.name)

Page({
  data: {
  }
})

運行：

註冊程序我們暫時講到這裏

二，場景值

當前支持的場景值有：

場景值ID	說明
1001	發現欄小程序主入口，「最近使用」列表（基礎庫2.2.4版本起包含「我的小程序」列表）
1005	頂部搜索框的搜索結果頁
1006	發現欄小程序主入口搜索框的搜索結果頁
1007	單人聊天會話中的小程序消息卡片
1008	羣聊會話中的小程序消息卡片
1011	掃描二維碼
1012	長按圖片識別二維碼
1013	手機相冊選取二維碼
1014	小程序模板消息
1017	前往體驗版的入口頁
1019	微信錢包
1020	公衆號 profile 頁相關小程序列表
1022	聊天頂部置頂小程序入口
1023	安卓系統桌面圖標
1024	小程序 profile 頁
1025	掃描一維碼
1026	附近小程序列表
1027	頂部搜索框搜索結果頁「使用過的小程序」列表
1028	我的卡包
1029	卡券詳情頁
1030	自動化測試下打開小程序
1031	長按圖片識別一維碼
1032	手機相冊選取一維碼
1034	微信支付完成頁
1035	公衆號自定義菜單
1036	App 分享消息卡片
1037	小程序打開小程序
1038	從另一個小程序返回
1039	搖電視
1042	添加好友搜索框的搜索結果頁
1043	公衆號模板消息
1044	帶 shareTicket 的小程序消息卡片詳情
1045	朋友圈廣告
1046	朋友圈廣告詳情頁
1047	掃描小程序碼
1048	長按圖片識別小程序碼
1049	手機相冊選取小程序碼
1052	卡券的適用門店列表
1053	搜一搜的結果頁
1054	頂部搜索框小程序快捷入口
1056	音樂播放器菜單
1057	錢包中的銀行卡詳情頁
1058	公衆號文章
1059	體驗版小程序綁定邀請頁
1064	微信連Wi-Fi狀態欄
1067	公衆號文章廣告
1068	附近小程序列表廣告
1069	移動應用
1071	錢包中的銀行卡列表頁
1072	二維碼收款頁面
1073	客服消息列表下發的小程序消息卡片
1074	公衆號會話下發的小程序消息卡片
1077	搖周邊
1078	連Wi-Fi成功頁
1079	微信遊戲中心
1081	客服消息下發的文字鏈
1082	公衆號會話下發的文字鏈
1084	朋友圈廣告原生頁
1089	微信聊天主界面下拉，「最近使用」欄（基礎庫2.2.4版本起包含「我的小程序」欄）
1090	長按小程序右上角菜單喚出最近使用歷史
1091	公衆號文章商品卡片
1092	城市服務入口
1095	小程序廣告組件
1096	聊天記錄
1097	微信支付簽約頁
1099	頁面內嵌插件
1102	公衆號 profile 頁服務預覽
1103	發現欄小程序主入口，「我的小程序」列表（基礎庫2.2.4版本起廢棄）
1104	微信聊天主界面下拉，「我的小程序」欄（基礎庫2.2.4版本起廢棄）

對於小程序，可以在 App 的 onLaunch 和 onShow，或wx.getLaunchOptionsSync 中獲取上述場景值。
對於小遊戲，可以在 wx.getLaunchOptionsSync 和 wx.onShow 中獲取上述場景值

部分場景值下還可以獲取來源應用、公衆號或小程序的appId。

Tip: 由於Android系統限制，目前還無法獲取到按 Home 鍵退出到桌面，然後從桌面再次進小程序的場景值，對於這種情況，會保留上一次的場景值。

我們用兩種方法獲取場景值，一個是通過onLaunch和onShow的參數獲得，一種是通過wx.getLaunchOptionsSync()函數獲得，前面那種方法只需要知道週期函數的參數是什麼就可以獲得，我們看看wx.getLaunchOptionsSync()函數用法

Object wx.getLaunchOptionsSync()

基礎庫 2.1.2 開始支持，低版本需做兼容處理。

獲取小程序啓動時的參數。與 App.onLaunch 的回調參數一致。

返回值

Object

啓動參數

屬性	類型	說明
path	string	啓動小程序的路徑
scene	number	啓動小程序的場景值
query	Object	啓動小程序的 query 參數
shareTicket	string	shareTicket，詳見獲取更多轉發信息
referrerInfo	Object	來源信息。從另一個小程序、公衆號或 App 進入小程序時返回。否則返回 `{}`。(參見後文注意)

referrerInfo 的結構

屬性	類型	說明
appId	string	來源小程序、公衆號或 App 的 appId
extraData	Object	來源小程序傳過來的數據，scene=1037或1038時支持

返回有效 referrerInfo 的場景

場景值	場景	appId含義
1020	公衆號 profile 頁相關小程序列表	來源公衆號
1035	公衆號自定義菜單	來源公衆號
1036	App 分享消息卡片	來源App
1037	小程序打開小程序	來源小程序
1038	從另一個小程序返回	來源小程序
1043	公衆號模板消息	來源公衆號

注意

部分版本在無referrerInfo的時候會返回 undefined，建議使用 options.referrerInfo && options.referrerInfo.appId 進行判斷。

通過這裏我們可以知道，只要通過wx.getLaunchOptionsSync().scene就可以訪問到啓動小程序的場景值，接下來我們看看代碼怎麼寫，

app.js代碼：

//app.js
App({
    onLaunch(options){
        console.log("初始化成功1"),
        console.log("場景值爲：",  wx.getLaunchOptionsSync().scene)
    },
    onShow(options) {
        console.log("後臺進入前臺")
        console.log(options)
        console.log("場景值爲：", options.scene)
        
    },
    onHide(){
        console.log("前臺進入後臺")
    },
    "name": "llls",
})

運行後：

我們再切換到後臺，通過掃描二維碼進入，看場景值是不是對的上

結果和我們想象的一樣，與官方解釋一樣的：

特別注意： wx.getLaunchOptionsSync()是獲得小程序啓動時的參數，這個說明參數中的場景值是一開始進入小程序的場景值，不管你之後是怎麼進入小程序，這裏的值是不變的，我們做一個測試，就在onshow函數中使用wx.getLaunchOptionsSync()函數， app.js代碼如下

//app.js
App({
    onLaunch(options){
        console.log("初始化成功1"),
         console.log(options)
        console.log("場景值爲：", options.scene)
    },
    onShow(options) {
        console.log("後臺進入前臺")
        console.log("場景值爲：", wx.getLaunchOptionsSync().scene)
    },
    onHide(){
        console.log("前臺進入後臺")
    },
    "name": "llls",
})

運行：

我們再切換後臺，通過掃描一維碼進入小程序，結果

場景值不變，那是因爲wx.getLaunchOptionsSync()參數的場景值是小程序初始化的場景值。

三，註冊頁面

頁面 Page

Page(Object) 構造器

Page(Object) 函數用來註冊一個頁面。接受一個 Object 類型參數，其指定頁面的初始數據、生命週期回調、事件處理函數等。

Object 參數說明：

屬性	類型	描述
data	Object	頁面的初始數據
onLoad	Function	生命週期回調—監聽頁面加載
onShow	Function	生命週期回調—監聽頁面顯示
onReady	Function	生命週期回調—監聽頁面初次渲染完成
onHide	Function	生命週期回調—監聽頁面隱藏
onUnload	Function	生命週期回調—監聽頁面卸載
onPullDownRefresh	Function	監聽用戶下拉動作
onReachBottom	Function	頁面上拉觸底事件的處理函數
onShareAppMessage	Function	用戶點擊右上角轉發
onPageScroll	Function	頁面滾動觸發事件的處理函數
onResize	Function	頁面尺寸改變時觸發，詳見響應顯示區域變化
onTabItemTap	Function	當前是 tab 頁時，點擊 tab 時觸發
其他	Any	開發者可以添加任意的函數或數據到 `Object` 參數中，在頁面的函數中用 `this` 可以訪問

接下來我們細講這些要點

1. data

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

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

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

我們根據官方例程來講解一下怎麼使用，用法其實和大多數的模板語言類似，通過{{}}對鍵進行訪問，訪問該鍵對應的值，因爲小程序首先進入的是index頁面，我爲了以後講解後面的函數用法，我在另一個頁面about頁面做實驗

about.js

Page({
  data: {
    text: '這是關於會員頁面',
  }
})

about.wxml

<!--pages/about/about.wxml-->
<text>{{text}}</text>

我們運行一下，然後切換到about頁面（我這裏做了一個tar，不知道怎麼做的詳見我上一節）

可以看出，我們的text數據渲染完成。對了想到一個問題，要是數據是數組怎麼訪問？這個訪問方式和普通的類似，我們先看看微信小程序的for循環怎麼用，推薦博客：https://blog.csdn.net/qq_38191191/article/details/80927034

wx:for

在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重複渲染該組件。

默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item

在.js文件

data: {
languages: [
{ id: 1, name: 'php' },
{ id: 4, name: 'javascript' },
{ id: 3, name: 'golang' },
{ id: 2, name: 'python' },
{ id: 5, name: 'java' },
]
},

在.wxml中

<view wx:for="{{languages}}">
下標:{{index}},ID:{{item.id}},name:{{item.name}}.
</view>

效果

使用 wx:for-item 可以指定數組當前元素的變量名，

使用 wx:for-index 可以指定數組當前下標的變量名：

<view wx:for="{{languages}}" wx:for-index="idx" wx:for-item="Name" wx:key="idx">
{{idx}}:{{Name.id}}:{{Name.name}}
</view>

突然發現，看完這篇博客，遍歷數組已經會了，我再看看我寫的代碼：

about.js(忽略週期函數部分)

// pages/about/about.js
Page({

    /**
     * 頁面的初始數據
     */
    data: {
        text:"這是關於會員頁面",
       array: [
            {msg: 1 },
           { msg: 2 },
           { msg: 3 },
        ]
    },

    /**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function (options) {
        console.log("監聽頁面加載")
    },

    /**
     * 生命週期函數--監聽頁面初次渲染完成
     */
    onReady: function () {
        console.log("監聽頁面初次渲染完成")
    },

    /**
     * 生命週期函數--監聽頁面顯示
     */
    onShow: function () {
        console.log("監聽頁面顯示")
    },

    /**
     * 生命週期函數--監聽頁面隱藏
     */
    onHide: function () {
        console.log("監聽頁面隱藏")
    },

    /**
     * 生命週期函數--監聽頁面卸載
     */
    onUnload: function () {
        console.log("監聽頁面卸載")
    },

    /**
     * 頁面相關事件處理函數--監聽用戶下拉動作
     */
    onPullDownRefresh: function () {
        console.log("監聽用戶下拉動作")
    },

    /**
     * 頁面上拉觸底事件的處理函數
     */
    onReachBottom: function () {
        console.log("頁面上拉觸底事件的處理函數")
    },

    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function () {
        console.log("用戶點擊右上角分享")
    }
})

about.wxml

<!--pages/about/about.wxml-->
<text>{{text}}</text>
<view>
<view>{{array[0].msg}}</view>
</view>
<block wx:for="{{array}}">
<view>{{item.msg}}</view>
</block>

運行後切換到about頁面：

看這裏我們已經訪問了1 2 3，這裏做一下說明，訪問微信小程序的數據和我們平常的js數據差不多，數組下標是從0開始的，wxml文件中用到了block標籤，這個標籤是專門用來循環遍歷的，初始數據我們就講到這。

2. 生命週期回調函數

2.1 onLoad(Object query)

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

參數說明

名稱	類型	說明
query	Object	打開當前頁面路徑中的參數

2.2 onShow()

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

2.3 onReady()

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

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

2.4 onHide()

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

2.5 onUnload()

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

這幾個函數我們只要知道什麼時候觸發，和觸發的順序就行，我們來用一個實例來說明， about.js文件：

// pages/about/about.js
Page({

    /**
     * 頁面的初始數據
     */
    data: {
        text:"這是關於會員頁面",
       array: [
            {msg: 1 },
           { msg: 2 },
           { msg: 3 },
        ]
    },

    /**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function (options) {
        console.log("監聽頁面加載")
    },

    /**
     * 生命週期函數--監聽頁面初次渲染完成
     */
    onReady: function () {
        console.log("監聽頁面初次渲染完成")
    },

    /**
     * 生命週期函數--監聽頁面顯示
     */
    onShow: function () {
        console.log("監聽頁面顯示")
    },

    /**
     * 生命週期函數--監聽頁面隱藏
     */
    onHide: function () {
        console.log("監聽頁面隱藏")
    },

    /**
     * 生命週期函數--監聽頁面卸載
     */
    onUnload: function () {
        console.log("監聽頁面卸載")
    },

    /**
     * 頁面相關事件處理函數--監聽用戶下拉動作
     */
    onPullDownRefresh: function () {
        console.log("監聽用戶下拉動作")
    },

    /**
     * 頁面上拉觸底事件的處理函數
     */
    onReachBottom: function () {
        console.log("頁面上拉觸底事件的處理函數")
    },

    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function () {
        console.log("用戶點擊右上角分享")
    }
})

運行程序，不切換到about頁面

可以看出在其他頁面是不會觸發about頁面的生命週期回調函數的，我們再切換到about頁面

從這可以看出，執行順序是先加載頁面，然後在頁面顯示，然後再頁面初次渲染完成。也就是先執行onload，其次是onshow，最後是onready。

我們再切換到後臺

可以看出我們切換到後臺時觸發了onhide函數。而且發現頁面的onhide觸發時間先於app.js下的onhide

再次進入前臺

發現執行了onshow函數，並沒有觸發onLoad， onReady函數，這也驗證了官方說的這兩個函數一個頁面只會渲染一次。而且當我跳轉到其他頁面再次跳轉回來時，也不會觸發，只會觸發onhide和onshow函數

3. 頁面事件處理函數

3.1 onPullDownRefresh()

監聽用戶下拉刷新事件。

需要在app.json的window選項中或頁面配置中開啓enablePullDownRefresh。
可以通過wx.startPullDownRefresh觸發下拉刷新，調用後觸發下拉刷新動畫，效果與用戶手動下拉刷新一致。
當處理完數據刷新後，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。

我們先再在app.json下使能enablePullDownRefresh，

然後我們再想想怎麼測試這個函數。

在這裏我們提前學習setDate函數的使用：

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

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

參數說明

字段	類型	必填	描述	最低版本
data	Object	是	這次要改變的數據
callback	Function	否	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 ，否則這一項將不被設置並可能遺留一些潛在問題。

about.js文件

// pages/about/about.js
Page({

    /**
     * 頁面的初始數據
     */
    data: {
        text:"這是關於會員頁面",
       array: [
            {msg: 1 },
           { msg: 2 },
           { msg: 3 },
        ]
    },

    /**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function (options) {
        console.log("監聽頁面加載")
    },

    /**
     * 生命週期函數--監聽頁面初次渲染完成
     */
    onReady: function () {
        console.log("監聽頁面初次渲染完成")
    },

    /**
     * 生命週期函數--監聽頁面顯示
     */
    onShow: function () {
        console.log("監聽頁面顯示"),
        this.setData({
            text: "從後臺到前臺"
        })
    },

    /**
     * 生命週期函數--監聽頁面隱藏
     */
    onHide: function () {
        console.log("監聽頁面隱藏"),
        this.setData({
            text:"從前臺到後臺"
        })
    },

    /**
     * 生命週期函數--監聽頁面卸載
     */
    onUnload: function () {
        console.log("監聽頁面卸載")
    },

    /**
     * 頁面相關事件處理函數--監聽用戶下拉動作
     */
    onPullDownRefresh: function () {
        console.log("監聽用戶下拉動作")
    },

    /**
     * 頁面上拉觸底事件的處理函數
     */
    onReachBottom: function () {
        console.log("頁面上拉觸底事件的處理函數")
    },

    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function () {
        console.log("用戶點擊右上角分享")
    }
})

運行：

這裏發現個小問題，就是頁面初次加載的時候，就會調用onshow函數，所以一開始就顯示從後臺到前臺，沒事，我們改寫了text的值就行不

接着我們測試監聽用戶下拉刷新事件。當用戶下拉時顯示用戶下拉，

about.js代碼

// pages/about/about.js
Page({

    /**
     * 頁面的初始數據
     */
    data: {
        text:"這是關於會員頁面",
       array: [
            {msg: 1 },
           { msg: 2 },
           { msg: 3 },
        ]
    },

    /**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function (options) {
        console.log("監聽頁面加載")
    },

    /**
     * 生命週期函數--監聽頁面初次渲染完成
     */
    onReady: function () {
        console.log("監聽頁面初次渲染完成")
    },

    /**
     * 生命週期函數--監聽頁面顯示
     */
    onShow: function () {
        console.log("監聽頁面顯示")
    },

    /**
     * 生命週期函數--監聽頁面隱藏
     */
    onHide: function () {
        console.log("監聽頁面隱藏")
    },

    /**
     * 生命週期函數--監聽頁面卸載
     */
    onUnload: function () {
        console.log("監聽頁面卸載")
    },

    /**
     * 頁面相關事件處理函數--監聽用戶下拉動作
     */
    onPullDownRefresh: function () {
        console.log("監聽用戶下拉動作")
        this.setData({
            text: "用戶下拉"
        })
    },

    /**
     * 頁面上拉觸底事件的處理函數
     */
    onReachBottom: function () {
        console.log("頁面上拉觸底事件的處理函數")
    },

    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function () {
        console.log("用戶點擊右上角分享")
    }
})

運行並且切換到about頁面。

用鼠標在屏幕上按住左鍵下來時

成功顯示，

3.2 onReachBottom()

監聽用戶上拉觸底事件。

可以在app.json的window選項中或頁面配置中設置觸發距離onReachBottomDistance。
在觸發距離內滑動期間，本事件只會被觸發一次。

詳情博客：https://www.cnblogs.com/simba-lkj/p/6274232.html

3.3 onShareAppMessage(Object)

監聽用戶點擊頁面內轉發按鈕（<button> 組件 open-type="share"）或右上角菜單“轉發”按鈕的行爲，並自定義轉發內容。

注意：只有定義了此事件處理函數，右上角菜單纔會顯示“轉發”按鈕

Object 參數說明：

參數	類型	說明	最低版本
from	String	轉發事件來源。 `button`：頁面內轉發按鈕； `menu`：右上角轉發菜單	1.2.4
target	Object	如果 `from` 值是 `button`，則 `target` 是觸發這次轉發事件的 `button`，否則爲 `undefined`	1.2.4
webViewUrl	String	頁面中包含`<web-view>`組件時，返回當前`<web-view>`的url	1.6.4

此事件需要 return 一個 Object，用於自定義轉發內容，返回內容如下：

自定義轉發內容

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

官方的說明我就不闡述了，說的夠詳細了，我們用兩個方式觸發分享，一種是自定義一個open-type="share"的button，另一種是利用左上角的轉發功能，這種需要在page下定義了onShareAppMessage方法，纔會生效，不然會顯示轉發沒定義的錯誤。

接着我們設置轉發title=自定義轉發標題， imageUrl是一張圖片的功能，

about.wxml代碼

<!--pages/about/about.wxml-->
<text>{{text}}</text>
<button  open-type="share">分享</button>

about.js代碼：

// pages/about/about.js
Page({

    /**
     * 頁面的初始數據
     */
    data: {
        text:"這是關於會員頁面",
       array: [
            {msg: 1 },
           { msg: 2 },
           { msg: 3 },
        ]
    },

    /**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function (options) {
        console.log("監聽頁面加載")
    },

    /**
     * 生命週期函數--監聽頁面初次渲染完成
     */
    onReady: function () {
        console.log("監聽頁面初次渲染完成")
    },

    /**
     * 生命週期函數--監聽頁面顯示
     */
    onShow: function () {
        console.log("監聽頁面顯示")
    },

    /**
     * 生命週期函數--監聽頁面隱藏
     */
    onHide: function () {
        console.log("監聽頁面隱藏")
    },

    /**
     * 生命週期函數--監聽頁面卸載
     */
    onUnload: function () {
        console.log("監聽頁面卸載")
    },

    /**
     * 頁面相關事件處理函數--監聽用戶下拉動作
     */
    onPullDownRefresh: function () {
        console.log("監聽用戶下拉動作")
        this.setData({
            text: "用戶下拉"
        })
        wx.stopPullDownRefresh()
    },

    /**
     * 頁面相關事件處理函數--監聽用戶上拉觸底
     */
    onReachBottom: function () {
        console.log("監聽用戶上拉觸底")
        this.setData({
            text: "上拉觸底"
        })
    },
    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function (res) {
        console.log("用戶點擊右上角分享")
        console.log(res)
        return {
            title:"自定義轉發標題",
            path: "/pages/about/about",
            imageUrl:"/images/my.png"
        }
    }
})

測試，點擊分享button，出現

點擊左上角。。。的標誌，出現轉發

然後再轉發

一樣的效果。

3.4 onTabItemTap(Object)

基礎庫 1.9.0 開始支持，低版本需做兼容處理。

點擊 tab 時觸發

Object 參數說明：

參數	類型	說明	最低版本
index	String	被點擊tabItem的序號，從0開始	1.9.0
pagePath	String	被點擊tabItem的頁面路徑	1.9.0
text	String	被點擊tabItem的按鈕文字	1.9.0

about.js

// pages/about/about.js
Page({

    /**
     * 頁面的初始數據
     */
    data: {
        text:"這是關於會員頁面",
       array: [
            {msg: 1 },
           { msg: 2 },
           { msg: 3 },
        ]
    },

    /**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function (options) {
        console.log("監聽頁面加載")
    },

    /**
     * 生命週期函數--監聽頁面初次渲染完成
     */
    onReady: function () {
        console.log("監聽頁面初次渲染完成")
    },

    /**
     * 生命週期函數--監聽頁面顯示
     */
    onShow: function () {
        console.log("監聽頁面顯示")
    },

    /**
     * 生命週期函數--監聽頁面隱藏
     */
    onHide: function () {
        console.log("監聽頁面隱藏")
    },

    /**
     * 生命週期函數--監聽頁面卸載
     */
    onUnload: function () {
        console.log("監聽頁面卸載")
    },

    /**
     * 頁面相關事件處理函數--監聽用戶下拉動作
     */
    onPullDownRefresh: function () {
        console.log("監聽用戶下拉動作")
        this.setData({
            text: "用戶下拉"
        })
        wx.stopPullDownRefresh()
    },

    /**
     * 頁面相關事件處理函數--監聽用戶上拉觸底
     */
    onReachBottom: function () {
        console.log("監聽用戶上拉觸底")
        this.setData({
            text: "上拉觸底"
        })
    },
    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function (res) {
        console.log("用戶點擊右上角分享")
        console.log(res)
        return {
            title:"自定義轉發標題",
            path: "/pages/about/about",
            imageUrl:"/images/my.png"
        }
      },
      /**
     * 用戶點擊tab
     */
    onTabItemTap(item) {
        console.log(item.index)
        console.log(item.pagePath)
        console.log(item.text)
    }
})

運行，然後跳轉到關於會員頁面，出現

沒錯，是按照我們想要的效果顯示了。

4. 組件事件處理函數

Page 中還可以定義組件事件處理函數。在渲染層的組件中加入事件綁定，當事件被觸發時，就會執行 Page 中定義的事件處理函數。就是說你可以在視圖層定義的標籤綁定一個事件，當標籤觸發時，事件也同時觸發了，

我們舉個例子，在about頁面定義一個view標籤，當該標籤被點擊時觸發viewTap函數，該函數在後臺打印出view tap

about.wxml代碼：

<!--pages/about/about.wxml-->
<text>{{text}}</text>
<button  open-type="share">分享</button>
<view bindtap="viewTap">click me</view>

about.js代碼：

// pages/about/about.js
Page({

    /**
     * 頁面的初始數據
     */
    data: {
        text:"這是關於會員頁面",
       array: [
            {msg: 1 },
           { msg: 2 },
           { msg: 3 },
        ]
    },

    /**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function (options) {
        console.log("監聽頁面加載")
    },

    /**
     * 生命週期函數--監聽頁面初次渲染完成
     */
    onReady: function () {
        console.log("監聽頁面初次渲染完成")
    },

    /**
     * 生命週期函數--監聽頁面顯示
     */
    onShow: function () {
        console.log("監聽頁面顯示")
    },

    /**
     * 生命週期函數--監聽頁面隱藏
     */
    onHide: function () {
        console.log("監聽頁面隱藏")
    },

    /**
     * 生命週期函數--監聽頁面卸載
     */
    onUnload: function () {
        console.log("監聽頁面卸載")
    },

    /**
     * 頁面相關事件處理函數--監聽用戶下拉動作
     */
    onPullDownRefresh: function () {
        console.log("監聽用戶下拉動作")
        this.setData({
            text: "用戶下拉"
        })
        wx.stopPullDownRefresh()
    },

    /**
     * 頁面相關事件處理函數--監聽用戶上拉觸底
     */
    onReachBottom: function () {
        console.log("監聽用戶上拉觸底")
        this.setData({
            text: "上拉觸底"
        })
    },
    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function (res) {
        console.log("用戶點擊右上角分享")
        console.log(res)
        return {
            title:"自定義轉發標題",
            path: "/pages/about/about",
            imageUrl:"/images/my.png"
        }
      },
      /**
     * 用戶點擊tab
     */
    onTabItemTap(item) {
        console.log(item.index)
        console.log(item.pagePath)
        console.log(item.text)
    },
    viewTap(){
        console.log("view tap")
    }
})

5 Page.route

基礎庫 1.2.0 開始支持，低版本需做兼容處理。

到當前頁面的路徑，類型爲String

這個呢，其實就是顯示當前頁面的路徑，比如我點擊about頁面時顯示應該是pages/about/about 我們做一個小測試，在onshow中調用route方法，即爲this.route,

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

頁面運行後，點擊about頁面，輸出如下信息：

6. 生命週期

以下內容你不需要立馬完全弄明白，不過以後它會有幫助。

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

微信小程序自學（二）-- 邏輯層（註冊程序，場景值，註冊頁面）

邏輯層 App Service

一註冊程序

（1）App(Object)

1. onLaunch(Object)

2.onShow(Object)

3. onHide()

（2）getApp(Object)

二，場景值

Object wx.getLaunchOptionsSync()

三，註冊頁面

頁面 Page

Page(Object) 構造器

1. data

wx:for

2. 生命週期回調函數

3. 頁面事件處理函數

3.1 onPullDownRefresh()

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

3.2 onReachBottom()

3.3 onShareAppMessage(Object)

3.4 onTabItemTap(Object)

4. 組件事件處理函數

5 Page.route

6. 生命週期

c語言鉤子函數

微信小程序自學（二）-- 邏輯層（註冊程序，場景值，註冊頁面）

emqx增加用戶認證功能

使用Arduino開發ESP32——開發環境搭建

塔石E18D mqtt連接onenet

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

微信小程序自學（二）-- 邏輯層（註冊程序， 場景值， 註冊頁面）

邏輯層 App Service

一 註冊程序

（1）App(Object)

1. onLaunch(Object)

2.onShow(Object)

3. onHide()

（2）getApp(Object)

二， 場景值

Object wx.getLaunchOptionsSync()

三， 註冊頁面

頁面 Page

Page(Object) 構造器

1. data

wx:for

2. 生命週期回調函數

3. 頁面事件處理函數

3.1 onPullDownRefresh()

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

3.2 onReachBottom()

3.3 onShareAppMessage(Object)

3.4 onTabItemTap(Object)

4. 組件事件處理函數

5 Page.route

6. 生命週期

微信小程序自學（二）-- 邏輯層（註冊程序，場景值，註冊頁面）

一註冊程序

二，場景值

三，註冊頁面