從前面的學習我們了解到，函數(shù)可以操作（增刪改查）數(shù)據(jù)（包括字符串、數(shù)組、對象、Boolean等所有數(shù)據(jù)類型），組件擁有了屬性數(shù)據(jù)，也就擁有了被編程的能力，可見攜帶數(shù)據(jù)的重要性（id、class、style甚至點擊事件都是組件攜帶的數(shù)據(jù)，都可以用來編程）。這一節(jié)我們就拿深入了解，組件是如何攜帶數(shù)據(jù)的，事件對象數(shù)據(jù)的作用以及數(shù)據(jù)如何跨頁面渲染。

鏈接攜帶數(shù)據(jù)

URL鏈接的特殊字符

在日常生活中，我們經(jīng)常可以看到有的鏈接特別長，比如百度、京東、淘寶等搜索某個關(guān)鍵詞的鏈接，下面是使用百度搜索云開發(fā)時的鏈接：

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=云開發(fā)&rsv_pq=81ee270400007011&rsv_t=ed834wm24xdJRGRsfv7bxPKX%2FXGlLt6fqh%2BiB9x5g0EUQjyxdCDbTXHbSFE&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=20&rsv_sug1=19&rsv_sug7=100&rsv_sug2=0&inputT=5035&rsv_sug4=6227

以及之前在視頻組件里用到的視頻鏈接：

http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400

這些鏈接通常包括以下特殊字符，以及都有著基本相同的含義，通過這些特殊字符，鏈接就被塞進了很多數(shù)據(jù)信息，其中?、&、=是我們接下來關(guān)注的重點。

• / 分隔目錄和子目錄

• ? 分隔實際的URL和參數(shù)

• & URL中指定的參數(shù)間的分隔符

• = URL中指定的參數(shù)的值

• 同一個頁面的位置標識符，類似于頁面的書簽；

獲取URL鏈接的數(shù)據(jù)

使用開發(fā)者工具，新建一個lifecyle的頁面，以及在home頁面新建一個二級頁面detail（也就是在pages配置項新建一個pages/home/detail/detail，以及注意將lifecycle設(shè)置為首頁）然后在lifecyle.wxml里輸入以下代碼，這里的url也通過?、&、=添加了很多數(shù)據(jù)：

<navigator id="detailshow" url="./../home/detail/detail?id=lesson&uid=tcb&key=tap&ENV=weapp&frompage=lifecycle" class="item-link">點擊鏈接看控制臺</navigator>

點擊鏈接，發(fā)現(xiàn)頁面仍然能夠跳轉(zhuǎn)到detail頁面，給url所添加的數(shù)據(jù)并不會改變頁面的路徑，畢竟頁面的路徑通常是由/來控制的。

那鏈接攜帶的數(shù)據(jù)的作用是什么呢？大家發(fā)現(xiàn)沒，本來點擊的是lifecycle里的鏈接，但是卻跳轉(zhuǎn)到了detail，如果鏈接攜帶的數(shù)據(jù)一直都在，只要我們可以在detail里把鏈接的數(shù)據(jù)給獲取到，那我們是不是實現(xiàn)了數(shù)據(jù)的跨頁面呢？

獲取url參數(shù)的生命周期函數(shù)onload

onload是Page頁面的生命周期函數(shù)，當頁面加載時觸發(fā)。一個頁面只會調(diào)用一次，可以在 onLoad 函數(shù)的參數(shù)中獲取打開當前頁面路徑中的參數(shù)。

使用開發(fā)者工具，在detail.js的onload函數(shù)里添加console.log，把onload函數(shù)的參數(shù)打印出來：

onLoad: function (options) {


  console.log(options)


},

再次點擊lifecycle.wxml頁面的鏈接，會跳轉(zhuǎn)到detail，頁面加載時會觸發(fā)生命周期回調(diào)函數(shù)onload，會打印函數(shù)里的參數(shù)options，我們可以看看控制臺的打印信息。

{id: "lesson", uid: "tcb", key: "tap", ENV: "weapp", frompage: "lifecycle"}

