uniappフレームワーク構成(ブロッキング、ドメイン間)および使用
uniappプロジェクトを作成するだけでデフォルトの構成がありますが、ドメイン間の問題などを解決するため、プロジェクトの構成とパッケージを構築する必要があります.
ルートディレクトリにcommonフォルダを新規作成し、utilを構成します.js 、 request.js 、 config.jsはオンデマンドで構成できます.以下に内容を添付します. util.js request.js
ここでは更新に使用します.ついでにこの機能を追加します.必要でない場合は削除できます.ブロッカーブロック401の前にstoreエントリファイルに操作を追加する必要があります.place look config.js(h 5、app、ウィジェット対応)
ディレクトリの手配:api-index.jsファイル、modulesフォルダmodules-jsファイル(リクエストインタフェース) index.jsコンテンツ インタフェースドキュメント、ここではuser.js例
これまでは、簡単なフレームワークが完成したとしても、インタフェースのリクエストや呼び出し、tokenの期限切れの再登録、再署名が付いていて、整理したいのははっきりしています.
1.基本構成
ルートディレクトリにcommonフォルダを新規作成し、utilを構成します.js 、 request.js 、 config.jsはオンデマンドで構成できます.以下に内容を添付します.
/**
*
* （ ）
* @param {Object} obj -
* @returns {string} -
**/
export function formatGetUri(obj, Object) {
// const params: Array < string >= []
const params = []
Object.keys(obj).forEach((key) => {
let value = obj[key]
if (typeof value !== 'undefined' || value !== null) {
params.push([key, encodeURIComponent(value)].json('='))
}
})
return '?' + params.join('&')
}
//
export function convertSerialize(data){
let list = [];
Object.keys(data).forEach(ele => {
list.push(`${ele}=${data[ele]}`)
})
return list.join('&');
}
import {convertSerialize} from './util.js'
import store from '../store/index.js'
const request = {}
const headers = {}
request.globalRequest = (url, method, data, power) => {
let header = {}
/**
*
*/
switch (power) {
case 0:
headers['Authorization'] = 'Bearer' + uni.getStorageSync('token')
// token
headers['refresh_token'] = false
break
case 1:
headers['Authorization'] = 'Basic a3N1ZGk6a3N1ZGk='
break;
case 2:
headers['Authorization'] = 'Basic a3N1ZGlfcGM6a3N1ZGlfcGM='
break;
case 3:
responseType = 'blob'
break;
case 4:
header = {
'content-type': "application/x-www-form-urlencoded;charset=utf-8"
}
break;
default:
break;
}
//
const obj = {
orgId: uni.getStorageSync('orgId') || 0,
userId: uni.getStorageSync('userId') || 0,
operator: uni.getStorageSync('loginName') || ' ',
timestamp: new Date().getTime()
}
let JSONParams = {
url: url,
method: method,
data: { ...obj,
...data
},
dataType: 'JSON',
header: header,
}
if (power != 4) {
JSONParams = {
url: url,
method: method,
data: { ...obj,
...data
},
dataType: 'JSON',
header: headers,
}
}
return uni.request(JSONParams).then(res => {
if (res[1]) {
//TODO
if (res[1].statusCode == 200) {
// #ifdef H5
return res[1].data
// #endif
// #ifdef MP-WEIXIN
return JSON.parse(res[1].data)
// #endif
// #ifdef APP-PLUS
return res[1].data
// #endif
} else if (res[1].statusCode == 401 && !headers.refresh_token) {
// 401
const {url, method, data} = JSONParams
headers.refresh_token = true
return store.dispatch('refreshToken').then(res=>{
uni.setStorageSync('token',res)
return request.globalRequest(url, method, data, 0)
})
} else if (res[1].statusCode == 403) {
// 403 token ，
uni.redirectTo({
url: '/pages/public/login'
})
} else {
//
throw res[1].data
}
}
}).catch(params => {
switch (params.code) {
case 401:
uni.clearStorageSync()
break
default:
uni.showToast({
title: params.message,
icon: 'none'
})
return Promise.reject()
break
}
})
}
export default request
ここでは更新に使用します.ついでにこの機能を追加します.必要でない場合は削除できます.ブロッカーブロック401の前にstoreエントリファイルに操作を追加する必要があります.place look
import Vue from 'vue'
import Vuex from 'vuex'
import api from '../api/index.js'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {},
actions: {
async refreshToken(store) {
let token = uni.getStorageSync('token')
let refresh_Token = uni.getStorageSync('refreshToken')
let params = {
access_token: token,
refresh_token: refresh_Token,
grant_type: 'refresh_token',
client_id: 'flying',
client_secret: 'yaohw',
}
//
let newToken = await api.user.login(params)
return newToken.value
}
}
})
export default store
let UAC_URL = ""
let DT_WB_URL = ""
// manifest.json ，
let DEFAULT_UAC_URL = "http://192.168.0.125:9101"
let DEFAULT_DT_WB_URL = "http://192.168.0.125:9102"
if (process.env.NODE_ENV === 'development') {
// #ifdef H5
UAC_URL = '/uac'
DT_WB_URL = '/lift'
// #endif
// #ifdef MP-WEIXIN
UAC_URL = DEFAULT_UAC_URL
DT_WB_URL = DEFAULT_DT_WB_URL
// #endif
// #ifdef APP-PLUS
UAC_URL = DEFAULT_UAC_URL
DT_WB_URL = DEFAULT_DT_WB_URL
// #endif
} else {
UAC_URL = DEFAULT_UAC_URL
DT_WB_URL = DEFAULT_DT_WB_URL
}
export default {
UAC_URL,
DT_WB_URL
}
2.manifest.jsonソースの構成を試みる
{
"h5" : {
//
"devServer" : {
"port" : 9200, //
"disableHostCheck" : true,
"proxy" : { // ip ，
"/uac" : {
"target" : "http://192.168.0.125:9101/",
"changeOrigin" : true,
"secure" : false,
"pathRewrite" : {
"^/uac" : "/"
}
},
"/lift" : {
"target" : "http://192.168.0.125:9102/",
"changeOrigin" : true,
"secure" : false,
"pathRewrite" : {
"^/lift" : "/"
}
}
}
}
}
}
3.ルートディレクトリapiフォルダの作成
ディレクトリの手配:api-index.jsファイル、modulesフォルダmodules-jsファイル(リクエストインタフェース)
import user from './modules/user.js'
import home from './modules/home.js'
import order from './modules/order.js'
const api = {
user,
home,
order
}
export default api
import request from '@/common/request.js'
import config from '@/common/config.js'
import {
formatGetUri
} from '@/common/util.js'
const uac = config.UAC_URL
const lift = config.DT_WB_URL
const user = {}
//
user.banners = () => request.globalRequest(lift + "/anon/banner/app/valid", 'POST', null, 0)
export default user
4.main.js導入で使用可能
import Vue from 'vue'
import App from './App'
import api from 'api/index.js'
import url from './common/config.js'
Vue.config.productionTip = false
Vue.prototype.$fire = new Vue();
Vue.prototype.$api = {
api
};
Vue.prototype.$url = url;
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
5.vueページ要求マルチキャスト図インタフェース
// ， user.js
banners() {
this.$api.api.user.banners().then(res => {
if (res.result.code == '000000') {
this.carouselList = res.body
} else if (res.result.code == '999999') {
this.$u.toast(' ， ')
} else {
this.$u.toast(res);
}
})
},
これまでは、簡単なフレームワークが完成したとしても、インタフェースのリクエストや呼び出し、tokenの期限切れの再登録、再署名が付いていて、整理したいのははっきりしています.