1. 程式人生 > >EA&UML日拱一卒-0基礎學習微信小程式(9)-C++程式設計師眼中的app.js

EA&UML日拱一卒-0基礎學習微信小程式(9)-C++程式設計師眼中的app.js

終於到了說明真正的程式的部分。

作為程式設計師來講,似乎只有看到了能動的程式碼才會安心。但是這裡的程式是Javascript,C或者C++程式設計師看起來會比較陌生。

作者一邊查,一邊理解,一邊儘量詳細的說明。如果有說錯的地方,敬請指正。

物件字面量表示法

這部分的說明直接引用自【JavaScript高階程式設計,第五章】。

在Javascript中建立Object例項的方式有兩種。第一種是使用new操作符後跟Object建構函式,如下所示:

var person = new Object();

persion.name = "Nicholas";

persion.age = 29;

另一種方法是使用物件字面量表示法,物件字面量是物件定義的一種簡寫形式,目的在於簡化建立包含大量屬性的物件的過程。下面這個例子就使用了物件字面量語法定義了與前面那個例子中相同的person物件。

var person = {

    name : "Nicholas",

    age : 29

};

第一種C/C++程式設計師熟悉的方式,而物件字面量表示法就比較陌生了。當然這只是形式上的不同,內容是一樣的。稍加適應即可。

程式碼

//app.js
App({

    onLaunch: function() {
        //呼叫API從本地快取中獲取資料
        var logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)
    },

    getUserInfo: function(cb) {
        var that = this
        if (this.globalData.userInfo) {
            typeof cb == "function" && cb(this.globalData.userInfo)
         } else {
             //呼叫登入介面
             wx.getUserInfo({
                 withCredentials: false,
                 success: function(res) {
                     that.globalData.userInfo = res.userInfo
                     typeof cb == "function" && cb(that.globalData.userInfo)
                 }
             })
         }
    },
 
    globalData: {
        userInfo: null
    }
})

引數物件

這 段程式碼的最外層是App()函式,它用來註冊小程式。這個函式接受一個 object物件引數,它指定的是小程式的生命週期函式等。這個物件的邊界就是App第一個“(”後面的“{”到最後一個小括號前面的“}”。它的內部又 包含了onLaunch函式物件,getUserInfo函式物件和globalData資料物件。

需要注意的是,函式物件也好,資料物件也好,都只是被註冊到架構中,至於呼叫/使用的時機,相信另有安排。

onLauch函式物件

當小程式初始化完成時,會觸發 onLaunch(全域性只觸發一次),在本例中,onLaunch首先從資料快取中取得logs陣列,如果取得失敗則通過“|| [ ]“”建立新陣列。在陣列中增加當前日期(和時間)之後,將陣列重新儲存在資料快取中。

程式設計師不要自己呼叫這個函式。

getInfo函式物件

如果是第一次呼叫這個函式則首先呼叫登入介面取得使用者資訊,如果不是第一次呼叫,則直接返回已經取得的使用者資訊。

取 得使用者資訊的wx.getUserInfo函式也要稍微說明一下:它是由小程式架構提供的API,仍然是一個物件。這個引數物件又包含了 withCredentials屬性和另外的success函式物件。其中success函式會在getUserInfo成功時被呼叫以接收使用者資訊。

用C語言的觀點來講,這就是一個回撥函式。

globalData資料物件

簡單的定義了userinfo資料物件。

參考資料

物件字面量表示法

JavaScript高階程式設計,第五章

微信邏輯層

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/

小程式API

https://mp.weixin.qq.com/debug/wxadoc/dev/api/

寫在文章的最後

既然已經讀到這裡了,拜託大家再用一分鐘時間,將文章轉發到各位的朋友圈,微信群中。本公眾號的成長需要您的支援! 閱讀更多更新文章,請掃描下面二維碼,關注微信公眾號【面向物件思考】