相信大家會這樣的數(shù)據(jù)類型非常熟悉，它就是一個對象Object，我們可以通過點表示法，獲取到對象里具體的屬性，比如options.id就能顯示我們在lifecycle點擊的組件的id。

數(shù)據(jù)跨頁面

回到之前列表渲染章節(jié)的電影列表頁面（你可以把之前關(guān)于電影列表的wxml和wxsss以及數(shù)據(jù)代碼復制粘貼到lifecycle），給Navigator組件添加一些信息，找到下面的代碼：

<navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

將其修改為如下，也就是添加id={{index}}，將每部電影的id、name、img、desc等信息寫進鏈接

<navigator url="./../home/detail/detail?id={{index}}&name={{movies.name}}&img={{movies.img}}&desc={{movies.desc}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

編譯之后，在lifecycle頁面點擊其中一部電影，我們發(fā)現(xiàn)所有鏈接還是會跳轉(zhuǎn)到detail，但是控制臺輸出的信息卻不一樣，點擊哪一部電影，就會在控制臺輸出哪部電影的信息，數(shù)據(jù)不僅實現(xiàn)了跨頁面，還實現(xiàn)了點哪個顯示哪個的區(qū)分。

跨頁面數(shù)據(jù)渲染

當然我們也可以繼續(xù)把數(shù)據(jù)使用setData渲染到detail頁面，為方便我們僅渲染圖片信息，在detail.wxml里輸入：

<image mode="widthFix" src="{{detail.img}}" sytle="height:auto"></image>

在detail.js的data里添加一個detail對象，detail對象三個屬性用來接收setData的數(shù)據(jù)，所以可以為空值：

    detail:{


      name:"",


      img:"",


      desc:""


    },

然后在onload生命周期函數(shù)里將options的值賦值給detail

onLoad: function (options) {


  console.log(options)


  this.setData({


    detail: options,


  }


  )


},

這樣，我們在lifecycle里點擊哪部電影，哪部電影的海報就在detai頁里顯示啦。

不過使用鏈接url傳遞參數(shù)有字節(jié)限制以及只能在跨頁面中使用，但是可以用來傳遞比如頁面鏈接來源，可以追蹤用戶來自于什么設(shè)備、什么App、通過什么方式以及來自哪個朋友的邀請鏈接；還可以用于一些網(wǎng)頁鏈接的API必備的id、key等。跨多個頁面以及傳遞更多參數(shù)、數(shù)據(jù)等，可以使用公共數(shù)據(jù)存儲app.globalData（本節(jié)會介紹）、數(shù)據(jù)緩存（后面章節(jié)會介紹）、數(shù)據(jù)庫（云開發(fā)部分會介紹）以及新增的頁面間通信接口getOpenerEventChannel（這里不多介紹）

組件攜帶數(shù)據(jù)dataset

組件有公有屬性和私有屬性，這些屬性都是數(shù)據(jù)，事件處理函數(shù)可以修改這些屬性，從而讓組件有豐富的表現(xiàn)形式。不僅如此，在組件節(jié)點中還可以附加一些自定義數(shù)據(jù)。在事件中可以獲取這些自定義的節(jié)點數(shù)據(jù)，用于事件的邏輯處理，從而讓組件變成相當復雜且強大的編程對象。

使用JavaScript代替Navigator組件

使用開發(fā)者工具在lifecycle.wxml里輸入以下代碼，

<image id="imageclick" src="https://img13.360buyimg.com/n7/jfs/t1/842/9/3723/77573/5b997bedE4f438e5b/ccd1077b985c7150.jpg" rel="external nofollow"  rel="external nofollow"  mode="widthFix" style="width:200rpx" bindtap="clickImage"></image>

然后我們在lifecycle.js里添加如下代碼，在上一節(jié)我們說過當點擊組件觸發(fā)事件時，邏輯層綁定該事件的處理函數(shù)會收到一個事件對象，我們?nèi)匀话堰@個事件對象打印出來：

  clickImage:function(event){


    console.log('我是button',event)


    wx.navigateTo({


      url: "/pages/home/detail/detail?id=imageclick&uid=tcb&key=tap&ENV=weapp&frompage=lifecycle"


    })


  },

