ホームページ > 記事 > WeChat アプレット > vue を使用して小さなプログラムを作成できますか?
vue を使用して小さなプログラムを作成できますか?
- hzc転載
- 2020-06-12 10:23:596350ブラウズ
1. ログイン認証
1. ミニプログラムのログインメカニズム
-
従来のログイン (例として jwt メソッド)
ユーザーはユーザー名とパスワード (パスワードは特定のアルゴリズムで暗号化する必要があります) を入力してログイン インターフェイスにアクセスします
バックエンドはユーザー名とパスワードを検証し、ユーザーの情報をトークン文字列に暗号化し、それをフロントエンドに返します
フロントエンドは、トークン (ローカル) ストレージ、ここにはインタビューの質問が含まれています: localstorage、sessionstorage、cookie の違いは何ですか? 自問してください)
フロントエンドがリクエストを送信するたびに、トークンをバックエンドに送信します。ログイン ステータスが正当であるかどうかを判断するのはバックエンドです (トークンを渡す方法、ヘッダーに入れるか本文に入れるか、バックエンドと自分で話し合ってください)。
次に、フロントエンドは戻り状況に基づいて何かを実行するかどうかを決定します。 操作
ミニ プログラムのログイン認証 ミニ プログラムにはログイン ボックスはなく、ユーザー情報の使用を許可するだけですが、そのプロセスはどのようなものですか?簡単な手順は次のとおりです。 承認のためのユーザー情報を取得します----->wx.login インターフェースを呼び出します----->返された一意の ID 認証コードを取得します----->ユーザー情報とともにコードを渡しますバックエンド -- --->バックエンドは上記と同じです。
コードは 1 回しか使用できないことに注意してください。有効期限は 5 分で切れます。期限が切れた場合は、再度 wx.login() を行う必要があります。
- 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"
});
}
}
});
},ミニ プログラムのページ間のジャンプに関連する APIwx.reLaunch(); // 关闭所有页面，打开到应用内的某个页面
wx.switchTab(); // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateTo(); // 跳转到某个页面
wx.navigateBack(); // 返回到上个页面，需要跟navigateTo配合使用
具体的な使用方法については、wx ドキュメントを参照してください。どうしても我慢できない場合は、uniapp ドキュメントを参照してください。
に変更すると使用できます。
2-3. ログイン操作特に言うことはありませんが、WeChat のコードの一部を見てください。権限 API は廃止されました。これで、ボタンの opentype 属性を介して一部の権限操作のみを実行できるようになります。次のコードには、ユーザーが認証を拒否した後のセカンダリ ブート認証ログイン プロセスの処理が含まれています。
<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;
}
} このようにして、完了です。 this.$http? 3番目の記事を読んでください（まだ書いていないのですがなぜですか？） 読んだ後、いいねをお願いします このまま読み続けていただく場合は、先に苦情を言わせてください。 3日経ちましたが、まだ受け取っていません。給料、とても迷惑です、友達、一緒に釣りをしましょう
前回の返信で言いました
This.$http はリクエストを送信します。これは何ですか?
1. PC 側の vue プロジェクトでリクエストを送信します
愚かな手順: (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
2. ミニ プログラムのリクエスト1. ネイティブ アプローチ:
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})xue Wei は少し不快です。は axios に慣れており、Promise をサポートしているため、Promise をサポートさせます
2. Promise をサポートする小さなリクエスト関数をカプセル化します
1. 新しい request.js ファイルを作成して、 utils というフォルダー (utils が何を意味するかは説明しません)
export default () => {
return new Promise((resolve,reject)=>{
})
}4. WeChat の 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. カプセル化を続けますが、今すぐ直接使用することはできません // 把会改的参数抽出来，像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)
},
)
})
}6. Axios には労力を節約するためのベース URL がありますまた、
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(各种参数).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 中国語 Web サイトの他の関連記事を参照してください。