gitHub源码
开始进行交互了 我们在做vue或者react 进行前后端的交互时 都会进行亲求的封装 那么 uni-app也是一样的 如果我们不封装 频繁的写 那太麻烦了 话不多说 开始撸
第一步
先建立两个文件夹api和utils
先看下request.js 里面放一个promise
export default function $http(options){
const { url, data } = options
return new Promise((resove,reject)=>{
uniCloud.callFunction({
name:url,
data
}).then((res)=>{
resove(res.result)
}).catch(err=>{
reject(err)
})
})
}
在看下getTab.js 里面放上我们的云函数请求
import $http from "../../utils/request"
export const getTab = (data)=>{
return new $http({
url:'tabBar',
data
})
}
在看下index.js 进行云函数接口的整合
const requireApi = require.context(".",false,/.js$/)
const module ={}
requireApi.keys().map((key,index)=>{
if(key==="./index.js") return
Object.assign(module,requireApi(key))
})
export default module
在main.js进行引入 然后全局注册在vue实例里面
import Vue from 'vue'
import App from './App'
import getTab from "./common/api"
Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype.$api = getTab
const app = new Vue({
...App
})
app.$mount()
页面使用
methods: {
getTabList() {
this.$api.getTab({name:'tabBar'}).then(res=>{
this.dataList = res.data
})
}
},
还在持续学习中 最终会放到gitHub上 想看的可以关注 手上现在也有套学习视频 想要的可以联系我 qq:1254845399