當我們點擊lifecycle頁面的圖片時，clickImage會收到一個事件對象，打印出來的結(jié)果里包含著target和currentTarget兩個屬性，currentTarget指向事件所綁定的元素，而target始終指向事件發(fā)生時的元素。由于這個案例事件綁定的元素和事件發(fā)生時的元素都是imageclick，所以它們的值相同，它們里面都包含了當前組件的id，以及dataset，那這個dataset是啥呢？

值得強調(diào)的是很多童鞋以為只有點擊Navigator組件、button組件才能進行鏈接跳轉(zhuǎn)，這是思維定勢的誤區(qū)，通過bindtap，組件被賦予了一定的編程能力，盡管沒有url屬性，使用wx.navigateTo也能具備這種能力。

自定義屬性dataset

我們給上面的image加一個父級組件，這里的data-sku、data-spu和data-pid的值以及圖片使用的都是京東iphone的數(shù)據(jù)。這些自定義數(shù)據(jù)以 data- 開頭，多個單詞由連字符 – 連接。

<view id="viewclick" style="background-color: red;padding:20px;" data-sku="100000177760" data-spu="100000177756" data-pid="100000177756" data-toggle="Apple iPhone XR" data-jd-color="Red" data-productBrand="Apple" bindtap="clickView">


  <image id="imageclick" src="https://img13.360buyimg.com/n7/jfs/t1/842/9/3723/77573/5b997bedE4f438e5b/ccd1077b985c7150.jpg" rel="external nofollow"  rel="external nofollow"  mode="widthFix" style="width:200rpx" bindtap="clickImage">點擊button</image>


</view>

然后再在lifecycle.js里添加事件處理函數(shù)clickView，

  clickView: function (event) {


    console.log('我是view',event)


    wx.navigateTo({


      url:"/pages/home/detail/detail?id=viewclick&uid=tcb&key=tap&ENV=weapp&frompage=lifecycle"


    })


  },

當我們點擊紅色空白處（非圖片區(qū)域）時，只會觸發(fā)clickView，target與currentTarget的值相同。而當我們點擊圖片時，就會觸發(fā)兩個事件處理函數(shù)。

我們點擊的是圖片image組件，卻分別觸發(fā)了綁定在image組件以及image的父級（上一級）組件view的事件處理函數(shù)，我們稱這為事件冒泡。

注意這時clickView事件對象的currentTarget和target的值就不相同了。在點擊圖片的情況下只有在clickView事件對象的currentTarget里看到dataset獲取到了view組件的自定義數(shù)據(jù)。

同時從detail頁面的打?。ㄗ⒁鈨蓚€事件的鏈接有id的值不同）可以看出，點擊圖片，跳轉(zhuǎn)到的是圖片綁定的事件指定的頁面，頁面的id為imageclick。

我們再來觀察dataset的值，發(fā)現(xiàn)jdColor以及productbrand，這是因為dataset會把連字符寫法會轉(zhuǎn)換成駝峰寫法，而大寫字符會自動轉(zhuǎn)成小寫字符。data-jd-color變成了jdColor，而data-productBrand轉(zhuǎn)成了productbrand。也就是說我們點擊組件，從事件對象的dataset里，我們可以通過event.currentTarget.dataset來獲取組件的自定義數(shù)據(jù)。

點擊組件顯示當前組件其他數(shù)據(jù)

通過事件對象我們不僅可以明確知道點擊了什么組件，而且還可以獲取當前組件的自定義數(shù)據(jù)。比如上面案例中我們可以輕松獲取到京東該商品的pid，從而跳轉(zhuǎn)到該商品的詳情頁（https://item.jd.com/京東商品的pid.html），我們可以在clickView事件處理函數(shù)里添加：

let jdpid=event.currentTarget.dataset.pid


