vue를 사용하여 작은 프로그램을 작성할 수 있나요?
- hzc앞으로
- 2020-06-12 10:23:596364검색
1. 로그인 인증
1. 미니 프로그램의 로그인 메커니즘
기존 로그인(예: jwt 방식)
사용자가 사용자 이름과 비밀번호를 입력합니다. 특정 알고리즘 암호화를 통과해야 함), 로그인 인터페이스에 액세스
백엔드는 사용자 이름과 비밀번호를 확인하고 사용자 정보를 토큰 문자열로 암호화한 후 이를 프런트엔드에 반환합니다
프런트엔드는 토큰을 저장합니다(단지 로컬 저장소, 세션 저장소, 쿠키의 차이점은 무엇입니까? 자문해 보세요.)
프런트 엔드가 요청을 보낼 때마다 토큰을 백 엔드로 보냅니다. 백엔드는 로그인 상태가 적법한지 판단합니다. (토큰을 어떻게 전송할지, 헤드에 넣을지 바디에 넣을지는 백엔드와 협의해야 합니다.)
그 다음 프론트엔드는 복귀 상황에 따라 어떤 작업을 수행할지 판단하세요
미니 프로그램 로그인 인증 미니 프로그램에는 로그인 상자가 없고 사용자 정보 사용 권한만 부여됩니다. 간단한 단계는 다음과 같습니다: 인증을 위한 사용자 정보 얻기------>wx.login 인터페이스 호출------>반환된 고유 ID 인증 코드 얻기------>사용자 정보와 함께 코드를 전달 백엔드-- --->백엔드는 위와 동일합니다
코드는 한 번만 사용할 수 있으며 5분 후에 만료된다는 점에 유의하세요. 다시
2. 로그인 인증을 합니다
2-1, 시나리오를 생각해 보세요
미니 프로그램을 로드하기 전에 로그인 여부(즉, 토큰이 있는지 여부)를 확인합니다. , 그렇지 않은 경우 로그인 인터페이스로 점프(또는 사용자 정보 획득을 위한 인터페이스 및 로그인 인터페이스를 직접 호출
2-2 로그인 전 판단
미니 프로그램을 로드하기 전에 로그인 여부를 결정하고 해당 점프를 만드세요
로드하기 전에 결정하는 방법 ------> 라이프 사이클 후크 기능
이 때 프로젝트에서 App.vue를 열면 다음 코드가 표시됩니다.
onLaunch: function() {
// 这时app初始化完成
// 注意全局只触发一次！！！
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"
});
}
}
});
},애플릿 Jump 관련 API
wx.reLaunch(); // 关闭所有页面，打开到应用内的某个页面 wx.switchTab(); // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 wx.navigateTo(); // 跳转到某个页面 wx.navigateBack(); // 返回到上个页面，需要跟navigateTo配合使用
구체적인 사용법은 wx 문서를 참고해주세요. 정말 참기 힘드시다면 uniapp 문서를 읽어보시면 될 것 같습니다. 어쨌든 똑같습니다
uniapp의 api 패키지는 기본적으로 미니 프로그램의 api를 상속받습니다. 이전 단어 wx는 uni로 변경할 수 있습니다.
2-3. 로그인 작업
, 코드를 살펴보세요. 이제 일부 권한 작업에는 opentype 속성만 사용할 수 있습니다. 다음 코드에는 사용자가 인증을 거부한 후의 보조 부팅 인증 로그인 프로세스가 포함되어 있습니다. 그렇습니다. this.$http가 무엇인지는 세 번째 글을 참조해주세요. (아직 작성하지 않았습니다.咋地) 읽고 나면 엄지손가락을 치켜세우세요
계속해서 읽어보도록 하겠습니다. 3일이 지났는데 아직 월급을 못받았어요 너무 답답해요 친구들
요. 1. PC 측 vue 프로젝트에서 요청 보내기
어리석은 단계: (axios 사용)
<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;
}
}2. 미니 프로그램 요청 1. 기본 접근 방식:
yarn add axios // npm 也行啦xue Wei는 약간 불편합니다. 그는 Axios에 익숙하고 Promise를 지원하므로 Promise를 지원하도록 합시다
2. Promise를 지원하는 작은 요청 함수를 캡슐화합니다
1. 새 request.js 파일을 만들어 utils라는 폴더에 넣습니다(저는 그렇지 않습니다). utils가 무엇을 의미하는지 알려주지 마세요.)
2. 기본 함수 객체 내보내기
3. 이 함수는 Promise를 반환하며 그 중 하나는 Reject입니다. Promise가 무엇인지 모르신다면 제 다른 글을 읽어보세요
// 在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 4. WeChat API 캡슐화(uniapp의 API도 작동합니다. 크로스 엔드 요구 사항이 있는 경우 uni의 요청 API를 직접 캡슐화하면 거의 동일합니다.) wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})5. 계속 캡슐화하면 안 됩니다. 지금 직접 사용하세요
export default () => {
return new Promise((resolve,reject)=>{
})
}6. Axios에는 노력을 아끼기 위한 baseURL이 있습니다. 우리도 이를 가지고 있어야 합니다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)
}
})
})
}7. 요청 헤더 처리
// 把会改的参数抽出来，像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)
},
)
})
}전체 버전
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)
}
});
})
}
2. ?
한 문장으로 말하면 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
推荐教程：《微信小程序》
위 내용은 vue를 사용하여 작은 프로그램을 작성할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!