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