let pidurl = "https://item.jd.com/" + jdpid + ".html"


console.log(pidurl)

這樣鏈接該商品的詳情頁就被打印出來啦~（小程序不支持navigateTo的外鏈跳轉(zhuǎn)）。如果我們要獲取當前組件的其他相關(guān)數(shù)據(jù)，使用事件對象非常方便，比如點擊小圖顯示大圖，toggle彈出其他內(nèi)容等等。

小程序也支持給data-屬性添加wxss樣式，比如我們可以給data-pid添加樣式， view[data-pid]{margin:30px;}，data-屬性既可以類似于選擇器一樣的存在，也可以對它進行編程，是不是很強大？

小程序和頁面的生命周期

App()函數(shù)注冊小程序，Page()函數(shù)注冊小程序中的一個頁面，他們都接受的是對象Object類型的參數(shù)，包含一些生命周期函數(shù)和事件處理函數(shù)。App() 必須在 app.js 中調(diào)用，必須調(diào)用且只能調(diào)用一次。開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)變量到 Object參數(shù)中，用 this 可以訪問。

小程序構(gòu)造器：App(Object object)

頁面構(gòu)造器：Page(Object object)

小任務(wù)：為什么我們不能在App()和Page()里不能直接用等號=給變量賦值？你明白了嗎？注意函數(shù)語句與對象屬性與方法在寫法上的不同。

打印日志了解生命周期

對小程序和頁面的生命周期，我們可以通過打印日志的方式來了解生命周期函數(shù)具體的執(zhí)行順序和情況，使用開發(fā)者工具在app.js里給onLaunch、onShow、onHide添加一些打印日志。

  onLaunch(opts) {


    console.log('onLaunch監(jiān)聽小程序初始化。',opts)


  },


  onShow(opts) {


    console.log('onShow監(jiān)聽小程序啟動或切前臺',opts)


  },


  onHide() {


    console.log('onHide監(jiān)聽小程序切后臺')


  },

想必大家已經(jīng)注意，有的參數(shù)寫的options，有的寫的卻是opts；前面事件對象有的寫的是event，有的則用的是e，這個參數(shù)都是可以自定義的哦

以及在lifecylce.js的js里添加

  onLoad: function(options) {


    console.log("onLoad監(jiān)聽頁面加載",options)


  },


  onReady: function() {


    console.log("onReady監(jiān)聽頁面初次渲染完成")


  },


  onShow: function() {


    console.log("onShow監(jiān)聽頁面顯示")


  },


  onHide: function() {


    console.log("onHide監(jiān)聽頁面隱藏")


  },


  onUnload: function() {


    console.log("onUnload監(jiān)聽頁面卸載")


  },

通過在模擬器執(zhí)行各種動作，比如編譯、點擊轉(zhuǎn)發(fā)按鈕、點擊小程序轉(zhuǎn)發(fā)按鈕旁的關(guān)閉按鈕（并沒有關(guān)閉）、頁面切換等來了解生命周期函數(shù)的執(zhí)行順序（比如頁面生命周期），對切前臺和切后臺、頁面的加載、渲染、顯示、隱藏、卸載有一定的了解。

前面我們已經(jīng)了解到，通過點擊事件可以觸發(fā)事件處理函數(shù)，也就是需要用戶來點擊某個組件才能觸發(fā)；這里頁面的生命周期函數(shù)也可以觸發(fā)事件處理函數(shù)，它不需要用戶點擊組件，只需要用戶打開小程序、打開某個頁面，把小程序切后臺等情況時就能觸發(fā)里面的函數(shù)。

小程序打開場景值

在 App 的 onLaunch 和 onShow打印的對象里有一個scene為1001，這個是場景值。場景值用來描述用戶進入小程序的路徑方式。用戶進入你的小程序的方式有很多，比如有的是掃描二維碼、有的是長按圖片識別二維碼，有的是通過微信群進入的小程序，有的是朋友單聊進入的小程序，有的是通過公眾號進入的小程序等等，這些就是場景值，而具體的場景值，可以看技術(shù)文檔，場景值對產(chǎn)品、運營來說非常重要。

