uni_template v1.0.0

uni_template

基于uView1.5.2搭建的快速开发模板

数据存储

提供vuex、globalData、Storage三种存储方式

vuex

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

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

globalData

globalData存储的是全局变量，调用方式为

getApp().globalData.token

Storage

完全遵循uni的Storage规则

http请求

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

多语言

多语言使用了vue-i18n插件，/common/js/international.js可以配置各种语言(尚未全局注册)，如需注册，请解开/main.js第3，20，25行注释。 使用方法:

• 可以在template中直接使用{{ $t('index').game }}
• 也可以使用计算属性，computed: { index() { return this.$t('index') } }

暗黑模式(会出现闪现问题)

vuex中的themeStyle可取值white、black，即对应的正常模式、暗黑模式 开发中请尽量使用css变量 如需使用换肤，可解开/store/mixin.js中第36，44行代码

关于下拉刷新，上拉加载

使用了mescroll 1.3.0版本 使用刷新，加载组件，必须在页面引入mixin文件

import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
	mixins: [MescrollMixin]
}

单个

页面使用单个下拉刷新的话，可以使用page-view组件

<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，待付款、待发货、代签收、已完成等等，这种页面处理刷新需要多个

<!-- 主页面 -->
<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组件(具体请求方法，和单个的相同)

<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>