柚子快報激活碼778899分享：web學(xué)習(xí)筆記（八十）
柚子快報激活碼778899分享：web學(xué)習(xí)筆記（八十）
目錄
1.小程序?qū)崿F(xiàn)微信一鍵登錄
2. 小程序的授權(quán)流程
?3.小程序配置vant庫
4.小程序配置分包?
5.小程序配置獨(dú)立分包
6.小程序分包預(yù)下載
1.小程序?qū)崿F(xiàn)微信一鍵登錄
要先實現(xiàn)小程序一鍵登錄首先我們需要給按鈕設(shè)置一個綁定事件，然后在綁定事件內(nèi)部通過wx.login來獲取登錄憑證code,然后將將code+appid+secret傳遞到開發(fā)者服務(wù)器，進(jìn)行登錄操作,發(fā)送post請求，此時就需要后端進(jìn)行接口校驗code和appid是否正確，是否配對，如果校驗成功，后端回利用openid和session_key加密生成token登錄態(tài)，返回給小程序。然后前端再將token進(jìn)行持久化存儲。
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {},
login() {
// 1.通過wx.login獲取登陸憑證code
wx.login({
success: (res) => {
console.log(res.code);
//2. 將code+appid+secret傳遞到開發(fā)者服務(wù)器，進(jìn)行登錄操作,發(fā)送post請求
// 3.開發(fā)者服務(wù)器利用jscode2session接口校驗code和appid是否正確，是否配對，如果校驗成功，后端回利用openid和session_key加密生成token登錄態(tài)，返回給小程序
// 4.小程序端將token存儲起來，一鍵登錄就完成了。此后發(fā)送請求需在請求頭中攜帶token,讓開發(fā)者服務(wù)器驗證token是否正確，正確就返回數(shù)據(jù)。
wx.request({
url: "http://localhost:3000/login",
method: "post",
data: {
code: res.code,
},
success: (data) => {
console.log(data.data.token);
// 做持久化存儲
wx.setStorageSync("token", data.data.token);
// 向后端發(fā)送請求，獲取購物車列表
wx.request({
url: "http://localhost:3000/carts",
header: {
auth: wx.getStorageSync("token"),
},
success: ({ data }) => {
console.log("---", data);
},
});
},
});
},
});
},
});
2. 小程序的授權(quán)流程
當(dāng)我們的小程序需要定位或者是麥克風(fēng)權(quán)限的時候是需要向用戶發(fā)起授權(quán)請求的，。然后發(fā)起彈窗詢問用戶是否同意授權(quán)小程序該權(quán)限，如果用戶之前已經(jīng)同意授權(quán)則不會出現(xiàn)彈窗。在微信開發(fā)文檔中有很多權(quán)限的接口，下面編寫的是獲取定位權(quán)限的實例，可以按照這個思路自行編寫其他權(quán)限的相關(guān)代碼。
getAddress() {
// 獲取用戶精確位置
// 1.先查詢是否已授權(quán)
wx.getSetting({
success(res) {
console.log(res.authSetting);
if (!res.authSetting["scope.userLocation"]) {
// 2.調(diào)用接口進(jìn)行授權(quán) wx.authorize
wx.authorize({
scope: "scope.userLocation",
success() {
console.log("用戶同意授權(quán)");
wx.getLocation();
},
fail() {
console.log("用戶拒絕授權(quán)");
// 3.如果用戶拒絕授權(quán)，需要通過wx.openSetting再次進(jìn)行授權(quán)，此時進(jìn)入授權(quán)頁面
wx.showModal({
title: "提示",
content: "定位功能必須開啟定位權(quán)限",
success: () => {
wx.openSetting({
success(res) {
console.log("開啟成功", res.authSetting);
},
});
},
});
},
});
} else {
}
},
});
},
?3.小程序配置vant庫
（1）在終端輸入?npm i @vant/weapp命令
（2）把a(bǔ)pp.js文件中的"style":"v2"去除(這句話是小程序用來渲染頁面用到，小程序的新版基礎(chǔ)組件強(qiáng)行加上了許多樣式，難以覆蓋，不關(guān)閉將造成部分組件的樣式混亂。)
（3）構(gòu)建npm包 （因為我們通過npm安裝的包是node的包，我們需要編譯成小程序的包才可以使用）。
點擊工具>構(gòu)建即可。
?
編譯完成后會生成下列文件夾
（5）在app.json中 進(jìn)行全局注冊
eg:注冊vue中的Button組件
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
?
4.小程序配置分包?
? ? ?分包主要用來解決小程序體積過大的問題，小程序本身就有輕量化的特點，因此微信對小程序的體積是有要求的（整個小程序所有的分包大小不超過20MB,開通虛擬支付后的小游戲不超過30MB單個分包/主包不能超過2MB）,采用分包可以優(yōu)化小程序首次啟動的下載時間（和路由懶加載的原理類似），還可以在多團(tuán)隊共同開發(fā)時更好的解耦協(xié)作。注意：TabBar頁面只能放在主包里面。
?（1）創(chuàng)建subpackage文件夾，在里面創(chuàng)建pages文件夾，然后將需要放到分包且不是TabBar的頁面移動到pages文件夾內(nèi)，
（2） 在app.json中修改路由（注意：需要將pages中不需要的路由給刪除掉）
"subpackages": [
{
"root": "subpackages",
"pages": ["pages/Login/Login", "pages/lifecycle/lifecycle"]
}
],
5.小程序配置獨(dú)立分包
? ? ? ? ?獨(dú)立分包和小程序內(nèi)部的分包和主包都沒關(guān)系，他是單獨(dú)獨(dú)立出來的，通常我們將打開小程序時加載的廣告頁面放置到獨(dú)立分包內(nèi)部。
配置獨(dú)立分包和分包的步驟是一樣的，只不過是多了一個? "independent": true的配置來證明這個分包是獨(dú)立分包。在app.js頁面給分包添加配置：
{
"root": "singlepackage",
"pages": ["pages/ad/ad"],
"independent": true
}
6.小程序分包預(yù)下載
? ? ? ?因為小程序在加載頁面時只會先加載主包的頁面，分包的頁面是被點擊后才會進(jìn)行下載的操作，這樣會導(dǎo)致用戶首次進(jìn)入分包頁面速度較慢，因此我們可以通過分包預(yù)下載將點擊量高的頁面所在分包提前下載出來，提供用戶的體驗感（注意：分包預(yù)下載是異步操作，系統(tǒng)會先將主包下載完成后進(jìn)行預(yù)下載的操作）。
"preloadRule": {
"pages/index/index": {
"network": "all",
"packages": ["subpackages"]
}
},
柚子快報激活碼778899分享：web學(xué)習(xí)筆記（八十）
參考閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
OTTO優(yōu)選購物坊