技術(shù)文檔：場景值列表

onLaunch與onShow

onLaunch是監(jiān)聽小程序的初始化，初始化完成時觸發(fā)，全局只會觸發(fā)一次，所以在這里我們可以用來執(zhí)行獲取用戶登錄信息的函數(shù)等一些非常核心的數(shù)據(jù)，如果onLaunch的函數(shù)過多，會影響小程序的啟動速度。

onShow是在小程序啟動，或從后臺進入前臺顯示時觸發(fā)，也就是它會觸發(fā)很多次，在這里就不大適合放獲取用戶登錄信息的函數(shù)啦。這兩者的區(qū)別要注意。

用戶登錄與信息獲取

小程序用戶登錄和獲取用戶信息相對來說比較復雜，為了能夠讓大家可以更加直觀的結(jié)合我們之前的知識來一步步探究到底是怎么一回事，建議大家重新建一個不使用云服務(wù)的小程序項目。

了解wx.login、wx.getSetting

使用開發(fā)者工具將app.js的代碼修改為如下（可以把之前的全部刪掉或注釋掉，把下面代碼復制粘貼過去）。了解一個函數(shù)一個API，實戰(zhàn)方面從打印日志開始，而理論方面從技術(shù)文檔開始。

App({


  onLaunch: function () {


    wx.login({


      success(res){


        console.log('wx.login得到的數(shù)據(jù)',res)


      }


    })



 


    wx.getSetting({


      success(res){


        console.log('wx.getSetting得到的數(shù)據(jù)',res)


      }


    })


  },



 


  globalData: {


    userInfo: null


  }


})

模板小程序用的是箭頭函數(shù)的寫法，大家可以結(jié)合之前關(guān)于箭頭函數(shù)的介紹、模板小程序的代碼和上面的寫法對照來學習。

從控制臺可以看到wx.login會得到errMsg和code，這個code是用戶的登錄憑證。而wx.getSetting則會得到errMsg和用戶當前的權(quán)限設(shè)置authSetting，包含是否允許獲取用戶信息，是否允許獲取用戶位置，是否允許使用手機相冊等權(quán)限。我們可以根據(jù)打印的結(jié)果結(jié)合技術(shù)文檔來深入理解。

技術(shù)文檔：獲取用戶登錄憑證wx.login、獲取用戶當前權(quán)限設(shè)置wx.getSetting

如果要讓小程序和自己的服務(wù)器賬號打通，僅僅獲取用戶登錄憑證是不夠的，需要將這個code以及你的小程序appid和appSecret傳回到你的開發(fā)服務(wù)器，然后在自己的服務(wù)器上調(diào)用auth.code2session接口，得到用戶的openid和session_key。由于openid是當前用戶的唯一標識，可以用來判斷該用戶是否已經(jīng)在自己的服務(wù)器上注冊過，如果注冊過，則根據(jù)openid生成自定義登錄態(tài)并返回給小程序，整個過程非常復雜。而由于云開發(fā)與微信登錄鑒權(quán)無縫整合，這些內(nèi)容都不會涉及，所以這里不多介紹。

獲取用戶信息wx.getUserInfo

我們要獲取用戶信息，首先需要判斷用戶是否允許，可以從authSetting對象里看scope.userInfo屬性是否為true，如果為true，那我們可以調(diào)用wx.getUserInfo()接口來獲取用戶信息。

使用開發(fā)者工具給上面的wx.getSetting()函數(shù)添加內(nèi)容，最終代碼如下：

    wx.getSetting({


      success(res){


        console.log('wx.getSetting得到的數(shù)據(jù)',res)


        if (res.authSetting["scope.userInfo"]){


          wx.getUserInfo({


            success(res){


              console.log("wx.getUserInfo得到的數(shù)據(jù)",res)


            }


          })


        }


      }


    })

