uniapp 初始化项目 _UniAPP

【uniapp 初始化项目】历览千载书，时时见遗烈。这篇文章主要讲述uniapp 初始化项目相关的知识，希望能为你提供帮助。

const baseUrl = ‘http://10.92.1.17:6601/videoapi/‘; //const baseUrl = ‘/videoapi/‘; //对于 GET 方法，会将数据转换为 query string。例如 { name: ‘name‘, age: 18 } 转换后的结果是 name=name& age=18。 //对于 POST 方法且 header[‘content-type‘] 为 application/json 的数据，会进行 JSON 序列化。 //对于 POST 方法且 header[‘content-type‘] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。 //postJson请求数据存放在requestBody中 const HttpPostJson = (url, data) => { //登录后将用户的token存放在缓存中 let token = ""; uni.getStorage({ key: ‘token‘, success: function(ress) { token = ress.data, data.token = ress.data } }); let opts = { url: baseUrl + url, data: data, method: ‘POST‘, header: { "Content-Type": "application/json; charset=UTF-8", "token": token }, dataType: ‘json‘ } let promise = new Promise(function(resolve, reject) { uni.request(opts).then( (res) => { resolve(res[1].data) } ).catch( (response) => { reject(response) } ) }) return promise }; //get请求 const HttpGet = (url, data) => { ////登录后将用户的token存放在缓存中 let token = ""; uni.getStorage({ key: ‘token‘, success: function(ress) { token = ress.data, data.token = ress.data } }); let opts = { url: baseUrl + url, data: data, method: ‘GET‘, header: { "token": token }, dataType: ‘json‘ } let promise = new Promise(function(resolve, reject) { uni.request(opts).then( (res) => { resolve(res[1]) } ).catch( (response) => { reject(response) } ) }) return promise }; //表单提交 const HttpPostForm = (url, data) => { //登录后将用户的token存放在缓存中 let token = ""; uni.getStorage({ key: ‘token‘, success: function(ress) { token = ress.data, data.token = ress.data } }); let opts = { url: baseUrl + url, data: data, method: ‘POST‘, header: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8", "token": token }, dataType: ‘json‘ } let promise = new Promise(function(resolve, reject) { uni.request(opts).then( (res) => { resolve(res[1]) } ).catch( (response) => { reject(response) } ) }) return promise }; //文件上传(单文件上传) /** * fileType:文件类型，image/video/audio仅支付宝小程序，且必填。 * fileName:文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 * filePath:要上传文件资源的路径 * formData:HTTP 请求中其他额外的 form data * files : 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。 */ const HttpPostFile = (url, formData, fileName, fileType, filePath) => { //登录后将用户的token存放在缓存中 let token = ""; uni.getStorage({ key: ‘token‘, success: function(ress) { token = ress.data, data.token = ress.data } }); let opts = { url: baseUrl + url, formData: formData, filePath: filePath, fileType: fileType, name: fileName, method: ‘POST‘, header: { "Content-Type": "multipart/form-data", "token": token }, dataType: ‘json‘ } let promise = new Promise(function(resolve, reject) { uni.uploadFile(opts).then( (res) => { resolve(res[1]) } ).catch( (response) => { reject(response) } ) }) return promise }; /** * 文件下载GET请求 */ const HttpDownloadFile = (url) => { //登录后将用户的token存放在缓存中 let token = ""; uni.getStorage({ key: ‘token‘, success: function(ress) { token = ress.data, data.token = ress.data } }); let opts = { url: baseUrl + url, method: ‘GET‘, header: { "token": token }, dataType: ‘json‘ } let promise = new Promise(function(resolve, reject) { uni.uploadFile(opts).then( (res) => { resolve(res[1]) } ).catch( (response) => { reject(response) } ) }) return promise }; export default { baseUrl, HttpPostForm, HttpGet, HttpPostJson, HttpPostFile, HttpDownloadFile }

< template> < view class="content"> < /view> < /template> < script> export default { data() { return { title: ‘Hello‘ } }, onLoad() { let object = {}; this.http.HttpPostJson(‘login/findImageCode‘, object).then(res => { console.log(res); //打印请求返回的数据 }, error => { console.log(error); }) }, methods: {} } < /script> < style> @import url("index.css"); < /style>

import Vue from ‘vue‘ import App from ‘./App‘ import http from ‘./common/http.js‘Vue.config.productionTip = false //当前时间 Vue.prototype.now = Date.now || function() { return new Date().getTime(); }; //请求接口 Vue.prototype.http = http; //获取缓存中用户的token Vue.prototype.token = uni.getStorageSync("token"); //获取用户信息 Vue.prototype.userInfo = uni.getStorageSync("userInfo"); App.mpType = ‘app‘const app = new Vue({ ...App }) app.$mount()

解决跨域问题

"h5" : { "devServer" : { "inline":false, "port" : 8080, "host" : "0.0.0.0", "disableHostCheck" : true, "proxy" : { "/videoapi" : { "target" : "http://10.92.1.17:6601/", "changeOrigin" : true, "secure" : false, "pathRewrite":{"^/dpc":""} } } }, "router" : { "mode" : "history" }, "optimization" : { "treeShaking" : { "enable" : true } } }