資訊專欄INFORMATION COLUMN
摘要：做一款小程序，如果需要判斷用戶，當(dāng)然要獲取一些基本信息，例如頭像，昵稱，。所以本次案例就直接上代碼了。
做一款小程序，如果需要判斷用戶，當(dāng)然要獲取一些基本信息，例如頭像，昵稱，openid。所以本次案例就直接上代碼了。
小程序前端index.wxml
{{userInfo.nickName}} {{motto}}
index.js
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
motto: "Hello World",
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse("button.open-type.getUserInfo")
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在沒(méi)有 open-type=getUserInfo 版本的兼容處理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
//獲取openid
wx.login({
success: function (res) {
console.log(res.code)
//發(fā)送請(qǐng)求獲取openid
wx.request({
url: "你的域名/openid.php?code=code", //接口地址
data: { code: res.code },
header: {
"content-type": "application/json" //默認(rèn)值
},
success: function (res) {
//返回openid
console.log(res.data.openid)
//向數(shù)據(jù)庫(kù)注冊(cè)用戶，驗(yàn)證用戶
var that = this;
wx.request({
url: "你的域名/server.php?nickname=" + e.detail.userInfo.nickName + "&avatarUrl=" + e.detail.userInfo.avatarUrl + "&openid=" + res.data.openid,
data: {
},
header: {
"content-type": "application/json"
},
success: function (res) {
//打印用戶信息
console.log(res.data)
}
})
}
})
}
})
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true,
})
}
})
index.wxss
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
后端
openid.php
這是通過(guò)code獲取openid的后端
server.php
這是把用戶名、頭像、openid存到數(shù)據(jù)庫(kù)的后端
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/29728.html
摘要：微信小程序開(kāi)放了微信登錄的，無(wú)論是個(gè)人還是企業(yè)申請(qǐng)的小程序均可使用。開(kāi)始寫服務(wù)端，也很容易。 微信小程序開(kāi)放了微信登錄的api，無(wú)論是個(gè)人還是企業(yè)申請(qǐng)的小程序均可使用。 首先創(chuàng)建一個(gè)項(xiàng)目，把這些代碼都清空，我們自己寫！ showImg(https://segmentfault.com/img/bVbco8j?w=1022&h=860); 然后，開(kāi)始寫了！首先index.wxml，寫一個(gè)...
摘要：是什么是表示用戶在你的當(dāng)前應(yīng)用中的唯一標(biāo)識(shí)比如小程序，微信公眾號(hào)等，這些都算是一個(gè)應(yīng)用，如果你有多個(gè)應(yīng)用，同一個(gè)用戶的可能并不相同下圖是獲取的過(guò)程微信的官方文檔和時(shí)序圖小程序登錄的時(shí)序圖思路首先調(diào)用獲取登錄憑證調(diào)用接口前，需要把微信小程序的 OpenId是什么？openid 是表示用戶在你的當(dāng)前應(yīng)用中的唯一標(biāo)識(shí),比如小程序，微信公眾號(hào)等，這些都算是一個(gè)應(yīng)用，如果你有多個(gè)應(yīng)用，同一個(gè)用...
摘要：項(xiàng)目規(guī)劃本項(xiàng)目為基于微信手機(jī)應(yīng)用平臺(tái)的一款運(yùn)動(dòng)互動(dòng)型小程序，實(shí)現(xiàn)了用戶即時(shí)運(yùn)動(dòng)步數(shù)群內(nèi)與個(gè)人動(dòng)態(tài)的發(fā)布，小程序前端采用原生框架，后端采用基于的框架，數(shù)據(jù)庫(kù)采用，對(duì)象存儲(chǔ)采用七牛云，服務(wù)器采用阿里，域名采用認(rèn)證。 1. 項(xiàng)目規(guī)劃 本項(xiàng)目為基于微信手機(jī)應(yīng)用平臺(tái)的一款運(yùn)動(dòng)互動(dòng)型小程序，實(shí)現(xiàn)了用戶即時(shí)運(yùn)動(dòng)步數(shù)群內(nèi)PK與個(gè)人動(dòng)態(tài)的發(fā)布，小程序前端采用原生框架，后端采用基于Node的koa2框架，...
摘要：功能介紹對(duì)準(zhǔn)上面的小程序碼，掃一下，嘀地一聲，掃碼成功，打開(kāi)小程序，進(jìn)入小程序首頁(yè)。因?yàn)槭诸^上沒(méi)有可樂(lè)，所以我找來(lái)了一只非常專業(yè)的貓，扮演一瓶的可口可樂(lè)演示給大家看。 1.功能介紹 showImg(https://segmentfault.com/img/remote/1460000016260048?w=240&h=240); 對(duì)準(zhǔn)上面的小程序碼，掃一下，‘嘀’~地一聲，掃碼成功，打...
閱讀 3067·2021-11-16 11:45
閱讀 3598·2021-09-29 09:34
閱讀 713·2021-08-16 10:50
閱讀 1581·2019-08-30 15:52
閱讀 1972·2019-08-30 15:45
閱讀 868·2019-08-29 15:23
閱讀 1935·2019-08-26 13:51
閱讀 3308·2019-08-26 12:23