由于scope.userInfo是一個屬性名，無法使用點表示法res.authSetting.scope.userInfo來獲取到它的值（會誤認為是authSetting屬性下的scope屬性的usrInfo屬性值），這里用到的是獲取對象屬性的另外一種表示方法，叫括號表示法，也就是用中括號[]圍住屬性名，屬性名需用單引號或雙引號圍住。

在控制臺console我們可以看到userInfo對象里包含著當前登錄用戶的昵稱、頭像、性別等信息。

globalData

但是這個數(shù)據(jù)是在app.js里，和我們之前接觸到的數(shù)據(jù)都在頁面的js文件里有不同。而且這個用戶信息的數(shù)據(jù)是所有頁面都通用的，放在app.js里公用是應(yīng)該的，但是我們要怎么才能調(diào)用到這個數(shù)據(jù)呢？

globalData對象通常用來存放整個小程序都會使用到的數(shù)據(jù)，比如我們可以把用戶信息賦值給globalData的任意自定義屬性。模板小程序已經(jīng)聲明了一個userInfo屬性，我們也可以自定義其他屬性名，比如（后面我們會用到）

  tcbData:{


    title:"云開發(fā)訓練營",


    year:2019,


    company:"騰訊Tencent"


  },

在上面的wx.getUserInfo的success回調(diào)函數(shù)里將獲取到的userInfo對象賦值給globalData對象的userInfo屬性。

wx.getUserInfo({


  success(res){


    console.log("wx.getUserInfo得到的數(shù)據(jù)",res)


    this.globalData.userInfo = res.userInfo


  }


})

但是會提示 Cannot read property 'globalData' of undefined;報錯，但是模板小程序也是這樣寫代碼的為什么卻沒有報錯？這是因為箭頭函數(shù)的this與非箭頭函數(shù)this指向有不同。

that與this

this的指向情況非常復雜，盡管哪個對象調(diào)用函數(shù)，函數(shù)里面的this就指向哪個對象，說起來非常簡單，但是場景太多，大家在開發(fā)時不必強行理解，死記硬背，把this打印出來即可。我們可以將回調(diào)函數(shù)success的this打印出來，

success(res){


  console.log('this是啥',this)


}

結(jié)果是this undefined，并沒有定義，和我們預計的是Page()函數(shù)對象并不一致，給它的this.globalData賦值當然會報錯。

解決方法有兩種，一種是模板小程序使用箭頭函數(shù)，箭頭函數(shù)繼承的是外部對象的this，我們可以把代碼wx.getSetting()里的success回調(diào)函數(shù)的寫法都改為箭頭函數(shù)的寫法（這里有兩個，只改一個行不行？試試看），這時我們可以再來打印this，看看是什么情況。

在控制臺我們可以看到改為箭頭函數(shù)之后的this的結(jié)果為一個pe對象，里面包含著Page()對象的生命周期函數(shù)和屬性。

第二種方法是使用that指代，在wx.getSetting()函數(shù)的前面寫一行代碼：

let that=this


wx.getSetting({............}) //為了便于你找位置

然后把wx.getUserInfo的success回調(diào)函數(shù)的改為如下：

wx.getUserInfo({


  success: res =>{


    console.log('that是啥',that)


    console.log("wx.getUserInfo得到的數(shù)據(jù)",res)


    that.globalData.userInfo = res.userInfo


  }


})

由于情況復雜，this的指向經(jīng)常會變，但是在this的指向還是Page()對象時，我們就把this賦值給that，這樣就不會因為this指向變更而出現(xiàn)undefined了。

getApp()

那我們?nèi)绾卧陧撁娴膉s里調(diào)用globalData呢，這個時候就需要用到getApp()函數(shù)啦。

技術(shù)文檔：getApp()

使用開發(fā)者工具新建一個user頁面，然后在user.js的Page()函數(shù)前面添加如下代碼：

let app = getApp()


console.log('user頁面打印的app', app)


console.log('user頁面打印的globalData', app.globalData.userInfo)


console.log('user頁面打印的tcbData',app.tcbData.eventInfo)

這樣我們就能獲取app.js里的globalData和自定義的屬性了。

