微信小程序?qū)W習(xí)筆記之登錄API與獲取用戶信息操作圖文詳解
本文實例講述了微信小程序?qū)W習(xí)筆記之登錄API與獲取用戶信息操作。分享給大家供大家參考,具體如下:
前面介紹了微信小程序跳轉(zhuǎn)頁面、傳遞參數(shù)獲得數(shù)據(jù),這里來分析一下登錄API與獲取用戶信息操作方法。
【小程序登錄】wx.login()
app.js:
App({ onLaunch: function () { // 登錄 wx.login({ success: function (res) { if (res.code) { //發(fā)起網(wǎng)絡(luò)請求 wx.request({ url: 'https://www.msllws.top/delcode.php', data: { code: res.code } }) } else { console.log('登錄失敗!' + res.errMsg) } } }); } })
初始化后得到了臨時登錄憑證code,使用wx.request()
發(fā)送code,請求后臺接口獲取【會話密鑰session_key】和【用戶唯一標識openid】,滿足UnionID下發(fā)條件時還可以獲得【用戶在開放平臺的唯一標識符unionid】。
后臺接收code的接口delcode.php:
<?php $code = $_GET['code']; $appid = 'wx1aebd07bdcf596b8'; $secret = '9ee8211007b81efd8c11d7d82d3b8658'; $url = 'https://api.weixin.qq.com/sns/jscode2session?appid='.$appid.'&secret='.$secret.'&js_code='.$code.'&grant_type=authorization_code'; $res = file_get_contents($url); //(省略業(yè)務(wù)邏輯:保存返回結(jié)果中的openid與用戶userid關(guān)聯(lián)......) echo $res;
請求返回結(jié)果:
(unionid需要小程序綁定已認證的微信開放平臺才可以獲得)
【獲取用戶信息】wx.getUserInfo()
首先借助button來授權(quán)登錄,login.wxml:
<open-data type="userAvatarUrl"></open-data> <open-data type="userNickName"></open-data> <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授權(quán)登錄</button> <view wx:else>請升級微信版本</view>
login.js如下:
Page({ data: { //判斷getUserInfo是否在當前版本可用 canIUse: wx.canIUse('button.open-type.getUserInfo') }, bindGetUserInfo(e) { console.log(e.detail.userInfo) } })
首次點擊button按鈕提示微信授權(quán),允許后調(diào)用bindGetUserInfo
函數(shù)打印獲得的用戶信息
此時修改login.js如下,使用wx.getSetting()
獲得用戶信息
(調(diào)用wx.getUserInfo()
之前需要調(diào)用wx.getSetting()獲取用戶當前的授權(quán)狀態(tài),返回結(jié)果中如果包含【scope.userInfo】,說明用戶已對用戶信息進行授權(quán),可以直接調(diào)用wx.getUserInfo()
獲取用戶信息)
Page({ data: { //判斷getUserInfo是否在當前版本可用 canIUse: wx.canIUse('button.open-type.getUserInfo') }, onLoad: function () { // 查看是否授權(quán) wx.getSetting({ success(res) { if (res.authSetting['scope.userInfo']) { // 已經(jīng)授權(quán),直接調(diào)用getUserInfo獲取用戶信息 wx.getUserInfo({ success: function (res) { console.log(res.userInfo) } }) } } }) }, bindGetUserInfo(e) { console.log(e.detail.userInfo) } })
重新編譯,頁面加載獲得同上用戶信息:
此時再點擊button按鈕不再提示授權(quán)確認信息。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
使用JavaScript實現(xiàn)一個小程序之99乘法表
這篇文章主要介紹了使用JavaScript實現(xiàn)一個小程序之99乘法表的相關(guān)資料,需要的朋友可以參考下2017-09-09JavaScript中apply與call的用法意義及區(qū)別說明
JavaScript中有一個call和apply方法,其作用基本相同,但也有略微的區(qū)別。2010-04-04JavaScript實現(xiàn)的斑馬線表格效果【隔行變色】
這篇文章主要介紹了JavaScript實現(xiàn)的斑馬線表格效果,通過javascript針對table表格的遍歷與運算實現(xiàn)隔行變色功能,非常簡單實用,需要的朋友可以參考下2017-09-09