# uni_template
基于[uView1.5.2](https://uviewui.com/)搭建的快速开发模板

## 数据存储
提供`vuex`、`globalData`、`Storage`三种存储方式

### vuex
`/store/mixin.js`文件向所有页面，组件注入了vuex中不包含modules的内容 <br />
因此，可以直接在页面中使用vuex中的内容 <br />

**修改vuex内容** <br />
`/store/mixin.js`中同样挂在了修改方法 <br />
如需要修改vuex中的token字段，可使用**this.$u.vuex('token', 'xxxx')** <br />
如需修改vuex中的user对象中的name字段，可使用**this.$u.vuex('user.name', '张三')** <br />
如需修改vuex中module下的text中的ts字段，可使用**this.$u.vuex('text.ts', 'xxx')** <br />

### globalData
`globalData`存储的是全局变量，调用方式为
```javascrip
getApp().globalData.token
```

### Storage
完全遵循`uni`的`Storage`规则

## http请求
`/common/js/http.interceptor.js`设置了请求配置、请求拦截器、响应拦截器 <br />
`/common/js/http.api.js`可以配置全局请求api**(尚未全局注册)**，如需注册，**请解开`/main.js`第34，35行注释**

## 多语言
多语言使用了`vue-i18n`插件，`/common/js/international.js`可以配置各种语言(尚未全局注册)，如需注册，**请解开`/main.js`第3，20，25行注释**。<br />
使用方法:
- 可以在`template`中直接使用`{{ $t('index').game }}`
- 也可以使用`计算属性`，**computed: { index() { return this.$t('index') } }**

## 暗黑模式(会出现闪现问题)
`vuex`中的`themeStyle`可取值`white`、`black`，即对应的`正常模式`、`暗黑模式` <br />
**`开发中请尽量使用css变量`** <br />
如需使用换肤，可解开`/store/mixin.js`中第36，44行代码

## 关于下拉刷新，上拉加载
使用了`mescroll 1.3.0`版本<br>
使用刷新，加载组件，必须在页面引入`mixin`文件
```javascript
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
	mixins: [MescrollMixin]
}
```

### 单个
页面使用单个下拉刷新的话，可以使用`page-view`组件
```vue
<template>
	<page-view isScroll tabbar @up="upCallback" @down="downCallback">
		<block v-for="(item, idx) in list" :key="idx">
			<view>{{ item }}</view>
		</block>
	</page-view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			list: []
		}
	},
	
	methods: {
		upCallback(page) {
			this.getData(page.num)
				.then(res => {
					this.mescroll.endSuccess(res.length, res.next)
				})
		},
		
		downCallback() {
			// 将page.num重置为1，并执行一遍upCallback
			this.mescroll.resetUpScroll()
		},
		
		getData(page) {
			return new Promise(resolve => {
				this.$u.post('/xxx', {
					page: page,
					count: 10
				}).then(res => {
					const list = res.data.list
					
					page == 1 && (this.list = [])
					this.list = this.list.concat(list)
					
					resolve({
						lenght: list.length,	// 当前页面数据长度
						next: res.data.next	// 下一页是否还有数据
					})
				})
			})
		}
	}
}
</script>
```

### 多个
类似交易记录页面，会有topbar，待付款、待发货、代签收、已完成等等，这种页面处理刷新需要多个
```vue
<!-- 主页面 -->
<template>
	<page-view>
		<view class="u-tabs-box fixed-t">
			<u-tabs
				ref="tabs" 
				:activeColor="themeColor"
				:list="tabs" 
				:current="tabCurrent"
				@change="tabChange"
				:is-scroll="false" 
				swiperWidth="750"
				class="u-border-bottom"
			></u-tabs>
		</view>
		
		<!-- 待付款 -->
		<record-item ref="mescrollItem0" :i="0" :index="tabCurrent" :tabs="tabs"></record-item>
		
		<!-- 待发货 -->
		<record-item ref="mescrollItem1" :i="1" :index="tabCurrent" :tabs="tabs"></record-item>
		
		<!-- 待收货 -->
		<record-item ref="mescrollItem2" :i="2" :index="tabCurrent" :tabs="tabs"></record-item>
		
		<!-- 已完成 -->
		<record-item ref="mescrollItem3" :i="3" :index="tabCurrent" :tabs="tabs"></record-item>
	</page-view>
</template>

<script>
import RecordItem from './record-item.vue'
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";	// 必须
export default {
	components: {
		RecordItem
	},
	
	mixins: [MescrollMoreMixin],	// 必须
	
	data() {
		return {
			tabs: [
				{ name: '待付款' },
				{ name: '待发货' },
				{ name: '待收货' },
				{ name: '已完成' },
			],
			tabCurrent: 0,
		};
	},
	
	methods: {
		tabChange(index) {
			this.tabCurrent = index
		}
	}
}
</script>
```
`RecordItem`组件(具体请求方法，和单个的相同)
```vue
<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index">
		<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
			<!-- height="" -->
		<mescroll-body 
			ref="mescrollRef" 
			@init="mescrollInit" 
			top="80"
			:down="downOption" 
			@down="downCallback" 
			:up="upOption" 
			@up="upCallback">
			
			<!-- 渲染区域 -->
			
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
export default {
	mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	props:{
		i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
		index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			type: Number,
			default(){
				return 0
			}
		},
		tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
			type: Array,
			default(){
				return []
			}
		}
	},
	data() {
		return {
			downOption:{
				auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption:{
				auto:false, // 不自动加载
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
			},
			list: []
		}
	},
}
</script>
```