這里還會有一個問題，就是盡管我們已經(jīng)獲取到了globalData，我們也能在globalData.userInfo的打印日志里看到用戶的信息，但是當我們想獲取里面的值時，還是會報錯，這是因為 wx.getUserInfo是異步獲取的信息，這里涉及到的異步，我們之后會詳細介紹。

通過button來獲取用戶信息

在我們使用wx.getUserInfo的方式來獲取用戶信息時，控制臺會報錯： 獲取 wx.getUserInfo 接口后續(xù)將不再出現(xiàn)授權(quán)彈窗，請注意升級。也就是小程序官方已經(jīng)不建議開發(fā)者用wx.getUserInfo來獲取用戶信息了，而是建議通過button的方式來獲取，對用戶的體驗更好，也就是用戶只有點擊了按鈕，用戶信息才會被獲取。

使用開發(fā)者工具在user.wxml里輸入以下代碼，這是一個button組件，要獲取到用戶信息，有兩個必備條件，一是 open-type="getUserInfo"，必須是這個值；二是綁定事件處理函數(shù)的屬性名為bindgetuserinfo（類似于bindtap，但是屬性名必須為bindgetuserinfo，至于事件處理函數(shù)的名稱可以自定義）

<button open-type="getUserInfo" bindgetuserinfo="getUserInfomation"> 點擊獲取用戶信息 </button>

這里的getUserInfomation和之前點擊事件的事件處理函數(shù)是一致的，點擊組件觸發(fā)getUserInfomation，仍然會收到事件對象，我們把它打印出來，在user.js里添加以下代碼：

  getUserInfomation: function (event) {


    console.log('getUserInfomation打印的事件對象',event)


  },

當我們點擊“點擊獲取用戶信息”的button按鈕后，在控制臺可以查看到getUserInfomation打印的事件對象，事件對象里有個detail屬性，里面就有userInfo的數(shù)據(jù)，這個具體如何調(diào)用，詳細大家結(jié)合之前學過的知識應(yīng)該有所了解。

首先在user.js的data里初始化一個userInfo對象，用來接收數(shù)據(jù)：

  data: {


    userInfo:{}


  },

然后在事件處理函數(shù)getUserInfomation獲取到的userInfo通過this.setData賦值給它，也就是getUserInfomation的函數(shù)為

  getUserInfomation: function (event) {


    console.log('getUserInfomation打印的事件對象',event)


    this.setData({ 


      userInfo: event.detail.userInfo, 


      })


  },

這時data里的userInfo就有用戶信息了，我們可以在user.wxml添加以下代碼來將數(shù)據(jù)渲染出來。

<view>{{userInfo.nickName}}</view>


<view>{{userInfo.country}}</view>


<image mode="widthFix" style="width:64px;height:64px" src="{{userInfo.avatarUrl}}"></image>

當我們再次點擊“點擊獲取用戶信息”的button按鈕后，數(shù)據(jù)就渲染出來了。

將用戶信息寫進app.js

這種方式只能在user頁面才能獲取到用戶信息，限制非常大，那我們應(yīng)該怎么做呢？我們要把獲取到的用戶信息寫到app.js成為頁面的公共信息，以后可以跨頁面只需在user頁面點擊一次按鈕即可。

在getUserInfomation將獲取到的用戶信息傳給globalData的userInfo屬性：

  getUserInfomation: function (event) {


    console.log('getUserInfomation打印的事件對象',event)


    app.globalData.userInfo = event.detail.userInfo


    this.setData({ 


      userInfo: event.detail.userInfo, 


      })


  },

關(guān)于用戶登錄以及信息獲取，這里我們只是梳理了一些比較核心的知識點，還有一些大家可以去參考模板小程序里的代碼，這里有一套相對比較完整的案例。更具有實際開發(fā)意義的用戶登錄，之后會在云開發(fā)部分介紹。

獲取用戶信息還有一種方式，就是通過組件<open-data&來展示，由于比較簡單，這里就不多介紹啦。