1. Anmeldeberechtigung
1. Anmeldemechanismus des Miniprogramms
Traditionelle Anmeldung (JWT-Methode als Beispiel)
Der Benutzer gibt den Benutzernamen und das Passwort ein (das Passwort muss durch bestimmte Algorithmen verschlüsselt werden) und greift auf die Anmeldeschnittstelle zu
Das Backend überprüft den Benutzernamen und das Passwort, verschlüsselt die Benutzerinformationen in einer Token-Zeichenfolge und gibt sie an das Frontend zurück
Das Frontend speichert Der Token (lokal) Storage, hier ist eine Interviewfrage: Was ist der Unterschied zwischen Localstorage, Sessionstorage und Cookie? Fragen Sie sich)
Jedes Mal, wenn das Frontend eine Anfrage sendet, Es sendet das Token an das Backend. Es ist Sache des Backends, zu bestimmen, ob der Anmeldestatus zulässig ist (wie das Token übergeben wird, ob es in den Header oder in den Text eingefügt werden soll, und dies selbst mit dem Backend zu besprechen).
Dann beurteilt das Frontend anhand der Rückgabesituation, ob etwas ausgeführt werden soll.
Mini-Programm-Anmeldeautorisierung Das Miniprogramm verfügt über keine Login-Box, sondern erlaubt lediglich die Nutzung von Benutzerinformationen. Wie ist der Ablauf? Die einfachen Schritte sind: Erhalten Sie Benutzerinformationen zur Autorisierung -----> Rufen Sie die wx.login-Schnittstelle auf ------> Erhalten Sie den zurückgegebenen eindeutigen Identitätsauthentifizierungscode -----> geben Sie den Code mit den Benutzerinformationen an Sie weiter. Backend-- --->Das Backend ist das gleiche wie oben
Es ist zu beachten, dass der
Code nur einmal verwendet werden kann. Und es läuft in fünf Minuten ab, Sie müssen wx.login() erneut ausführen
2. Wir führen eine Anmeldeautorisierung durch
2-1, Denkszenario
Stellen Sie vor dem Laden des Miniprogramms fest, ob Sie angemeldet sind (d. h. ob Sie über ein Token verfügen). , springen Sie zur Anmeldeschnittstelle (oder rufen Sie direkt an, um Benutzerinformationen zu erhalten) Schnittstelle und Anmeldeschnittstelle
2-2 Bestimmung vor der Anmeldung
Bestimmen Sie vor dem Laden des Miniprogramms, ob Sie sich anmelden möchten, und führen Sie den entsprechenden Sprung aus
Wie wird vor dem Laden festgestellt? ------>Lebenszyklus-Hook-Funktion
Wenn wir zu diesem Zeitpunkt App.vue im Projekt öffnen, sehen wir den folgenden Code:
onLaunch: function() {
// 这时app初始化完成
// 注意全局只触发一次！！！
console.log('App Launch')
},
onShow: function() {
// app从后台切入前台或者启动
// 显然这是判断是否登陆过的好机会
console.log('App Show')
},
onHide: function() {
// app从前台进入后台
console.log('App Hide')
}So die Beurteilungsmethode
onShow: function() {
// 查一下都获取了那些权限
wx.getSetting({
success(res) {
// 看看有没有用户信息，如果不存在，证明没有登陆
if (!res.authSetting["scope.userInfo"]) {
// 关闭所有页面，打开到应用内的登录页面
wx.reLaunch({
url: "/pages/authorise/index"
});
}
}
});
},Die API im Zusammenhang mit dem Springen zwischen Seiten des Miniprogramms
wx.reLaunch(); // 关闭所有页面，打开到应用内的某个页面 wx.switchTab(); // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 wx.navigateTo(); // 跳转到某个页面 wx.navigateBack(); // 返回到上个页面，需要跟navigateTo配合使用
Informationen zur spezifischen Verwendung finden Sie in der wx-Dokumentation. Wenn Sie es wirklich nicht ertragen können, schauen Sie sich einfach die Uniapp-Dokumentation an Das Gleiche gilt jedenfalls.
Das API-Paket von Uniapp erbt im Grunde das gleiche wie wx davor. Es kann auch dann verwendet werden, wenn das Zeichen in uni geändert wird
2-3. Anmeldevorgang
Es gibt nicht viel zu sagen, schauen Sie sich einfach den Code auf WeChat an. Die Berechtigungs-API wurde aufgegeben. Jetzt können Sie einige Berechtigungsvorgänge nur über das OpenType-Attribut der Schaltfläche ausführen. Der folgende Code umfasst die Handhabung des sekundären Startautorisierungs-Anmeldevorgangs, nachdem der Benutzer die Autorisierung verweigert.<button open-type="getUserInfo" @getuserinfo="mpGetUserInfo" size="mini" v-if="show">授权登录</button> <button type="primary" size="mini" open-type="openSetting" @opensetting="reauthorize" v-else>重新授权</button>
// 获取到用户信息后，调用登录接口，如果被拒绝授权，就跳转到设置页面
mpGetUserInfo(result) {
const that = this;
// 查看是否授权
wx.getSetting({
success(res) {
if (res.authSetting["scope.userInfo"]) {
// 已经授权，可以直接调用 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;
}
}
});
},
// 处理重新授权后的回调函数
reauthorize(e) {
if (e.detail.authSetting["scope.userInfo"]) {
// 若二次授权成功，切换对话框的显示按钮
this.show = true;
}
}Wie im vorherigen Brief erwähnt
1. Eine Anfrage im PC-seitigen Vue-Projekt senden
Dumme Schritte: (Axios verwenden )yarn add axios // npm 也行啦
2. Anfragen für Miniprogramme 1. Nativer Ansatz:
// 在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 = axioswx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})export default () => {
return new Promise((resolve,reject)=>{
})
}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)
}
})
})
}// 把会改的参数抽出来，像URL啦，methods啦，data数据啦，通过形参的方式传递，把请求的成功或者失败的结果弄出去
export default (params) => {
return new Promise((resolve,reject)=>{
wx.request({
...params
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
resolve(res) // 这里resolve出去的是res还是res.data看你们请求返回的数据
}
fail: (err) => {
reject(err)
},
)
})
}7. Anforderungsheader verarbeiten
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)
}
});
})
}// 比如需要携带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)
}
});
})
}In einem Satz ist es dasselbe wie Axios
挂载
使用
在main.js里
import Request from './utils/request' Vue.prototype.$http = Request
然后就可以开开心心在vue单文件组件里this.$http(各种参数).then()的使用拉，流畅又爽
我们还需要啥技能？用vue写小程序
不要怀疑，山东人就是喜欢倒装句咋地
好像没啥了
直接
// 把之前的npm run dev:mp-weixin的黑窗口ctr+c退出哈先 // 然后执行 npm run build:mp-weixin
关闭当先开发者工具里的项目，重新引入dist文件夹下面的build文件夹中的mp-weixin文件夹，这是我们打包好的文件，引入之后，自己测试一遍，没问题后点击开发者工具的右上角上传按钮，进行上传代码，然后登录微信小程序后台把代码提交审核就行啦。
以上，感谢大家，最后，关注一波我的公众号呗，刚开始做，虽然，里面还没放啥东西，求支持嘛。
作者：我是一个小哥哥
本文转载自：https://juejin.cn/user/131597127388024/posts
推荐教程：《微信小程序》
Das obige ist der detaillierte Inhalt vonKann man mit Vue kleine Programme schreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Mini-Programmpfaderfassung
Was sind die am häufigsten verwendeten Anweisungen in Vue?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
