一、登陸授權(quán)1.小程序的登錄機(jī)制傳統(tǒng)登陸（jwt 方式為例）用戶輸入用戶名密碼（密碼需要通過某些算法進(jìn)行加密），訪問登錄接口后端校驗(yàn)用戶名密碼，將用戶的這些信息加密成一個(gè) token 字符串，返回給前端前端將 token 保存下來（就本地化存儲咯，這里涉及一個(gè)面試題：
localstorage,sessionstorage,cookie 區(qū)別是啥？自己問問自己咯）前端每次發(fā)請求都帶著 token 發(fā)給后端，由后端去判斷是否合法登錄狀態(tài)（token 怎么傳，放在頭還是體里自己和后端商量哈）然后前端根據(jù)返回情況去判斷是否執(zhí)行什么操作小程序登錄授權(quán) 小程序沒有登錄框，就一個(gè)授權(quán)使用用戶信息，那處理過程是怎么樣的呢？簡單講步驟就是：
獲取用戶信息做授權(quán)----->調(diào)用 wx.login 接口------>拿到返回的唯一的身份認(rèn)證 code----->連 code 帶用戶信息傳給你的后端----->后面就跟上面一樣的了需要注意的是code 只能用一次，且五分鐘過期，過期就需要重新 wx.login()2.我們做登陸授權(quán)2-1、思考場景在小程序加載之前，判斷是否登錄過（就是有沒有token咯），如果沒有登陸過，就跳轉(zhuǎn)登錄界面（或者直接調(diào)用獲取用戶信息接口以及登錄接口2-2 登陸前的判斷在小程序加載之前，判斷是否登錄，并做對應(yīng)跳轉(zhuǎn)如何判斷加載之前？------>生命周期鉤子函數(shù)這時(shí)，我們打開項(xiàng)目中的 App.vue 會看到以下代碼：
onLaunch: function() {
// 這時(shí)app初始化完成 // 注意全局只觸發(fā)一次！??！ console.log('
App Launch'
) }
, onShow: function() {
// app從后臺切入前臺或者啟動 // 顯然這是判斷是否登陸過的好機(jī)會 console.log('
App Show'
) }
, onHide: function() {
// app從前臺進(jìn)入后臺 console.log('
App Hide'
) }
因此判斷方式 onShow: function() {
// 查一下都獲取了那些權(quán)限 wx.getSetting({
success(res) {
// 看看有沒有用戶信息，如果不存在，證明沒有登陸 if (!res.authSetting["scope.userInfo"]) {
// 關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的登錄頁面 wx.reLaunch({
url: "/pages/authorise/index" }
);
}
}
}
);
}
,小程序的頁面間跳轉(zhuǎn)相關(guān) apiwx.reLaunch();
// 關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個(gè)頁面 wx.switchTab();
// 跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面 wx.navigateTo();
// 跳轉(zhuǎn)到某個(gè)頁面 wx.navigateBack();
// 返回到上個(gè)頁面，需要跟navigateTo配合使用具體使用方式請參考 wx 文檔，實(shí)在看不下去就看 uniapp 的文檔，長得一個(gè)樣反正uniapp 的 api 封裝繼承了小程序的 api，基本上小程序的 api 前面的 wx 倆字改成 uni 都能用2-3、登錄操作話不多說，看代碼 微信的有些權(quán)限的 api 被廢棄了，現(xiàn)在只能通過 button 的 opentype 屬性來做一些權(quán)限操作了 以下代碼包括處理用戶拒絕授權(quán)后的二次引導(dǎo)授權(quán)登錄過程授權(quán)登錄 重新授權(quán) // 獲取到用戶信息后，調(diào)用登錄接口，如果被拒絕授權(quán)，就跳轉(zhuǎn)到設(shè)置頁面 mpGetUserInfo(result) {
const that = this;
// 查看是否授權(quán) wx.getSetting({
success(res) {
if (res.authSetting["scope.userInfo"]) {
// 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱 wx.getUserInfo({
success: function(res) {
that.userInfo = res.userInfo;
wx.login({
success: function(loginRes) {
that.userInfo.code = loginRes.code;
that.$http({
url: "登錄接口地址", data: that.userInfo, method: "POST" }
) .then(res => {
// 登錄失敗，提示錯(cuò)誤信息,重新打開授權(quán)頁面 if (判斷登錄失敗的條件) {
wx.redirectTo({
url: "" }
);
// 登陸成功 }
else {
// 保存登陸成功獲取的token wx.setStorageSync("token", res.data.userinfo.token);
// 保存返回的被處理過的用戶信息 uni.setStorageSync("login", res.data.userinfo);
// 登陸成功 跳轉(zhuǎn)到tab首頁 wx.switchTab({
url: "" }
);
}
}
);
}
}
);
}
}
);
}
else {
that.show = false;
}
}
}
);
}
, // 處理重新授權(quán)后的回調(diào)函數(shù) reauthorize(e) {
if (e.detail.authSetting["scope.userInfo"]) {
// 若二次授權(quán)成功，切換對話框的顯示按鈕 this.show = true;
}
}
這樣，就搞定咯，至于那個(gè)this.$http是啥請看第三篇（我還沒寫，咋地） 看完，點(diǎn)個(gè)贊唄。
繼續(xù)看 先吐槽一句，三天了，小哥哥還沒收到工資，好煩煩哦，咱一起摸魚吧，朋友們上回書說到this.$http發(fā)送請求，這是個(gè)啥？一、PC端vue項(xiàng)目中發(fā)請求傻瓜式步驟：
(使用axios)yarn add axios // npm 也行啦// 在cli項(xiàng)目中 // main.js中 import axios from '
axios'
// 配置請求的根路徑 // 這個(gè)baseURL如果配置了跨域代理，就把proxy里配的名字給它就成 axios.defaults.baseURL = '
/api'
// 配置請求攔截器 axios.interceptors.request.use(config => {
// 這里做各種預(yù)處理，加token啦，攔截權(quán)限訪問啦隨便 return config }
, (error) => {
return Promise.reject(error) }
) axios.interceptors.response.use(config => {
return config }
) // 掛載到vue上 Vue.prototype.$http = axios二、小程序的請求1、原生的做法：
wx.request({
url: '
test.php'
, //僅為示例，并非真實(shí)的接口地址 data: {
x: '
'
, y: '
'
}
, header: {
'
content-type'
: '
application/json'
// 默認(rèn)值 }
, success (res) {
console.log(res.data) }
}
)xue微有點(diǎn)難受，因?yàn)橛脩T了axios，支持promise，那我們就讓他支持promise唄2、封裝一個(gè)支持promise的小請求函數(shù)1、新建一個(gè)request.js文件，放到一個(gè)叫utils的文件夾下（我就不跟你說utils啥意思）2、導(dǎo)出一個(gè)默認(rèn)函數(shù)對象3、函數(shù)返回一個(gè)promise,里面一個(gè)resolve一個(gè)reject，不知道promise是啥請看小哥哥其他文章哦export default () => {
return new Promise((resolve,reject)=>{
}
) }
4、把微信的api封裝進(jìn)去（uniapp的api也行，如果有跨端需求，就直接封裝uni的requestapi，差不多長得）export default () => {
return new Promise((resolve,reject)=>{
wx.request({
url: '
test.php'
, //僅為示例，并非真實(shí)的接口地址 data: {
x: '
'
, y: '
'
}
, header: {
'
content-type'
: '
application/json'
// 默認(rèn)值 }
, success (res) {
console.log(res.data) }
}
) }
) }
5、繼續(xù)封裝，還沒法直接用現(xiàn)在// 把會改的參數(shù)抽出來，像URL啦，methods啦，data數(shù)據(jù)啦，通過形參的方式傳遞，把請求的成功或者失敗的結(jié)果弄出去 export default (params) => {
return new Promise((resolve,reject)=>{
wx.request({
...params header: {
'
content-type'
: '
application/json'
// 默認(rèn)值 }
, success (res) {
resolve(res) // 這里resolve出去的是res還是res.data看你們請求返回的數(shù)據(jù) }
fail: (err) => {
reject(err) }
, ) }
) }
6、axios有一個(gè)baseURL省勁兒，咱也得有export default (params) => {
const baseUrl = "寫你自己的地址的公共部分" return new Promise((resolve, reject) => {
wx.request({
...params, url: baseUrl + params.url, success: (res) => {
resolve(res.data) }
, fail: (err) => {
reject(err) }
}
);
}
) }
7、處理請求頭// 比如需要攜帶token請求的 // 比如需要設(shè)置一些字段類型 都在這里搞 export default (params) => {
const baseUrl = "https://www.jianbingkonggu.com/" let head = {
}
if (判斷需要加token請求的條件) {
head["token"] = uni.getStorageSync('
token'
);
}
head['
Content-Type'
] = '
application/x-www-form-urlencoded'
return new Promise((resolve, reject) => {
wx.request({
...params, url: baseUrl + params.url, header: head, success: (res) => {
resolve(res.data) }
, fail: (err) => {
reject(err) }
}
);
}
) }
完整版export default (params) => {
const baseUrl = "https://www.jianbingkonggu.com/" let head = {
}
if (!params.url.includes("/MiniProgramLogin")) {
head["token"] = uni.getStorageSync('
token'
);
}
head['
Content-Type'
] = '
application/x-www-form-urlencoded'
return new Promise((resolve, reject) => {
// 為了讓用戶看起來更舒服 // 弄一個(gè)加載中動畫 uni.showLoading({
title: '
加載中'
}
) wx.request({
...params, url: baseUrl + params.url, header: head, success: (res) => {
resolve(res.data) }
, fail: (err) => {
reject(err) }
, complete: () => {
// 請求完成 // 隱藏加載中的提示框 uni.hideLoading() }
}
);
}
) }
2、咋在項(xiàng)目中用？一句話，跟axios一樣引入掛載使用在main.js里import Request from '
./utils/request'
Vue.prototype.$http = Request然后就可以開開心心在vue單文件組件里this.$http(各種參數(shù)).then()的使用拉，流暢又爽我們還需要啥技能？用vue寫小程序不要懷疑，山東人就是喜歡倒裝句咋地好像沒啥了直接// 把之前的npm run dev:mp-weixin的黑窗口ctr+c退出哈先 // 然后執(zhí)行 npm run build:mp-weixin關(guān)閉當(dāng)先開發(fā)者工具里的項(xiàng)目，重新引入dist文件夾下面的build文件夾中的mp-weixin文件夾，這是我們打包好的文件，引入之后，自己測試一遍，沒問題后點(diǎn)擊開發(fā)者工具的右上角上傳按鈕，進(jìn)行上傳代碼，然后登錄微信小程序后臺把代碼提交審核就行啦。
以上，感謝大家，最后，關(guān)注一波我的公眾號唄，剛開始做，雖然，里面還沒放啥東西，求支持嘛。
推薦教程：
《微信小程序》以上就是你會用 vue 寫小程序嗎的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
vue，小程序本文轉(zhuǎn)載于：
掘金，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
微信小程序：
一個(gè)json幫你完成分享朋友圈圖片
下一篇：
ECMAScript 2020 的新特性相關(guān)文章相關(guān)視頻為什么要使用小程序如何設(shè)置小程序客服消息小程序跨頁面交互的作用和方法小程序怎樣在頁面?zhèn)鬟f對象數(shù)組？你會用 vue 寫小程序嗎（歐陽克）微信小程序與CMS后臺登錄小程序中心小程序的rpx長度單位詳解 [溫州做微信公眾號]