uview 链接：uview
- http.api.js
import config from '../config.js';
/*
api接口管理
样例说明：
如：config里有HOST：127.0.0.1，他作为主机地址，用于拼接路径
如：
const HOST=config.HOST
let testApi=HOST+'test/test'
const install=(Vue,vm)=>{
//可以post还是get看需求
let getTestApi=(params={})=>vm.$u.http.post(testApi,param);
vm.$u.api={
getTestApi
}
}
*/
//--one接口测试
let oneApi='https://api.xygeng.cn/one'
// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
const install = (Vue, vm) => {
// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
let getOneApi = (params = {}) => vm.$u.http.get(oneApi,params);
vm.$u.api = {
getOneApi
};
}
export default {
install
}
//在pages/index/index.vue下可以这样子使用
this.$u.api.getOneApi().then(res=>{
this.oneSentence=res.data.content;
})
- http.interceptor.js
const install = (Vue,vm)=>{
//配置全局项，可更改，详情看uview官网
uni.$u.http.setConfig((config)=>{
config.header = {
'Content-type': 'application/x-www-form-urlencoded'
}
return config;
},config=>{
return Promise.reject(config)
})
// 请求拦截
uni.$u.http.interceptors.request.use((config) => {
// 可使用async await 做异步操作
// 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
// config.data = config.data || {}
// 根据custom参数中配置的是否需要token，添加对应的请求头
// if(config?.custom?.auth) {
// // 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
// config.header.token = vm.$store.state.userInfo.token
// }
config.header.Token = vm.vuex_token;
// console.log('config:', config)
// if(config.url == '/get_update'){
// config.showLoading = false;
// }
return config
}, config => {
// 可使用async await 做异步操作
return Promise.reject(config)
})
//响应拦截
uni.$u.http.interceptors.response.use((res) => {
/* 对响应成功做点什么 可使用async await 做异步操作*/
// if (response.data.code !== 200) { // 服务端返回的状态码不等于200，则reject()
// return Promise.reject(response) // return Promise.reject 可使promise状态进入catch
// if (response.config.custom.verification) { // 演示自定义参数的作用
// return response.data
// }
return res.data
}, (err) => {
/* 对响应错误做点什么 （statusCode !== 200）*/
if(err.statusCode==500){
vm.$u.toast(err.statusCode + '-服务器出错～')
}
else if(err.statusCode==404){
vm.$u.toast(err.statusCode + '-访问地址有误～', 2000)
}
else{
setTimeout(()=>{
uni.reLaunch({
url:'../pages/login/login'
})
},2000)
}
return Promise.reject(err)
})
}
export default {
install
}
- public.js 一些公共函数存放位置
组件存放目录，命名方式可以为 前缀-组件名 方便使用uniapp的easycom进行识别，如：t-com，而easycom可以在pase.json文件里配置,参考官方案例如下：
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
"^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
}
}
而这块内容就会和uview引入方式是一样的，因为传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用
具体可根据需要建立common文件夹代表公共组件，复用率高的，或者其他
参考链接：uniapp easycom
- img文件夹存放图片，可根据需要再往里继续创建每个页面用到的图片，比如img/pagesA/xxx.png
- tabbar文件夹存放底部导航栏图片
- logo.png官方内置的logo图片
- 可根据需要导入相应字体包等其他静态资源
使用uview封装vuex，使用方法如下
//---保存， store/index.js下有放vuex_token,vuex_这个前缀方便标识，可根据需要放入vuex_user
let _this= this;
let formData = {
username:'admin',
password:'123'
}
_this.$u.api.Login(formData).then(res=>{
if(res.code=='1000'){
_this.$u.vuex('vuex_token',res.Authorization);
_this.$u.vuex('vuex_user',{
username:res.username,
})
}
}).catch(err=>{
_this.$u.toast(err.error + '-访问地址有误～', 2000)
})
//---调用,以token为例,this.vuex_token即可获取到，如果是user的话，就是this.vuex_user.xxxx
console.log(this.vuex_token)
全局配置项目，比如一些服务器地址和appid等
/**
* @description 全局配置
*/
const deBug = false; // true-测试环境 false-生产环境
// const accountInfo = uni.getAccountInfoSync();
// const appid = accountInfo.miniProgram.appId;
export default{
// appid: appid, // 当前微信小程序appid
// version: '1.0.0', // 版本号
Host:deBug?'http://127.0.0.1:5000':'http://xxx.xxx.xxx.xxx:xxxx'//服务器地址,可放入相关服务器地址
}
//全局注册store和拦截器
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
import store from '@/store'
// 引入uView提供的对vuex的简写法文件
let vuexStore = require('@/store/$u.mixin.js')
Vue.mixin(vuexStore)
import uView from 'uview-ui'
Vue.use(uView)
// 如此配置即可
uni.$u.config.unit = 'rpx'
const app = new Vue({
store,
...App
})
// http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用
import httpInterceptor from '@/common/http.interceptor.js'
Vue.use(httpInterceptor, app)
// http接口API抽离，免于写url或者一些固定的参数
import httpApi from '@/common/http.api.js'
Vue.use(httpApi, app)
app.$mount()
配置了tabbar选项和分包加载内容，可以根据设置分包或者删除
详情参考：uniapp tabbar配置
分包地址，我个人做法是这样，有个pagesub文件夹作为分包，前缀加上pages主要刚好可以和排在pages文件夹下面，清晰，所以命名格式可以是这样：pagesxxxx，仅供参考
condition配置可以根据HbuilderX自带的服务进行创建：运行->小程序模拟器->微信开发者工具 指定页面->编辑启动页配置
// "subPackages":[
// {
// "root":"分包地址",
// "pages":[
// {
// "path":"root下的页面地址",
// "style" :
// {
// "navigationBarTitleText": "",
// "enablePullDownRefresh": false
// }
// }
// ]
// }
// ],
// "preloadRule": {
// "pagesA/list/list": {
// "network": "all",
// "packages": ["__APP__"]
// },
// "pagesB/detail/detail": {
// "network": "all",
// "packages": ["pagesA"]
// }
// },
同时，加入了midbutton配置项，可根据需要删除或者改变大小和图片
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#ff5500",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png",
"text": "首页"
},
{
"pagePath": "pages/index/index",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png",
"text": "首页2"
}
],
"midButton": {
"width": "150rpx",
"height": "150rpx",
"text": "xxxx",
"iconPath": "/static/logo.png",
"iconWidth": "116rpx"
//tabbar的list长度必须对称，比如2，4,图片一般找圆的
}
},